création de tableaux html accessibles avec des fonctionnalités avancées
Post on 27-Jan-2017
267 Views
Preview:
TRANSCRIPT
Création de tableaux HTML accessibles avec des
fonctionnalités avancées
Par@TouficSbeiti
@Duboi5p
#a11yqc 2015
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)
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
É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
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.
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
Les modules d'extension FireFox Add-ons
• Web Developer • Jim Thatcher Favelets• Juicy Studio Accessibility Toolbar
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
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)
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
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/
top related