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

Transcript

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

   Lair

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

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.

9. Quel est l'aveugle le plus connu au monde ?

10. Quel est l'aveugle le plus connu au monde ?

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

    Web Accessibility Initiative

12. Disclaimer Testez, testez, testez !

13. Le titre de la page Le titre de la Page

    : • NVDA : Inser + T • VoiceOver : VO + F2 Onglet précédent / suivant : Ctrl + PageUp/PageDown

14. Le titre de la page

15. 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.

16. 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

17. 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

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

19. 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

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

    des raccourcis claviers Orca

21. 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

22. 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

23. 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>

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

    Les balises nav sont réservées à la navigation principales

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

26. 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 ?

27. 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

28. Liens : Problèmes courants

29. 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>

30. Liens : Problèmes courants

31. Liens : Problèmes courants • Liens non explicites : En

    savoir plus, découvrir, tout sur... • Liens sans intitulés

32. Liens : Problèmes courants

33. 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

34. A div is not a button

35. 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

36. 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

37. 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.

38. 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

39. 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

40. Les images - Glyphs

41. 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

42. 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

43. Langue <html lang="fr"> ... <span lang="en">MBA DBA Community</span> ... </html>

44. Langue : Références • • • • 8.3 et 8.4

    Règle Opquast 125 Règle Opquast 125 Règle Opquast 127 Critères RGAA

45. Les listes • NVDA ▪ Liste suivante : L ▪

    Item de liste suivante : I • VO : VO + COMMAND + X

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

    RGAA

47. Les formulaires • NVDA Item de formulaire suivant : F

    • VO Item de formulaire suivant : VO + Command + J

48. Les formulaires • NVDA Item de formulaire suivant : F

    • VO Item de formulaire suivant : VO + Command + J

49. Les formulaires • NVDA Item de formulaire suivant : F

    • VO Item de formulaire suivant : VO + Command + J

50. 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

51. 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>

52. 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 !

53. Feedbacks : Slides : @lair_net mastodon.top/@lair_net François-Xavier Lair