Création de tableaux HTML accessibles avec des

fonctionnalités avancées

Par@TouficSbeiti

@Duboi5p

#a11yqc 2015

Introduction

• Nom• Travail / Étude• Niveau de connaissance en accessibilité web• Les attentes

Dans cette présentation

1. Types de tableaux2. Coder des tableaux accessibles3. Évaluer l’accessiblité des tableaux4. Simplifier les tableaux5. Fonctionalité avancé pour des

tableaux6. Tableaux réactif (Responsive)

1. Types de tableaux

Les tableaux de disposition (layout table) n’ont pas de relation entre les cellules. Ils sont utilisés à des fins esthetiques et de la formatage du contenu seulement.

Les tableaux de données (data table) sont utilisés pour organiser les données selon une relation logique. Ils ont besoin du balisage HTML pour identifier les types des cellules ainsi que la relation entre elles.

Tableaux de données

• Tableau avec un entête

• Tableau avec deux entêtes

• Tableau avec des entêtes irréguliers

• Tables avec des entête multi-niveaux

Types de tableaux

2. Coder des tableaux accessibles

Éléments HTML<table>

<table>

<tr>

<tr>

<th><th>

<td><td>

<tr><td><td>

<caption>entête entête

donnée donnée

donnée donnée

Titre

Les éléments tabulaire HTML

Fonction des cellules (th,td)Disposition: Utiliser pour la présentation (cellule vide, tableaux de disposition)

Entête: Définie une série de cellules (th)

Donnée: Information

Description: Fournis de l’information additionnelle afin de clarifier une entête

Décallage (offset): Cellule de donnée positionée avant l’entête dans le DOM

Sommaire: Cellule de donnée qui résume d’autres cellules de données.

Attribut tabulaire HTMLAttribut Utilisé avec But Syntaxecolspan <th> ,

<td>Nombre de colonne que la cellule utilise

<th colspan="4”>

rowspan <th> , <td>

Nombre de ligne que la cellule utilise

<th rowspan="3">

scope <th> Définie la porté d’une cellule d’entête

<th scope=“col”>

id <th> Identifiant unique pour une cellule

<th id="h2">

headers <th> , <td>

Liste d’identifiant (id) utilisé pour définir les entêtes d’une cellule.

<td headers="h1 h2">

abbr <th> Étiquette alternative utlisé par les logiciel lors de l’énumération des cellules d’entêtes (th)

<th abbr="Make">Toy manufacturer<th>

border <table> Dessine une ligne autour d’une cellule

<table border="1">

Attribut supplémentaire: sortable définie sur l’élément <table> active la fonctionalité de triage sur un tableau. L’attribut sorted définie sur l’élément <th> active la direction et l’ordre de triage pour une colonne.

Coding

3. Évaluer l’accessiblité des tableaux

Les critères de succès1.3.1 - Information et relationsL'information, la structure et les relations véhiculées par la présentation peuvent être déterminées par un programme informatique ou sont disponibles sous forme de texte. (Niveau A)

1.3.2 - Ordre séquentiel logiqueLorsque l'ordre de présentation du contenu affecte sa signification, un ordre de lecture correct peut être déterminé par un programme informatique. (Niveau A)

Success Criterion1.3.1 - Info and RelationshipsInformation, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

1.3.2 - Meaningful SequenceWhen the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)

Techniques suffisantes HTML • G57: Ordering the content in a meaningful sequence

• H39: Using caption elements to associate data table captions with data tables

• H43: Using id and headers attributes to associate data cells with header cells in data tables

• H51: Using table markup to present tabular information

• H63: Using the scope attribute to associate header cells and data cells in data tables

• H73: Using the summary attribute of the table element to give an overview of data tables

• H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings

Échecs fréquents• F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space character

s to format tables in plain text content Utiliser des caractères vides pour formater les tableaux

• F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables

Utiliser les elements th et caption ou avoir un summary non-vide pour une table de mise en page (disposition)

• F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized

Utiliser une table de mise en page (disposition) HTML qui n'a pas de sens quand elle est linéarisée

• F90: Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes

Associer de manière erronée les en-têtes et le contenu avec headers et id

• F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headersIdentifier les entêtes d’une manière erronée

Outils

Les modules d'extension FireFox Add-ons

• Web Developer • Jim Thatcher Favelets• Juicy Studio Accessibility Toolbar

Web Developer Toolbar

Jim Thatcher Favelets

Juicy Studio Accessibility Toolbar

Tester les add-ons de FireFox

Lecteurs d'écran

JAWS

NVDA

Lecteurs d'écran

4. Simplifier les tableaux

Pourquoi simplifier ?

• Divisé un tableau multi-niveau• Trop complexe à coder• Les cellules ne sont pas logiquement

présentées• La relations entre les entête sont vague • Le tableau n’est pas construit adéquatement

Diviser un tableau multi-niveau

Diviser un tableau multi-niveau

Méthode proposée 1. Comprendre les relations entre les cellules2. Nettoyer le tableau

– Enlever les styles visuelles – Garder seulement les éléments de base– S’assurer que les éléments des cellules sont utilisé

adéquatement (th et td)3. Préparé et changé la structure du tableau

– Ajouté/déplacé/regroupé les entêtes tel que nécessaire– Divisé le tableau en plusieurs niveaux si nécessaire– refactorisation des cellules

4. Re-validé les relations entres les cellules5. Essayer d’améliorer la structure encore plus loin

(étape 3)

Exemple

Réponse 1

Réponse 2

5. Fonctionalité avancé pour des tableaux

Datatable pluginRecherche

Pagination

ClasifiableAmélioration visuelle

Graphique

Validateur de tableau

• outil gratuit en ligne

• facile d’utilisation

• identifie des problématiques liés aux relations

• accélere le codage des tableaux complexes

Fonctionalités avancée

6. Tableaux réactif (Responsive)

Bootstrap

Bootstrap

Tablesaw

Swipe Navigation entre les colonnes à l’aide de geste de balayage (swipe) ou en utilisant les bouton gauche et droite.

TablesawStack Empile les entêtes du tableau de manière à disposer l’information en deux colonnes avec les entête à gauche et cela ce produit lorsque la largeur d’affichage est en dessous de 40em (640 px).

References • Web Accessibility Tutorials

http://www.w3.org/WAI/tutorials/tables/one-header/

• Web Experience Toolkit (WET)http://wet-boew.github.io/wet-boew/index-en.html

• Bootstrap responsive tables http://getbootstrap.com/css/#tables

• WCAG techniques

http://www.w3.org/WAI/GL/WCAG20-TECHS/

• Data table pluginhttps://www.datatables.net/

• Keyboard shortcuts for NVDAhttp://webaim.org/resources/shortcuts/nvda

• Web Accessibility Content Guidelineshttp://www.w3.org/TR/WCAG20/

• Tablesawhttps://github.com/filamentgroup/tablesaw

Tools• Web Developer Toolbar

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

• Jim Thatcher Faveletshttp://jimthatcher.com/favelets/

• Juicy Studio Accessibility Toolbar https://addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too/

• Job Access With Speech - JAWShttp://www.freedomscientific.com/Products/Blindness/JAWS

• NonVisual Desktop Access- NVDAhttp://www.nvaccess.org/download/