.design .design

40 points à checker pour atteindre le nirvāṇa de l’accessibilité Web

La puissance du Web réside dans son universalité. Un accès pour tous, quelle que soit la déficience est un aspect essentiel — Tim Berners-Lee.

.design
.design

Ce mantra vous fait penser que l’accessibilité de votre site Web est au top ? Ne le prenez pas mal, mais à mon avis non. Ne vous en faites pas, tout problème a sa solution.

Partons du principe que l’accessibilité Web et vous ça fait 2 et que vous priez ardemment les dieux des Internets afin que les 2,5 millions d’handinautes français puissent parcourir vos pages Web. Un miracle peut arrivé sans prévenir, mais il est plus sage de le provoquer en donnant une pichenette via quelques astuces simples à mettre en place.

Fonctionnement de la checklist

J’ai regroupé au sein d’une checklist, 40 techniques permettant d’améliorer l’accessibilité Web de vos pages. Pour connaître le niveau d’accessibilité de votre site Web, cochez les techniques déjà mises en place et vous verrez votre score s’accroître dans le compteur. Cela vous permettra d’établir une to-do list des améliorations à faire à partir des items non-cochés.

Score : 0/40

    Accessibilité Web et structure du document

  1. Exemple : utilisation des éléments ol pour les listes ordonnées à la place d’un br. Testez votre code avec l’outil validator.w3.org.
  2. L’utilisation des balises sémantiques HTML5 pour définir le DOM d’un document n’est pas déconseillée, néanmoins toutes les technologies d’assistance ne sont pas encore compatibles. Testez la structure de votre document avec l’outil HTML5 Outliner
  3. <table border=“0” summary=“Calendrier mensuel des événements de… ”>
  4. Accessibilité, design et contenus

  5. Prêtez attention au contraste de couleur entre les textes et leur background.
  6. Faites le test avec l’outil Contrast Ratio.
  7. Emploi des unités relatives (em) vs unités fixes (px).
  8. Bannir le cliquez ici.
  9. Utilisation des pointillés standards ou d’indicateurs indépendants de la couleur.
  10. Exemple : l’item en rouge est une erreur nécessitant une correction de votre part.
  11. Accessibilité des images et des éléments multimédias

  12. Accessibilité et JavaScript

  13. Accessibilité des formulaires

  14. Exemple : Code de sécurité situé au dos de votre CB.
  15. Exemple : un formulaire demandant de choisir entre A ou B, sa légende est Votre choix ?, cette dernière et les deux options sont encapsulées dans l’élément fieldset.
  16. Le test d’accessibilité Web

Score : 0/40

Accédez au meilleur des interfaces directement depuis votre boîte mail

Pixels à explorer