Vous_pouvez_venir_à_ce_talk_les_yeux_fermés-Mons.pdf

Transcript

1. Vous pouvez venir à ce talk les yeux fermés François-Xavier Lair
2. Scripts des extraits audios https://lairnet.fr/Script-yeux-fermes-Paris-Web.pdf
3. mastodon.top/@lair_net François-Xavier Lair
4. Présentations (1/2) Julie
5. Présentations (2/2) Les utilisateurs
6. Quelques chiffres (1/3) En France En France, près de 1,7 million de personnes sont atteintes d’un trouble de la vision. 1 personne aveugle ou malvoyante naît toutes les 15 heures.
7. Quelques chiffres (2/3) Dans le monde 253 millions de personnes présentent une déficience visuelle Selon l’OMS, un doublement du nombre de déficients visuels 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 Testez, testez, testez !
14. 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
15. Le titre de la page (2/2)
16. 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.
17. 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
18. 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
19. Stratégies de découverte du contenu de la page
20. 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
21. Aparté 2 : Principales commandes Aides-mémoires des raccourcis claviers Aides-mémoires des raccourcis claviers Orca
22. 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
23. 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
24. 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>
25. Stratégies de découverte du contenu de la page : Landmarks (3/3)
26. Stratégies de découverte du contenu de la page : Landmarks (3/3) Les balises nav sont réservées à la navigation principales
27. Landmarks : Références 12.6 Critères RGAA
28. 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 ?
29. 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
30. Liens : Problèmes courants (1/3)
31. 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>
32. Liens : Problèmes courants (2/3)
33. Liens : Problèmes courants (2/3) Liens non explicites : En savoir plus, découvrir, tout sur... Liens sans intitulés
34. Liens : Problèmes courants (3/3)
35. Liens : Problèmes courants (3/3) Liens non explicites : En savoir plus, découvrir, tout sur... Liens sans intitulés Liens englobants des contenus Accessible cards - Kitty Giraudel
36. A div is not a button
37. 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
38. 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
39. 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.
40. Les images NVDA Graphique suivant : G VO : VO + Command + G
41. 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
42. Les images
43. 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
44. Les images - Glyphs
45. 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
46. 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
48. Langue <html lang="fr"> ... <span lang="en">MBA DBA Community</span> ... </html>
49. Langue : Références 8.3 et 8.4 Règle Opquast 125 Règle Opquast 125 Règle Opquast 127 Critères RGAA
50. Les formulaires (1/3) NVDA Item de formulaire suivant : F VO Item de formulaire suivant : VO + Command + J
51. Les formulaires (2/3) NVDA Item de formulaire suivant : F VO Item de formulaire suivant : VO + Command + J
52. Les formulaires (3/3) NVDA Item de formulaire suivant : F VO Item de formulaire suivant : VO + Command + J
53. 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
54. 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 <b>votre nom</b>.</p>
55. 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 !
56. Quizz Quelle est la manière correcte de coder le composant d'envoi d'un formulaire de contact ? 1- <div class="button" role="button" onclick="validateForm()">Envoyer</div> 2- <button type="submit"> Envoyer <span class="visually-hidden">ma demande de contact</span> </button> 3- <a class="button" onclick="validateForm()" aria-label="Envoyer ma demande de contact"> Envoyer ma demande de contact </a> 4- <div class="button" data-action="check" data-id="form-468" data-title="Envoyer"> Envoyer <small>ma demande de contact</small> </div>