.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.
  6. 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
  8. <table border=“0” summary=“Calendrier mensuel des événements de… ”>

    9. Accessibilité, design et contenus

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

    26. Accessibilité des images et des éléments multimédias

    32. Accessibilité et JavaScript

    34. Accessibilité des formulaires

  36. Exemple : Code de sécurité situé au dos de votre CB.
  37. 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.

    39. Le test d’accessibilité Web

Score : 0/40

ITEMS RELATIFS : ACCESSIBILITE
TWEETER
PARTAGER SUR FACEBOOK
EPINGLER SUR PINTEREST

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

Pixels à explorer

Créez un menu off canvas en une ligne de code

Design et développement d’une application Android, par où commencer

Editr – Installez vos démos HTML, CSS et JavaScript sur votre serveur

MixItUp, le plugin jQuery CSS3 pour filtrer et trier vos listes HTML

Google annonce la sortie du bouton Save to Drive

PLUS DE PIXELS