Vous pouvez venir à cet talk les yeux fermés - DevQuest 2025

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
2. mastodon.top/@lair_net François-Xavier Lair
3. Présentations 12 Julie
4. Présentations 22 Les utilisateurs
5. Quelques chiffres 13 En France • 1,7 million de personnes sont atteintes d’un trouble de la vision. • 1 personne aveugle ou malvoyante naît toutes les 15 heures.
6. Quelques chiffres 13 En France • 1,7 million de personnes sont atteintes d’un trouble de la vision. • 1 personne aveugle ou malvoyante naît toutes les 15 heures. • La malvoyance augmente fortement avec l’âge.
7. Quelques chiffres 23 Dans le monde • 253 millions de personnes présentent une déficience visuelle • Selon l’OMS, un d do ou ub bl le em me en nt t serait à prévoir d’ici 2050
8. Quelques chiffres 33 Accessibilité pour les aveugles et malvoyants
9. Quelques chiffres 33 Accessibilité pour les aveugles et malvoyants Seuls 10% des sites internet sont accessibles aux personnes aveugles et malvoyantes.
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. Disclaimer
14. Disclaimer Testez, testez, testez !
15. Le titre de la page 12 Le titre de la Page : • NVDA : Inser + T • VoiceOver : VO + F2 Onglet précédent / suivant : Ctrl + PageUp/PageDown
16. Le titre de la page 22
17. 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.
18. 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. Single Page Application (SPA)
19. 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)
20. Titre de la page : Références • Règle Opquast n°98, Règle Opquast n°97 • Critères RGAA* 8.5 et 8.6 * Référentiel général d'amélioration de l'accessibilité
21. Stratégies de découverte du contenu de la page
22. Aparté : Focus sur le focus Les lecteurs d’écran restituent uniquement le contenu sur lequel le focus est positionné.
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
24. 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
25. Aparté 2 : Principales commandes Aides-mémoires des raccourcis claviers (Jaws, NVDA, VoiceOver, Talkback) Aides-mémoires des raccourcis claviers Orca
26. 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
27. Stratégies de découverte du contenu de la page : Landmarks 13 Pour naviguer parmi les landmarks ARIA : • NVDA : D (ou shift + D) • VO : Via le rotor
28. Stratégies de découverte du contenu de la page : Landmarks 23 <header role="banner"> (...) <nav role="navigation" aria-label="Menu principal">(...)</nav> (...) <search role="search" >(...)</search> </header> <main role="main"> (...) </main> <footer role="contentinfo"> (...) </footer>
29. Stratégies de découverte du contenu de la page : Landmarks 33
30. Stratégies de découverte du contenu de la page : Landmarks 33 Les balises nav sont réservées à la navigation principales
31. Landmarks : Références • Critères RGAA 9.2 et 12.6
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
35. Liens : Menu dévitements Exemple de lien d'accès rapide : • Contenu principal • Menu principal • Recherche • Pied de page Tester, tester, tester !
36. Liens : Menu dévitements Références : • Critères RGAA 12.7 • Règle Opquast n°159
37. Liens : Problèmes courants 13
38. Liens : Problèmes courants 13 • Liens non explicites : En savoir plus, découvrir, tout sur... <a href="">En savoir plus <span class="visually-hidden">sur l'accessibilité</span></a>
39. Liens : Problèmes courants 23
40. Liens : Problèmes courants 23 • Liens non explicites : En savoir plus, découvrir, tout sur... • Liens sans intitulés
41. Liens : Problèmes courants 33
42. Liens : Problèmes courants 33 • Liens non explicites : En savoir plus, découvrir, tout sur... • Liens sans intitulés • Liens englobants des contenus (Liens composites) Accessible cards - Kitty Giraudel
43. A div is not a button
44. A div is not a button Quelle est la différence entre un lien et un bouton ?
45. A div is not a button Quelle est la différence entre un lien et un bouton ? Lien : actions de navigation
46. A div is not a button Quelle est la différence entre un lien et un bouton ? Lien : actions de navigation Bouton : actions qui affectent le front ou le back du site
47. 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
48. Stratégies de découverte du contenu de la page : Titres • 1- Rendre les sites et services numériques accessibles à toutes et à tous ▪ 2- Le RGAA 4 ◦ 3- Les obligations légales ◦ 3- La méthode technique ▪ 2- Critères et tests ▪ 2- Télécharger le RGAA ▪ 2- Vos contributions sont les bienvenues !
49. Hiérarchie des titres : problèmes courants
50. Hiérarchie des titres : problèmes courants • Absence de titres
51. Hiérarchie des titres : problèmes courants • Absence de titres • Problème de hiérarchie dans les titres
52. Hiérarchie des titres : problèmes courants • Absence de titres • Problème de hiérarchie dans les titres • Titres non-pertinents
53. Hiérarchie des titres : problèmes courants • Absence de titres • Problème de hiérarchie dans les titres • Titres non-pertinents • Titres "simulés"
54. Hiérarchie des titres : Références • David Swallow : En-têtes et non-conformité aux WCAG : une clarification à juste titre • Règle Opquast n°227 • Critères RGAA 9.1 et 9.2
55. Méthodes de navigation : Résumé • Lecture complète de la page • Landmark • Accès rapides • Navigation par les liens • Titres de la page
56. 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
57. 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.
58. Les images • NVDA Graphique suivant : G • VO : VO + Command + G
59. Les images • NVDA Graphique suivant : G • VO : VO + Command + G Problèmes courants : • Images sans alt
60. 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
61. Les images Problèmes courants : • Images sans alt • Images porteuses d'information avec une alternative vide ou incomplète
62. 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
63. Les images  Glyphs
64. Les images  émoticônes
65. Les images  émoticônes <span aria-hidden="true"> </span>
66.   Les images  émoticônes <span aria-hidden="true"> </span> • Signification des émoticônes • Réseaux sociaux et accessibilité : comment rendre les émojis accessibles ? - Coryse Quibel • Rendre le militantisme plus accessible - Arnaud Malon
67. Images : références • Arbre de décision W3C • Règle Opquast n°111, Règle Opquast n°112, Règle Opquast n°113 • Critères RGAA 1.1 à 1.9
69. Langue <html lang="fr"> ... <span lang="en">MBA DBA Community</span> ... </html>
70. Langue : Références • Règle Opquast 125 • Règle Opquast 125 • Règle Opquast 127 • Critères RGAA 8.3 et 8.4
71. Les listes • NVDA ▪ Liste suivante : L ▪ Item de liste suivante : I • VO : VO + COMMAND + X
72. Listes : Références • Règle Opquast n°228 • Critères RGAA 9.3
73. Les formulaires 13 • NVDA Item de formulaire suivant : F • VO Item de formulaire suivant : VO + Command + J
74. Les formulaires 23
75. Les formulaires 33
76. Aria 12 Aria : Accessible Rich Internet Applications
77. Aria 12 Aria : Accessible Rich Internet Applications Aria, mon meilleur ennemie pour l'accessibilité.
78. Aria 12 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
79. Aria 22
80. Aria 22 <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 <p class="error" id="errorTxtNom">Vous devez indiquer <strong>votre nom</strong>.</p>
81. 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 !
82. Slides : mastodon.top/@lair_net François-Xavier Lair