Vous pouvez venir à cet talk les yeux fermés - Snowcamp 2024

by lair_net

Slide 1

Slide 1 text

Vous pouvez venir à ce talk les yeux fermés François-Xavier Lair

Slide 2

Slide 2 text

@lair_net mastodon.top/@lair_net François-Xavier Lair

Slide 3

Slide 3 text

Présentations Julie

Slide 4

Slide 4 text

Présentations Les utilisateurs

Slide 5

Slide 5 text

Quelques chiffres En France • En France, près de 1,7 million de personnes sont atteintes d’un trouble de la vision. ▪ 207 000 aveugles et malvoyants profonds ▪ 932 000 malvoyants moyens • 1 personne aveugle ou malvoyante naît toutes les 15 heures.

Slide 6

Slide 6 text

Quelques chiffres Dans le monde • 253 millions de personnes présentent une déficience visuelle ▪ 36 millions d’entre elles sont aveugles ▪ 217 millions présentent une déficience visuelle modérée à sévère • Selon l’OMS, un d do ou ub bl le em me en nt t du nombre de déficients visuels serait à prévoir d’ici 2050

Slide 7

Slide 7 text

Quelques chiffres Accessibilité pour les aveugles et malvoyants

Slide 8

Slide 8 text

Quelques chiffres Accessibilité pour les aveugles et malvoyants • Seuls 10% des sites internet sont accessibles aux personnes aveugles et malvoyantes. • Sur les 250 démarches administratives les plus utilisées par les Français, seules 15% respectent les normes d’accessibilité.

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Quel est l'aveugle le plus connu au monde ?

Slide 11

Slide 11 text

Quel est l'aveugle le plus connu au monde ?

Slide 12

Slide 12 text

Rappel “L'accessibilité, indispensable pour certains, utile pour tous.” — W3C Web Accessibility Initiative

Slide 13

Slide 13 text

Qui utilise les lecteurs d'écrans • Aveugles • Malvoyants • Personnes avec des soucis cognitifs ou des difficultés d'apprentissage • Analphabètes et dyslexiques. • Personnes non native pour les aider avec la prononciations

Slide 14

Slide 14 text

Les lecteurs d'écrans • En France sur Desktop ▪ Jaws 45% ▪ NVDA 29% ▪ VoiceOver 19% ▪ Orca ???

Slide 15

Slide 15 text

Disclaimer Pourquoi vois-tu la paille qui est dans l'œil de ton frère et n'aperçois-tu pas la poutre qui est dans ton œil à toi ! Évangile de Luc, 6, 41

Slide 16

Slide 16 text

Le titre de la page Le titre de la Page : • NVDA : Inser + T • VoiceOver : VO + F2 Onglet précédent / suivant : Ctrl + PageUp/PageDown

Slide 17

Slide 17 text

Le titre de la page

Slide 18

Slide 18 text

Titre de la page : Résumé • Il permet de retrouver la page dans l’historique de navigation ou la liste des onglets. • Contient le nom du site • Décrit le contenu ou la fonction de la page • Précise quelle est l'étape en cours d'un processus • Dans une série de résultats de recherche, précise quel est l'intervalle de résultats affichés.

Slide 19

Slide 19 text

Titre de la page : Conseils et astuces • Automatiser • Utiliser un outil permettant de dresser la liste complète des titres de toutes les pages ( , ) Xenu Screaming Frog

Slide 20

Slide 20 text

Titre de la page : Références • , • 8.5 et 8.6 Règle Opquast n°98 Règle Opquast n°97 Critères RGAA

Slide 21

Slide 21 text

Stratégies de découverte du contenu de la page

Slide 22

Slide 22 text

Aparté : Focus sur le focus Les lecteurs d’écran restituent uniquement le contenu sur lequel le focus est positionné. Focus d’un lecteur d’écran ≠ Focus du clavier La qualité du code HTML est d’une importance fondamentale

Slide 23

Slide 23 text

Aparté 2 : Principales commandes Aides-mémoires des raccourcis claviers Aides-mémoires des raccourcis claviers Orca

Slide 24

Slide 24 text

Stratégies de découverte du contenu de la page : Lecture complète Lire à partir du point courant : • NVDA : Inser + A (ou Inser + flêche bas) • VO : VO + A

Slide 25

Slide 25 text

Stratégies de découverte du contenu de la page : Landmarks (...) (...) (...) (...) (...) (...)

Slide 26

Slide 26 text

Stratégies de découverte du contenu de la page : Landmarks Pour naviguer parmi les landmarks ARIA : • NVDA : D (ou shift + D) • VO : Via le rotor

Slide 27

Slide 27 text

Stratégies de découverte du contenu de la page : Landmarks

Slide 28

Slide 28 text

Stratégies de découverte du contenu de la page : Landmarks Les balises nav sont réservées à la navigation principales

Slide 29

Slide 29 text

Landmarks : Références • 12.6 Critères RGAA

Slide 30

Slide 30 text

Stratégies de découverte du contenu de la page : Liens • NVDA : K (ou shift + K) • VO : VO + Command + L

Slide 31

Slide 31 text

Stratégies de découverte du contenu de la page : Liens • NVDA : K (ou shift + K) • VO : VO + Command + L Comment faciliter cette navigation par liens ?

Slide 32

