SlideShare une entreprise Scribd logo
25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
A11y de A a Y
--
Damien Engels
Accessibilité sur le Web
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
25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Concepts de base
Navigation sans souris
Navigation sans souris - dimensions
Souris (2 dimensions) Clavier (1 dimension)
Tab ↹
Tab ↹Shift ⇧
Navigation sans souris - position
Curseur Focus
Navigation sans souris - activation
Click Enter / Espace
Enter ↵
or
25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Concepts de base
Une structure sans écran
Structure sans écran - base
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
...
Structure sans écran - structure secondaire
[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
25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Concepts de base
Des noms et des rôles
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
25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Mechanismes
Specs ARIA
https://www.w3.org/TR/wai-aria-1.1/
25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Structure - Titres
<div role=”heading” aria-level=”1” … >
Titre de la page
</div>
<h2>
Section 3
</h2>
25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Roles
<div role=”button” … > … </div>
<div role=”checkbox” … > … </div>
<div role=”listbox”>
<div role=”option” … > … </div>
</div>
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>
25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Mechanismes
Patterns (ARIA authoring practices)
https://www.w3.org/TR/wai-aria-practices-1.1/
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
- ...
25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Outils
Axe & Lighthouse
25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Axe & Lighthouse
- Contrast, taille de texte
- Labels manquants
- Incohérence dans les annotations
25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Outils
Accessibility tree
25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
Accessibility tree
25 janvier 2018 – #WAday14 mars 2018 - Accessibilité
MERCI
Damien Engels

Contenu connexe

Plus de webassoc .fr

Waday2019 Terre des Hommes
Waday2019 Terre des HommesWaday2019 Terre des Hommes
Waday2019 Terre des Hommes
webassoc .fr
 
Formation DataScience
Formation DataScienceFormation DataScience
Formation DataScience
webassoc .fr
 
Motivations au benevolat : analyses
Motivations au benevolat : analysesMotivations au benevolat : analyses
Motivations au benevolat : analyses
webassoc .fr
 
Les motivations au benevolat
Les motivations au benevolatLes motivations au benevolat
Les motivations au benevolat
webassoc .fr
 
Accessibilité numérique : témoignage Houra
Accessibilité numérique : témoignage HouraAccessibilité numérique : témoignage Houra
Accessibilité numérique : témoignage Houra
webassoc .fr
 
Accessibilité numérique : le cadre légal
Accessibilité numérique : le cadre légalAccessibilité numérique : le cadre légal
Accessibilité numérique : le cadre légal
webassoc .fr
 
Entreprises, engagez-vous dans la solidarité avec Webassoc !
Entreprises, engagez-vous dans la solidarité avec Webassoc !Entreprises, engagez-vous dans la solidarité avec Webassoc !
Entreprises, engagez-vous dans la solidarité avec Webassoc !
webassoc .fr
 
Comment mobiliser dans un contexte de fake news
Comment mobiliser dans un contexte de fake newsComment mobiliser dans un contexte de fake news
Comment mobiliser dans un contexte de fake news
webassoc .fr
 
Le rôle de la direction dans une campagne de mobilisation
Le rôle de la direction dans une campagne de mobilisationLe rôle de la direction dans une campagne de mobilisation
Le rôle de la direction dans une campagne de mobilisation
webassoc .fr
 
Crowdfunding : formation par Ulule pour Webassoc - 2017, 19 septembre
Crowdfunding : formation par Ulule pour Webassoc - 2017, 19 septembreCrowdfunding : formation par Ulule pour Webassoc - 2017, 19 septembre
Crowdfunding : formation par Ulule pour Webassoc - 2017, 19 septembre
webassoc .fr
 
Qui sont les bénévoles web ?
Qui sont les bénévoles web ?Qui sont les bénévoles web ?
Qui sont les bénévoles web ?
webassoc .fr
 
Webassoc.fr - presentation
Webassoc.fr - presentationWebassoc.fr - presentation
Webassoc.fr - presentation
webassoc .fr
 
Les leviers de communication pour collecter - mai 2017
Les leviers de communication pour collecter - mai 2017Les leviers de communication pour collecter - mai 2017
Les leviers de communication pour collecter - mai 2017
webassoc .fr
 
Le tunnel de don en ligne
Le tunnel de don en ligneLe tunnel de don en ligne
Le tunnel de don en ligne
webassoc .fr
 
Les fondamentaux juridiques et fiscaux de la collecte - mai 2017
Les fondamentaux juridiques et fiscaux de la collecte - mai 2017Les fondamentaux juridiques et fiscaux de la collecte - mai 2017
Les fondamentaux juridiques et fiscaux de la collecte - mai 2017
webassoc .fr
 
Les fondamentaux de la collecte - mai 2017
Les fondamentaux de la collecte - mai 2017Les fondamentaux de la collecte - mai 2017
Les fondamentaux de la collecte - mai 2017
webassoc .fr
 
Google Analytics - avancé, Webassoc - janvier 2017
Google Analytics - avancé, Webassoc - janvier 2017Google Analytics - avancé, Webassoc - janvier 2017
Google Analytics - avancé, Webassoc - janvier 2017
webassoc .fr
 
Le digital au service des assos de solidarité, Lyon, 31 janvier 2017.
Le digital au service des assos de solidarité, Lyon, 31 janvier 2017.Le digital au service des assos de solidarité, Lyon, 31 janvier 2017.
Le digital au service des assos de solidarité, Lyon, 31 janvier 2017.
webassoc .fr
 
Criteo - specs créas pour Webassoc
Criteo - specs créas pour WebassocCriteo - specs créas pour Webassoc
Criteo - specs créas pour Webassoc
webassoc .fr
 
Formation au crowdfunding pour Webassoc - décembre 2016
Formation au crowdfunding pour Webassoc - décembre 2016Formation au crowdfunding pour Webassoc - décembre 2016
Formation au crowdfunding pour Webassoc - décembre 2016
webassoc .fr
 

Plus de webassoc .fr (20)

Waday2019 Terre des Hommes
Waday2019 Terre des HommesWaday2019 Terre des Hommes
Waday2019 Terre des Hommes
 
Formation DataScience
Formation DataScienceFormation DataScience
Formation DataScience
 
Motivations au benevolat : analyses
Motivations au benevolat : analysesMotivations au benevolat : analyses
Motivations au benevolat : analyses
 
Les motivations au benevolat
Les motivations au benevolatLes motivations au benevolat
Les motivations au benevolat
 
Accessibilité numérique : témoignage Houra
Accessibilité numérique : témoignage HouraAccessibilité numérique : témoignage Houra
Accessibilité numérique : témoignage Houra
 
Accessibilité numérique : le cadre légal
Accessibilité numérique : le cadre légalAccessibilité numérique : le cadre légal
Accessibilité numérique : le cadre légal
 
Entreprises, engagez-vous dans la solidarité avec Webassoc !
Entreprises, engagez-vous dans la solidarité avec Webassoc !Entreprises, engagez-vous dans la solidarité avec Webassoc !
Entreprises, engagez-vous dans la solidarité avec Webassoc !
 
Comment mobiliser dans un contexte de fake news
Comment mobiliser dans un contexte de fake newsComment mobiliser dans un contexte de fake news
Comment mobiliser dans un contexte de fake news
 
Le rôle de la direction dans une campagne de mobilisation
Le rôle de la direction dans une campagne de mobilisationLe rôle de la direction dans une campagne de mobilisation
Le rôle de la direction dans une campagne de mobilisation
 
Crowdfunding : formation par Ulule pour Webassoc - 2017, 19 septembre
Crowdfunding : formation par Ulule pour Webassoc - 2017, 19 septembreCrowdfunding : formation par Ulule pour Webassoc - 2017, 19 septembre
Crowdfunding : formation par Ulule pour Webassoc - 2017, 19 septembre
 
Qui sont les bénévoles web ?
Qui sont les bénévoles web ?Qui sont les bénévoles web ?
Qui sont les bénévoles web ?
 
Webassoc.fr - presentation
Webassoc.fr - presentationWebassoc.fr - presentation
Webassoc.fr - presentation
 
Les leviers de communication pour collecter - mai 2017
Les leviers de communication pour collecter - mai 2017Les leviers de communication pour collecter - mai 2017
Les leviers de communication pour collecter - mai 2017
 
Le tunnel de don en ligne
Le tunnel de don en ligneLe tunnel de don en ligne
Le tunnel de don en ligne
 
Les fondamentaux juridiques et fiscaux de la collecte - mai 2017
Les fondamentaux juridiques et fiscaux de la collecte - mai 2017Les fondamentaux juridiques et fiscaux de la collecte - mai 2017
Les fondamentaux juridiques et fiscaux de la collecte - mai 2017
 
Les fondamentaux de la collecte - mai 2017
Les fondamentaux de la collecte - mai 2017Les fondamentaux de la collecte - mai 2017
Les fondamentaux de la collecte - mai 2017
 
Google Analytics - avancé, Webassoc - janvier 2017
Google Analytics - avancé, Webassoc - janvier 2017Google Analytics - avancé, Webassoc - janvier 2017
Google Analytics - avancé, Webassoc - janvier 2017
 
Le digital au service des assos de solidarité, Lyon, 31 janvier 2017.
Le digital au service des assos de solidarité, Lyon, 31 janvier 2017.Le digital au service des assos de solidarité, Lyon, 31 janvier 2017.
Le digital au service des assos de solidarité, Lyon, 31 janvier 2017.
 
Criteo - specs créas pour Webassoc
Criteo - specs créas pour WebassocCriteo - specs créas pour Webassoc
Criteo - specs créas pour Webassoc
 
Formation au crowdfunding pour Webassoc - décembre 2016
Formation au crowdfunding pour Webassoc - décembre 2016Formation au crowdfunding pour Webassoc - décembre 2016
Formation au crowdfunding pour Webassoc - décembre 2016
 

Accessibilité numérique : quelques fonctionnalités

  • 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
  • 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