Intervention de Damien Engels, Software Engineer chez Google, le 14 mars 2018.

1. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
A11y de A a Y
--
Damien Engels
Accessibilité sur le Web

2. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
● Concepts de base
○ Navigation sans souris
○ Une structure sans écran
○ Des noms et des rôles
● Mécanismes d'implémentation
○ Specs ARIA
○ Patterns (ARIA authoring practices)
● Outils
○ Axe & Lighthouse
○ Accessibility tree

3. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Concepts de base
Navigation sans souris

4. Navigation sans souris - dimensions
Souris (2 dimensions) Clavier (1 dimension)
Tab ↹
Tab ↹Shift ⇧

5. Navigation sans souris - position
Curseur Focus

6. Navigation sans souris - activation
Click Enter / Espace
Enter ↵
or

7. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Concepts de base
Une structure sans écran

8. Structure sans écran - base

9. Structure sans écran - base
[banner]
[navigation]
[navigation]
[search]
[h1] Service-Public.fr Particuliers: Connaître vos droits, effectuer vos démarches
[main]
[h2] LES PLUS CONSULTÉES
[h3] PAPIERS - CITOYENNETÉ
[h3] FAMILLE
[h3] SOCIAL - SANTÉ
...
[h2] COMMENT FAIRE SI…
[h2] SERVICES EN LIGNE
[h2] QUESTIONS - RÉPONSES
...

10. Structure sans écran - structure secondaire

11. [banner]
[navigation]
[navigation]
[search]
[h1] Service-Public.fr Particuliers: Connaître vos droits, effectuer vos démarches
[main]
[h2] LES PLUS CONSULTÉES
[h3] PAPIERS - CITOYENNETÉ
[h3] FAMILLE
[h3] SOCIAL - SANTÉ
...
[h2] COMMENT FAIRE SI…
[h2] SERVICES EN LIGNE
[h2] QUESTIONS - RÉPONSES
...
Structure sans écran - structure secondaire

12. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Concepts de base
Des noms et des rôles

13. Des noms et des rôles - un input et un bouton
Rôle (forme)
input
Nom (fond)
Saisissez votre adresse électronique
(ex. : nom@exemple.fr)
Rôle (forme)
button
Nom (fond)
M’inscrire

14. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Mechanismes
Specs ARIA
https://www.w3.org/TR/wai-aria-1.1/

15. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Structure - Titres
<div role=”heading” aria-level=”1” … >
Titre de la page
</div>
<h2>
Section 3
</h2>

16. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Roles
<div role=”button” … > … </div>
<div role=”checkbox” … > … </div>
<div role=”listbox”>
<div role=”option” … > … </div>
</div>

17. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Noms
<div role=”button” aria-label=”Send” … >
…
</div>
<div role=”checkbox” aria-labelledby=”label_id”>
…
</div>
<div id=”label_id”>
I read terms and conditions
</div>

18. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Mechanismes
Patterns (ARIA authoring practices)
https://www.w3.org/TR/wai-aria-practices-1.1/

19. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
ARIA Practices (Simple >> Compliqué)
- Plein de modèles d’interaction prédéfinis:
- Button, Checkbox, Listbox, …
- Avec beaucoup d'exemples disponibles:
- boutons
- bi-state checkbox, tri-state checkbox
- scrollable listbox, collapsible listbox,
rearrangeable listbox
- ...

20. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Outils
Axe & Lighthouse

21. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Axe & Lighthouse
- Contrast, taille de texte
- Labels manquants
- Incohérence dans les annotations

22. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Outils
Accessibility tree

23. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Accessibility tree

24. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
MERCI
Damien Engels