Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessibilité numérique : quelques fonctionnalités

156 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Accessibilité numérique : quelques fonctionnalités

  1. 1. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité A11y de A a Y -- Damien Engels Accessibilité sur le Web
  2. 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. 3. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité Concepts de base Navigation sans souris
  4. 4. Navigation sans souris - dimensions Souris (2 dimensions) Clavier (1 dimension) Tab ↹ Tab ↹Shift ⇧
  5. 5. Navigation sans souris - position Curseur Focus
  6. 6. Navigation sans souris - activation Click Enter / Espace Enter ↵ or
  7. 7. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité Concepts de base Une structure sans écran
  8. 8. Structure sans écran - base
  9. 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. 10. Structure sans écran - structure secondaire
  11. 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. 12. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité Concepts de base Des noms et des rôles
  13. 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. 14. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité Mechanismes Specs ARIA https://www.w3.org/TR/wai-aria-1.1/
  15. 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. 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. 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. 18. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité Mechanismes Patterns (ARIA authoring practices) https://www.w3.org/TR/wai-aria-practices-1.1/
  19. 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. 20. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité Outils Axe & Lighthouse
  21. 21. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité Axe & Lighthouse - Contrast, taille de texte - Labels manquants - Incohérence dans les annotations
  22. 22. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité Outils Accessibility tree
  23. 23. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité Accessibility tree
  24. 24. 25 janvier 2018 – #WAday14 mars 2018 - Accessibilité MERCI Damien Engels

×