1- Types de tableaux 2- Coder des tableaux accessibles 3- Évaluer l’accessiblité des tableaux 4- Simplifier les tableaux 5- Fonctionalité avancé pour des tableaux 6- Tableaux réactif (Responsive)

1. Création de tableaux HTML
accessibles avec des
fonctionnalités avancées
Par
@TouficSbeiti
@Duboi5p
#a11yqc 2015

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

3. Dans cette présentation
1. Types de tableaux
2. Coder des tableaux accessibles
3. Évaluer l’accessiblité des tableaux
4. Simplifier les tableaux
5. Fonctionalité avancé pour des
tableaux
6. Tableaux réactif (Responsive)

4. 1. Types de tableaux

5. 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.

6. 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.

7. 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

8. Types de tableaux

9. 2. Coder des tableaux accessibles

10. É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

11. Les éléments tabulaire HTML

12. 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.

13. Attribut tabulaire HTML
Attribut Utilisé avec But Syntaxe
colspan <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.

14. Coding

15. 3. Évaluer l’accessiblité des
tableaux

16. Les critères de succès
1.3.1 - Information et relations
L'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 logique
Lorsque 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)

17. Success Criterion
1.3.1 - Info and Relationships
Information, structure, and relationships conveyed through
presentation can be programmatically determined or are
available in text. (Level A)
1.3.2 - Meaningful Sequence
When the sequence in which content is presented affects its
meaning, a correct reading sequence can be programmatically
determined. (Level A)

18. 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

19. Échecs fréquents
• F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space
characters 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 headers
Identifier les entêtes d’une manière erronée

20. Outils

21. Les modules d'extension
FireFox Add-ons
• Web Developer
• Jim Thatcher Favelets
• Juicy Studio Accessibility Toolbar

22. Web Developer Toolbar

23. Jim Thatcher Favelets

24. Juicy Studio Accessibility Toolbar

25. Tester les add-ons de FireFox

26. Lecteurs d'écran

27. JAWS

28. NVDA

29. Lecteurs d'écran

30. 4. Simplifier les tableaux

31. 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

32. Diviser un tableau multi-niveau

33. Diviser un tableau multi-niveau

34. Méthode proposée
1. Comprendre les relations entre les cellules
2. 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 cellules
5. Essayer d’améliorer la structure encore plus loin
(étape 3)

35. Exemple

36. Réponse 1

37. Réponse 2

38. 5. Fonctionalité avancé pour des
tableaux

39. Datatable plugin
Recherche
Pagination
Clasifiable
Amélioration visuelle

40. Graphique

41. 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

42. Fonctionalités avancée

43. 6. Tableaux réactif (Responsive)

44. Bootstrap

45. Bootstrap

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

47. Tablesaw
Stack 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).

48. 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 plugin
https://www.datatables.net/
• Keyboard shortcuts for NVDA
http://webaim.org/resources/shortcuts/nvda
• Web Accessibility Content Guidelines
http://www.w3.org/TR/WCAG20/
• Tablesaw
https://github.com/filamentgroup/tablesaw

49. Tools
• Web Developer Toolbar https://addons.mozilla.org/en-
US/firefox/addon/web-developer/
• Jim Thatcher Favelets
http://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/JAW
S
• NonVisual Desktop Access- NVDA
http://www.nvaccess.org/download/