Paris Web 2013 - Atelier, rendre une application accessible en quatre étapes

1,143 views
1,031 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,143
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Paris Web 2013 - Atelier, rendre une application accessible en quatre étapes

  1. 1. Paris Web 2013 Atelier Rendre une application accessible en 4 étapes
  2. 2. Une application HTML 0 HTML 4 HTML 5 HTML 5 ARIA
  3. 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. 4. A propos des tests lecteur d’écran HTML 0 Test Utilisateur HTML 4 HTML 5 Test Restitution HTML 5 ARIA
  5. 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. 6. HTML 0 Le trou noir
  7. 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. 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. 9. HTML 4 Le Web de Grand Papa
  10. 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. 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. 12. HTML 5 Le Web mutant
  13. 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. 14. Une application Outline Vs plan de titrage HTML 0 HTML 4 HTML 5 Outline Titrage HTML 5 ARIA
  15. 15. Une application Aria landmark (role) HTML 0 banner HTML 4 navigation <main> main complementary HTML 5 contentinfo HTML 5 ARIA
  16. 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. 17. ARIA Le Web accessible
  18. 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. 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. 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. 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. 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. 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. 24. FIN

×