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)
10 quick tests to enhance your site’s accessibilityToufic Sbeiti
In this presentation, I talk about 10 tests that can be performed quickly without any coding skills to measure the accessibility of a web page. If you are a developer, you can fix before posting live. If you are a project manager or a client, you can ensure the level of accessibility without advanced coding knowledge.
Découvrez cette nouvelle formation Excel pour devenir pleinement autonome dans la gestion de vos tableaux et graphiques
Découvrez le programme complet :
https://youtu.be/Gv5Wlt37sbE
objectif général : Prendre en main DreamWeaver
objectifs opérationnels :
- Paramétrer un site local
- Publier du texte
- Lister du contenu
- Lier des contenus
- Afficher une image
- Établir un tableau
- Présenter un formulaire
- Positionner et régler l’affichage d’un contenu
- Intégrer du son et de la vidéo
10 quick tests to enhance your site’s accessibilityToufic Sbeiti
In this presentation, I talk about 10 tests that can be performed quickly without any coding skills to measure the accessibility of a web page. If you are a developer, you can fix before posting live. If you are a project manager or a client, you can ensure the level of accessibility without advanced coding knowledge.
Découvrez cette nouvelle formation Excel pour devenir pleinement autonome dans la gestion de vos tableaux et graphiques
Découvrez le programme complet :
https://youtu.be/Gv5Wlt37sbE
objectif général : Prendre en main DreamWeaver
objectifs opérationnels :
- Paramétrer un site local
- Publier du texte
- Lister du contenu
- Lier des contenus
- Afficher une image
- Établir un tableau
- Présenter un formulaire
- Positionner et régler l’affichage d’un contenu
- Intégrer du son et de la vidéo
Mieux travailler sur Excel pour exporter un fichier CSV propre : structure des données, contenu et présentation.
Cette présentation est une première base de travail. Vos avis sont les bienvenus !
[User Guide] 7 bonnes pratiques pour réussir vos tableaux de bord Excel avec ...AT Internet
Voici un User Guide très utiles pour faire gagner du temps à tous les analystes web ou professionnels qui sont en charge de la conception de tableaux de bord web analytics avec Data Query.
https://www.lecfomasque.com Le CFO masqué vous explique les différences entre Excel, Power Query, Power Pivot et Power BI et vous indique quelles sont les nouvelles compétences requises pour les usagers d'Excel qui souhaitent maîtriser Power BI.
Objectif général : Concevoir une base de données
Objectifs opérationnels :
- Comprendre les différents concepts entourant les BD
- Comprendre les concepts associés aux BD relationnelles
- Établir un dictionnaire de données (DD)
- Structurer les données du DD
- Construire un Modèle Conceptuel des Données (MCD)
- Transformer un MCD en Modèle logique de données (MLD)
- Normaliser un MLD
Mieux travailler sur Excel pour exporter un fichier CSV propre : structure des données, contenu et présentation.
Cette présentation est une première base de travail. Vos avis sont les bienvenus !
[User Guide] 7 bonnes pratiques pour réussir vos tableaux de bord Excel avec ...AT Internet
Voici un User Guide très utiles pour faire gagner du temps à tous les analystes web ou professionnels qui sont en charge de la conception de tableaux de bord web analytics avec Data Query.
https://www.lecfomasque.com Le CFO masqué vous explique les différences entre Excel, Power Query, Power Pivot et Power BI et vous indique quelles sont les nouvelles compétences requises pour les usagers d'Excel qui souhaitent maîtriser Power BI.
Objectif général : Concevoir une base de données
Objectifs opérationnels :
- Comprendre les différents concepts entourant les BD
- Comprendre les concepts associés aux BD relationnelles
- Établir un dictionnaire de données (DD)
- Structurer les données du DD
- Construire un Modèle Conceptuel des Données (MCD)
- Transformer un MCD en Modèle logique de données (MLD)
- Normaliser un MLD
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)
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
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.
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
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
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)
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
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/