Le HTML5 est la nouvelle frontière du Web : porteur de toutes les promesses, de toutes les incertitudes aussi... Celle de l’accessibilité fait partie des plus prégnantes: dans cette profusion de nouvelles fonctionnalités, qu’est-ce qui marche ? Par quoi commencer ? Comment vérifier ?
En partant d’une application existante, l'atelier montre comment passer du HTML4 au HTML5 puis améliorer les comportements avec ARIA, en respectant les bonnes pratiques d’accessibilité.
3. A chaque étape
Analyser le HTML et l’usage
des éléments (audit WCAG)
HTML 0
Réaliser des tests au clavier
Réaliser des tests avec un
lecteur d’écran
HTML 4
Exemple de procédure de tests (NVDA)
HTML 5
1. Afficher la boite liste des éléments
Action
Ins + F7
Instructions
FlêcheBas
Attendu
Boite de dialogues liste des éléments
Parcourir la liste des liens, chercher
"écrire", "message", "nouveau message"….
Shift + Tab
FlècheDroite
Tab
FlêcheBas
Liste des titres
Esc
Fin de l'action
Parcourir la liste des titres
Oui
Non
HTML 5
ARIA
4. A propos des tests lecteur d’écran
HTML 0
Test
Utilisateur
HTML 4
HTML 5
Test
Restitution
HTML 5
ARIA
5. Scénario de référence
1. Ecrire un message
HTML 0
2. Lire la liste des messages
3. Répondre à un message
HTML 4
4. Supprimer un message
f
Tab
HTML 5
d
h
Liste
d’élément
Navigation Exploration
rapide
HTML 5
ARIA
7. Une application en HTML 0
<img src="client/images/….png">
HTML 0
Simulation de
liens ou de
boutons via JS
<div id="gazouillis-tablist"><div class="gazouillis
selected">Tous les gazouillis</div><div class="gazouillismine">Mes gazouillis</div><div class="gazouillisothers">Autres gazouillis</div></div>
Pas de structure
Pas d’alternative
aux images
8. Une application en HTML 0
Résultat
Action
HTML 0
Oui
non
1. Écrire un message
Non
2. Consulter la liste des éléments
Non
3. Répondre à un message
Non
5. Supprimer un message
Non
Simulation de
liens ou de
boutons via JS
Pas de structure
Pas d’alternative
aux images
10. Une application
<button id="gazouillis-new" type="button"
class="button"><img alt="Nouveau gazouillis"
src="client/images/crayon.png"></button>
HTML 0
Tous les gazouillis
<h2 class="gazouillis selected">
<a href="#" title="Tous les
gazouillis, liste affichée">Tous
les gazouillis</a>
Tab !!
Messages
Mes gazouillis
HTML 4
Messages
HTML 5
HTML 5
ARIA
11. Une application en HTML 4
Résultat
Action
HTML 4
Oui
1. Écrire un message
Oui
2. Consulter la liste des éléments
Oui
3. Répondre à un message
Oui
5. Supprimer un message
Oui
non
Utilisation
d’éléments HTML
Natifs
Structuration
Alternatives
pertinentes
Parcours de
tabulation
(Gestion du focus)
13. Une application
Eléments sectionnants (outline)
Eléments de regroupement
HTML 0
<header>
HTML 4
<nav>
<section>
<article>
<aside>
<article>
HTML 5
<header>
<article>
<footer>
<footer>
HTML 5
ARIA
15. Une application
Aria landmark (role)
HTML 0
banner
HTML 4
navigation
<main>
main
complementary
HTML 5
contentinfo
HTML 5
ARIA
16. Une application en HTML 5
Résultat
Action
HTML 5
Oui
non
1. Écrire un message
Oui
Section
2. Consulter la liste des éléments
Oui
Regroupement
3. Répondre à un message
Oui
5. Supprimer un message
Oui
ARIA - Landmark
18. Une application
1 Fenêtre Modale
HTML 0
HTML 4
ARIA
Interaction
Clavier
role = ‘dialog’ (ou alertdialog)
aria-labelledby
tabindex
Esc
HTML 5
HTML 5
ARIA
19. Une application
2 Tabpanel
HTML 0
tablist
tabpanel
HTML 4
ARIA
Interaction
Clavier
role = ‘tablist’
role= ‘tab’
aria-controls
aria-selected
tabindex
Role=‘tabpanel’
aria-labelledby
Tab
HTML 5
HTML 5
ARIA
20. Une application
3 Liveregion
HTML 0
1. sur chaque tabpanel pour vocaliser les insertions de
nouveaux messages
HTML 4
polite | all
HTML 5
ARIA
aria-live=‘polite’
relevant=
all
rext
remove
HTML 5
ARIA
21. Une application
3 Liveregion
HTML 0
2. Par effet d’escalier les compteurs « répondre » sont
également vocalisé (relevant=‘all’)
Pas forcément très interessant par rapport à un contrôle de
saisie
polite | all
HTML 4
HTML 5
ARIA
aria-live=‘polite’
relevant=
all
rext
remove
HTML 5
ARIA
22. Une application
3 Liveregion
HTML 0
3. Sur le compteur de la modale en mode « contrôle de
saisie » (sur le blur) associé à un texte caché
polite | text
« Vous avez dépassé les 140
caractères autorisés. Il y a 29
caractères de trop »
HTML 4
HTML 5
<div aria-live="polite" aria-relevant="text"
class="visually-hidden">Vous avez dépassé les 140
caractères autorisés. Il y a 29 caractères de
trop.</div>
HTML 5
ARIA
23. Une application en HTML 5-ARIA
Résultat
Action
Oui
1. Écrire un message
Oui
2. Consulter la liste des éléments
Oui
3. Répondre à un message
Oui
5. Supprimer un message
Oui
non
HTML 5 ARIA
ARIA –
Composant
Tabpanel
Dialog
Liveregion