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

L'objectif de ce talk est de faire découvrir la navigation sur les sites internet à l'aide d'un lecteur d'écran.

Comment ça marche, comment "voit-on" un site sans le voir ?

Quels sont les problèmes rencontrés par les utilisateurs de lecteurs d'écrans et surtout, comment faciliter cette navigation et éviter de faire un site inutilisable pour certains.

Durant ce talk, on écouteras des sites web, on parlera de sémantique, d'accès rapide, de landmarks, d'alternatives aux images, de tableaux, d'Aria, de formulaires, de liens et de boutons (spoiler : un div n'est pas un bouton).

Un talk a écouter les yeux fermés.

Transcript

1. Vous pouvez venir à ce talk les yeux fermés François-Xavier Lair DEVOXX FRANCE 2024
2. @lair_net mastodon.top/@lair_net François-Xavier Lair
3. Présentations Julie
4. Présentations Les utilisateurs
5. 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.
6. 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 doublement du nombre de déficients visuels serait à prévoir d’ici 2050
7. Quelques chiffres Accessibilité pour les aveugles et malvoyants
8. 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é.
9. 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é. Selon 80 % des répondants utilisent internet. une étude de la fédération des aveugles de France
10. Quel est l'aveugle le plus connu au monde ?
11. Quel est l'aveugle le plus connu au monde ?
12. Rappel “L'accessibilité, indispensable pour certains, utile pour tous.” — W3C Web Accessibility Initiative
13. 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
14. Les lecteurs d'écrans • En France sur Desktop ▪ Jaws 40.5% ▪ NVDA 37.7% ▪ VoiceOver 9.7% ▪ Orca 2.4% Sources : WebAIM
15. 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
16. Le titre de la page Le titre de la Page : • NVDA : Inser + T • VoiceOver : VO + F2 Onglet précédent / suivant : Ctrl + PageUp/PageDown
17. Le titre de la page
18. Le titre de la page
19. 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.
20. 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
21. 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
22. Stratégies de découverte du contenu de la page
23. 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
24. Aparté 2 : Principales commandes Aides-mémoires des raccourcis claviers Aides-mémoires des raccourcis claviers Orca
25. 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
26. Stratégies de découverte du contenu de la page : Landmarks
27. Stratégies de découverte du contenu de la page : Landmarks <header role="banner"> (...) <nav role="navigation" aria-label="Menu principal">(...)</nav> (...) <search role="search" >(...)</search> </header> <main role="main"> (...) </main> <footer role="contentinfo"> (...) </footer>
28. 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
29. Stratégies de découverte du contenu de la page : Landmarks
30. Stratégies de découverte du contenu de la page : Landmarks Les balises nav sont réservées à la navigation principales
31. Landmarks : Références • 12.6 Critères RGAA
32. Stratégies de découverte du contenu de la page : Liens • NVDA : K (ou shift + K) • VO : VO + Command + L
33. 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 ?
34. 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
35. Liens : Problèmes courants
36. Liens : Problèmes courants • Liens non explicites : En savoir plus, découvrir, tout sur... <a href="">En savoir plus <span class="visually-hidden">sur l'accessibilité</span></a>
37. Liens : Problèmes courants
38. Liens : Problèmes courants • Liens non explicites : En savoir plus, découvrir, tout sur... • Liens sans intitulés
39. Liens : Problèmes courants
40. Liens : Problèmes courants • Liens non explicites : En savoir plus, découvrir, tout sur... • Liens sans intitulés • Liens englobants des contenus
41. 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
42. A div is not a button
43. 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
44. 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
45. 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
46. 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.
47. Autres balises sémantiques Utiliser les bonnes balises pour permettre une meilleure expérience utilisateur
48. Les listes • NVDA ▪ Liste suivante : L ▪ Item de liste suivante : I • VO : VO + COMMAND + X
49. Listes : Références • • 9.3 Règle Opquast n°228 Critères RGAA
50. Les images • NVDA Graphique suivant : G • VO : VO + Command + G
51. 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
52. Les images
53. 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
54. Les images - Glyphs
55. Les images - émoticônes
56. Les images - émoticônes • • • Signification des émoticônes Réseaux sociaux et accessibilité : comment rendre les émojis accessibles ? - Coryse Quibel Rendre le militantisme plus accessible - Arnaud Malon
57. Les images - émoticônes • • • Signification des émoticônes Réseaux sociaux et accessibilité : comment rendre les émojis accessibles ? - Coryse Quibel Rendre le militantisme plus accessible - Arnaud Malon <span aria-hidden="true"> </span>
58. 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
59. Langue
60. Langue <html lang="fr"> ... <span lang="en">MBA DBA Community</span> ... </html>
61. Langue : Références • • • • 8.3 et 8.4 Règle Opquast 125 Règle Opquast 125 Règle Opquast 127 Critères RGAA
62. Les formulaires • NVDA Item de formulaire suivant : F • VO Item de formulaire suivant : VO + Command + J
63. Les formulaires • NVDA Item de formulaire suivant : F • VO Item de formulaire suivant : VO + Command + J
64. Les formulaires • NVDA Item de formulaire suivant : F • VO Item de formulaire suivant : VO + Command + J
65. Aria Aria : Accessible Rich Internet Applications
66. Aria Aria : Accessible Rich Internet Applications Aria, mon meilleur ennemie pour l'accessibilité.
67. 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
68. Aria <label class="form-label" for="txtNom">Nom<span class="mandatory">*</span></label> <input id="txtNom" name="name" type="text" required="" aria-required="true" aria-describedby="errorTx <p class="error" id="errorTxtNom">Vous devez indiquer <b>votre nom</b>.</p>
69. 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 !
70. Feedbacks : Slides : @lair_net mastodon.top/@lair_net François-Xavier Lair