Paris Web 2013

Atelier
Rendre une application
accessible en 4 étapes
Une application
HTML 0

HTML 4

HTML 5

HTML 5
ARIA
A chaque étape
 Analyser le HTML et l’usage
des éléments (audit WCAG)

HTML 0

 Réaliser des tests au clavier
 Réaliser...
A propos des tests lecteur d’écran
HTML 0
Test
Utilisateur
HTML 4

HTML 5
Test
Restitution

HTML 5
ARIA
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. Sup...
HTML 0
Le trou noir
Une application en HTML 0
<img src="client/images/….png">

HTML 0
Simulation de
liens ou de
boutons via JS

<div id="gazou...
Une application en HTML 0
Résultat
Action

HTML 0
Oui

non

1. Écrire un message

Non

2. Consulter la liste des éléments
...
HTML 4
Le Web de Grand Papa
Une application
<button id="gazouillis-new" type="button"
class="button"><img alt="Nouveau gazouillis"
src="client/images/...
Une application en HTML 4
Résultat
Action

HTML 4
Oui

1. Écrire un message

Oui

2. Consulter la liste des éléments

Oui
...
HTML 5
Le Web mutant
Une application
Eléments sectionnants (outline)
Eléments de regroupement

HTML 0

<header>

HTML 4

<nav>
<section>

<arti...
Une application
Outline Vs plan de titrage

HTML 0

HTML 4

HTML 5

Outline

Titrage

HTML 5
ARIA
Une application
Aria landmark (role)

HTML 0

banner

HTML 4

navigation
<main>

main

complementary

HTML 5

contentinfo
...
Une application en HTML 5
Résultat
Action

HTML 5
Oui

non

1. Écrire un message

Oui

Section

2. Consulter la liste des ...
ARIA
Le Web accessible
Une application
1 Fenêtre Modale

HTML 0

HTML 4

ARIA

Interaction
Clavier

 role = ‘dialog’ (ou alertdialog)
 aria-lab...
Une application
2 Tabpanel

HTML 0

tablist
tabpanel

HTML 4

ARIA

Interaction
Clavier

 role = ‘tablist’
 role= ‘tab’
...
Une application
3 Liveregion

HTML 0

1. sur chaque tabpanel pour vocaliser les insertions de
nouveaux messages

HTML 4
po...
Une application
3 Liveregion

HTML 0

2. Par effet d’escalier les compteurs « répondre » sont
également vocalisé (relevant...
Une application
3 Liveregion

HTML 0

3. Sur le compteur de la modale en mode « contrôle de
saisie » (sur le blur) associé...
Une application en HTML 5-ARIA
Résultat
Action

Oui

1. Écrire un message

Oui

2. Consulter la liste des éléments

Oui

3...
FIN
Prochain SlideShare
Chargement dans…5
×

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

1 268 vues

Publié le

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

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 268
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
16
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×