Slide 32 text

Liens : Menu d'évitements Exemple de lien d'accès rapide : • Contenu principal • Menu principal • Recherche • Pied de page Références : • 12.7 • Critères RGAA Règle Opquast n°159

Slide 33

Slide 33 text

Liens : Problèmes courants

Slide 34

Slide 34 text

Liens : Problèmes courants • Liens non explicites : En savoir plus, découvrir, tout sur... En savoir plus sur l'accessibilité

Slide 35

Slide 35 text

Liens : Problèmes courants • Liens non explicites : En savoir plus, découvrir, tout sur... En savoir plus sur l'accessibilité

Slide 36

Slide 36 text

Liens : Problèmes courants

Slide 37

Slide 37 text

Liens : Problèmes courants • Liens non explicites : En savoir plus, découvrir, tout sur... • Liens sans intitulés

Slide 38

Slide 38 text

Liens : Problèmes courants

Slide 39

Slide 39 text

Liens : Problèmes courants • Liens non explicites : En savoir plus, découvrir, tout sur... • Liens sans intitulés • Liens englobants des contenus

Slide 40

Slide 40 text

Liens : Problèmes courants • Liens non explicites : En savoir plus, découvrir, tout sur... • Liens sans intitulés • Liens englobants des contenus Accessible cards - Kitty Giraudel

Slide 41

Slide 41 text

A div is not a button

Slide 42

Slide 42 text

Stratégies de découverte du contenu de la page : Titres • NVDA ▪ Titre suivant : H (ou shift + H) ▪ Titre 1-6 : 1 - 6 • VO : VO + H

Slide 43

Slide 43 text

Hiérarchie des titres : problèmes courants • Absence de titres • Problème de hiérarchie dans les titres • Titres non-pertinents • Titres "simulés" • SEO

Slide 44

Slide 44 text

Hiérarchie des titres : Références • • • 9.1 et 9.2 https:/ /www.tpgi.com/heading-off-confusion-when-do-headings- fail-wcag/ Règle Opquast n°227 Critères RGAA

Slide 45

Slide 45 text

Méthodes de navigation : Résumé • Lecture complète de la page • Landmark • Accès rapides • Navigation par les liens • Titres de la page Toutes ces tactiques d'explorations peuvent se cumuler Différences entre une première navigation et les suivantes.

Slide 46

Slide 46 text

Autres balises sémantiques Utiliser les bonnes balises pour permettre une meilleure expérience utilisateur

Slide 47

Slide 47 text

Les listes • NVDA ▪ Liste suivante : L ▪ Item de liste suivante : I • VO : VO + COMMAND + X

Slide 48

Slide 48 text

Listes : Références • • 9.3 Règle Opquast n°228 Critères RGAA

Slide 49

Slide 49 text

Les images • NVDA Graphique suivant : G • VO : VO + Command + G

Slide 50

Slide 50 text

Les images • NVDA Graphique suivant : G • VO : VO + Command + G Problèmes courants : • Images sans alt • Images porteuses d'information avec une alternative vide ou incomplète

Slide 51

Slide 51 text

Les images

Slide 52

Slide 52 text

Les images Problèmes courants : • Images sans alt • Images porteuses d'information avec une alternative vide ou incomplète • Images de décoration restituées

Slide 53

Slide 53 text

Les images - Glyphs

Slide 54

Slide 54 text

Les images - émoticônes

Slide 55

Slide 55 text

Les images - émoticônes Signification des émoticônes

Slide 56

Slide 56 text

Les images - émoticônes Signification des émoticônes

Slide 57

Slide 57 text

Images : références • • , , • 1.1 à 1.9 Arbre de décision W3C Règle Opquast n°111 Règle Opquast n°112 Règle Opquast n°113 Critères RGAA

Slide 58

Slide 58 text

Langue

Slide 59

Slide 59 text

Langue ... MBA DBA Community ...

Slide 60

Slide 60 text

Langue : Références • • • • 8.3 et 8.4 Règle Opquast 125 Règle Opquast 125 Règle Opquast 127 Critères RGAA

Slide 61

Slide 61 text

Les formulaires • NVDA Item de formulaire suivant : F • VO Item de formulaire suivant : VO + Command + J

Slide 62

Slide 62 text

Les formulaires • NVDA Item de formulaire suivant : F • VO Item de formulaire suivant : VO + Command + J

Slide 63

Slide 63 text

Les formulaires • NVDA Item de formulaire suivant : F • VO Item de formulaire suivant : VO + Command + J

Slide 64

Slide 64 text

Aria Aria : Accessible Rich Internet Applications

Slide 65

Slide 65 text

Aria Aria : Accessible Rich Internet Applications Aria, mon meilleur ennemie pour l'accessibilité.

Slide 66

Slide 66 text

Aria Aria : Accessible Rich Internet Applications Aria, mon meilleur ennemie pour l'accessibilité. La première règle d'Aria c'est de ne pas l'utiliser

Slide 67

Slide 67 text

Aria Nom* Vous devez indiquer votre nom.

Slide 68

Slide 68 text

Conclusion • Ne laissez pas des utilisateurs à la porte de votre site • Importance de la sémantique, des titres, des liens • Div is not a button • Vérifiez les liens • Donner de bonnes alternatives aux éléments graphiques Tester, tester, tester !