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

via les guides UX du magazineduwebdesign.com

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.

Ce mantra vous fait penser que l’accessibilité de votre site Web est au top ?

Vous en êtes vraiment sûr ?

C’est parfait. Vous aidez 2,5 millions d’handinautes français à parcourir vos pages Web.

Au cas où vous souhaiteriez faire une révision de l’accessibilité de vos sites web, je vous ai préparé une liste afin de ne pas oublier l’essentiel.

Techniques permettant d’améliorer l’accessibilité Web de vos pages.

• La structure HTML de la page respecte les recommandations du W3C ?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.
• Les éléments de mise en forme sont séparés de la structure du document et regroupés dans un fichier .css ?
• Utilisation du tag title pour nommer les pages et indiquer la nature de leurs contenus ?
• Présence de l’attribut lang définissant la langue du document ?
• Mise en place de la technologie WAI-ARIA (Web Accessibility Initiative’s Accessible Rich Internet Applications) permettant la définition des rôles et des états de chaque élément HTML ?
• Les sections du document sont hiérarchisées via les headings h1 à h6 et l’emploi de la technologie ARIA ?
• 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.
• Indication des headers de tableaux via l’utilisation de la balise th ?
• Chaque tableau dispose d’un sommaire ? Exemple : <table border=”0" summary=”Calendrier mensuel des événements de… “>

Accessibilité, design et contenus

• Les contenus sont lisibles lorsque les images sont désactivées ?
• Prêtez attention au contraste de couleur entre les textes et leur background.
• Le contraste entre l’arrière-plan et le premier plan de votre design est suffisant ? Faites le test avec l’outil Contrast Ratio.
• Les tests effectués avec Color filter pour les déficiences visuelles communes sont concluants ?
• La taille de police s’adapte en fonction des paramètres définis par l’utilisateur dans son navigateur ?
• Emploi des unités relatives (em) vs unités fixes (px).
• La taille de police est supérieure à 0.625em (10px) ?
• Les contenus sont accessibles et lisibles quand l’utilisateur double la taille de police ?
• La longueur des lignes est comprise entre 55 et 75 caractères espaces compris ?
• Les titres et les liens sont facilement reconnaissables par l’utilisateur ?
• Les titres et les ancres de liens sont explicites pour l’utilisateur ?
• Bannir le cliquez ici.
• Les liens dont l’ancre n’est pas explicite pour l’utilisateur sont accompagnés d’une description à l’aide de l’attribut title ?
• Aucun élément de la page ne produit des flashs ou des clignotements plus de 3 fois par seconde ?
• L’indicateur de focus est visible lorsque l’utilisateur navigue à l’aide du clavier ?
• Utilisation des pointillés standards ou d’indicateurs indépendants de la couleur.
• La compréhension du contenu ne dépend pas d’un élément graphique ?Exemple : l’item en rouge est une erreur nécessitant une correction de votre part.
• L’ordre de lecture pour les lecteurs d’écran est similaire à l’ordre visuel ?
• Chaque élément d’une page est accessible et manipulable via l’utilisation du clavier ?
• Mise à disposition de raccourcis clavier pour les principales fonctionnalités du site ?
• Présence d’un lien accès direct au contenu pour les pages contenant un grand nombre d’items de navigation ?

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

• Présence de l’attribut alt sur chaque balise img?
• Les médias vidéo contiennent une retranscription écrite (sous-titres) ?
• Les médias vidéo et audio sont accompagnés d’une description écrite ?
• Les lecteurs vidéo et audio disposent au minimum d’un contrôle Play accessible via le clavier ?
• Les images ne sont pas employées comme vecteurs d’informations essentielles à la compréhension du document ?
• Les captchas visuels sont accompagnés d’une alternative audio ?

Accessibilité et JavaScript

• Utilisation du JavaScript à minima n’obstruant pas la compréhension et la lisibilité du document ?
• Présence d’une solution alternative pour les utilisateurs n’ayant pas activé le JavaScript ?

Accessibilité des formulaires

• Structuration logique des formulaires ?
• Présence de l’élément label pour chaque item du formulaire (input, select, etc) ?
• Les champs sont accompagnés d’un label explicite ou disposent d’une aide lorsque cela est nécessaire ? Exemple : Code de sécurité situé au dos de votre CB.
• Utilisation de l’élément fieldset et legend pour les boutons radio et les check boxes lorsque ces derniers appartiennent à un même ensemble?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.
• Les erreurs du formulaire sont notifiées via un texte situé à proximité du champ en cause ou sont listées en haut de page et disposent chacune d’une ancre pointant vers le champ incriminé ?

Le test d’accessibilité Web

• Test de vos pages avec l’outil Wave ?
• Présence d’une charte d’accessibilité résumant les actions mises en place sur votre site pour les utilisateurs de technologies d’assistance ?

Pour en savoir plus sur l’accessibilité Web, consultez le site de l’association e-accessibility.

Cultivez vos talents en explorant le Magazine du Webdesign.

Guide également publié sur magazineduwebdesign.com.