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.

Accessibilité Web - checklist

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.

    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

N’oubliez pas de partager votre score dans les commentaires afin de nous montrer à quel point vous êtes un expert de l’accessibilité Web.
Pour en savoir plus sur l’accessibilité Web, consultez le site de l’association e-accessibility.

Par Guillaume Palayer Un chasseur-cueilleur et un curieux avant tout des dernières avancées du monde des Internets. Fondateur du Magazine du Webdesign, un blog-cerveau à propulsion humaine, ayant pour mission de faire le tri dans le bruit du Web afin de proposer les meilleurs contenus à la communauté du Magazine du Webdesign.

Inscrivez-vous à la newsletter du Magazine du Webdesign

Inscrivez-vous à notre newsletter afin de recevoir chaque mois une sélection des meilleurs articles et ressources.

Commentaires (3)

  1. Ping : 40 points à checker pour atteindre le nirvāṇa de l’accessibilité Web | Webdesign et développement Web | Scoop.it

  2. Ping : 40 points à checker pour atteindre le nirvāṇa de l’accessibilité Web | Webdesign et magie des Internets | Scoop.it

  3. Ping : 40 points à checker pour atteindre le nirvāṇa de l’accessibilité Web | Bonnes Pratiques Web | Scoop.it

Laisser un commentaire

Yep, vous souhaitez poster un commentaire... complétez les trois champs ci-dessous. Pas de spams, protégeons les Internets.

*

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

↑ Haut de page