O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Accessibilité numérique : quelques fonctionnalités

197 visualizações

Publicada em

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

Publicada em: Internet
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×