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

1. Paris Web 2013
Atelier
Rendre une application
accessible en 4 étapes

2. Une application
HTML 0
HTML 4
HTML 5
HTML 5
ARIA

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

6. HTML 0
Le trou noir

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

9. HTML 4
Le Web de Grand Papa

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)

12. HTML 5
Le Web mutant

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

14. Une application
Outline Vs plan de titrage
HTML 0
HTML 4
HTML 5
Outline
Titrage
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

17. ARIA
Le Web accessible

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

24. FIN