Une fiche par erreur d'audit web. Ce qu'elle est, qui elle bloque, ce qu'elle coûte, comment la corriger. Critères RGAA, performance, SEO, conformité.
Avoir un attribut `alt` ne suffit pas. Son contenu doit transmettre l'information que l'image véhicule. Un `alt="image"` ou `alt="IMG_4821.jpg"` n'aide personne. C'est le critère RGAA 1.3, niveau A.
Chaque balise HTML a un rôle sémantique. Quand on utilise une `<div>` pour imiter un bouton, ou un `<table>` pour la mise en page, on casse la structure que les technologies d'assistance utilisent pour naviguer. C'est le critère RGAA 8.9, niveau A.
Chaque champ de formulaire doit avoir une étiquette qui lui est correctement associée. C'est le critère RGAA 11.1, niveau A. Un champ sans étiquette est un champ que l'utilisateur de lecteur d'écran ne peut pas remplir : il ne sait pas ce qu'on lui demande.
Un formulaire peut contenir des groupes de champs liés - plusieurs boutons radio pour choisir un mode de paiement, des cases à cocher pour une liste de préférences. Sans `<fieldset>` et `<legend>`, les technologies d'assistance ne savent pas que ces champs forment un groupe. C'est l'erreur que sanctionne le critère RGAA 11.5, niveau A.
Tout contenu qui bouge, défile ou clignote de façon automatique doit pouvoir être mis en pause, arrêté ou masqué par l'utilisateur. C'est le critère RGAA 13.8, niveau A. Un carrousel sans bouton pause est une erreur bloquante pour de nombreux utilisateurs.
Quand un utilisateur malvoyant réduit la fenêtre ou zoome fortement, le contenu doit se réorganiser en colonne unique sans défilement horizontal. Le critère RGAA 10.11 (WCAG 1.4.10 Reflow) l'exige dès 320px de largeur, ce qui correspond à un zoom à 400% sur un écran de 1280px.
Le contraste entre la couleur d'un texte et celle de son arrière-plan doit être suffisant pour rester lisible. C'est le critère RGAA 3.2, niveau AA. Le gris clair sur blanc, très courant en design, échoue presque toujours.
Les composants d'interface - boutons, champs de formulaire, icônes - ont leurs propres exigences de contraste. Un champ dont la bordure est trop claire sur fond blanc passe inaperçu. C'est le critère RGAA 3.3, niveau AA.
Beaucoup de sites proposent des documents PDF, Word ou Excel en téléchargement. Si ces documents ne sont pas accessibles, les utilisateurs de lecteur d'écran ne peuvent pas les consulter. Le critère RGAA 13.3, niveau A, exige qu'une version accessible soit disponible si le document original ne l'est pas.
Tout composant d'interface généré ou contrôlé par un script doit être utilisable au clavier, sans souris. C'est le critère RGAA 7.3, niveau A. Un menu, une modale ou un onglet qui ne répond qu'aux clics isole une partie de tes utilisateurs.
Certains utilisateurs ajustent l'espacement du texte dans leur navigateur ou via une feuille de style personnalisée pour améliorer leur confort de lecture. Si le site empêche ces ajustements - texte tronqué, contenu qui déborde, lignes qui se chevauchent - il ne respecte pas le critère RGAA 10.12, niveau AA.
Un formulaire peut avoir des étiquettes présentes, mais si elles disent "Saisir ici" ou "Champ 1", elles ne servent à rien. C'est l'erreur que sanctionne le critère RGAA 11.2, niveau A : l'étiquette doit être pertinente, pas seulement présente.
L'information d'une page doit être structurée par des titres `<h1>` à `<h6>` correctement hiérarchisés. C'est le critère RGAA 9.1, niveau A. Un titre choisi pour son style, pas pour son niveau, casse la structure.
Un graphique, une infographie ou un schéma complexe peut transmettre une quantité d'information impossible à résumer en 150 caractères. Quand l'image est porteuse de données structurées, une description détaillée est requise. C'est le critère RGAA 1.6, niveau A.
Une image décorative n'apporte aucune information au contenu : séparateur, fond, illustration purement esthétique. Le critère RGAA 1.2, niveau A, exige qu'elle soit ignorée par les technologies d'assistance. Si ce n'est pas le cas, le lecteur d'écran l'annonce inutilement et surcharge l'utilisateur.
Une image qui porte de l'information doit avoir une alternative textuelle. Sans elle, un lecteur d'écran annonce un blanc, ou pire, le nom du fichier. C'est le critère RGAA 1.1, niveau A, et l'erreur d'accessibilité la plus répandue sur le web.
Indiquer un champ obligatoire en rouge, colorer un lien sans autre indice, afficher une erreur sans icône... Ces pratiques excluent les personnes qui ne perçoivent pas les couleurs. C'est le critère RGAA 3.1, niveau A.
Chaque page web doit déclarer sa langue principale via l'attribut `lang` sur la balise `<html>`. C'est le critère RGAA 8.3, niveau A. Sans lui, un lecteur d'écran lit un texte français avec une voix anglaise.
Un lien d'évitement (ou skip link) permet de sauter directement au contenu principal sans traverser toute la navigation. C'est le critère RGAA 12.7, niveau A. Sans lui, chaque utilisateur clavier ou lecteur d'écran doit parcourir l'intégralité du menu à chaque changement de page.
Un lien sans texte lisible est inutilisable au clavier ou au lecteur d'écran. C'est le cas des liens icône sans aria-label, des ancres vides ou des images cliquables sans alt. C'est le critère RGAA 6.2, niveau A.
Un lien dont l'intitulé est "Cliquez ici" ou "En savoir plus" ne dit rien hors de son contexte visuel. C'est le critère RGAA 6.1, niveau A : chaque lien doit avoir un intitulé explicite, compréhensible sans lire le reste de la page.
Quand tu simules une liste avec des tirets, des retours à la ligne ou des paragraphes, les lecteurs d'écran ne la reconnaissent pas comme une liste. L'utilisateur ne peut pas naviguer entre les éléments ni savoir combien elle en contient. C'est le critère RGAA 9.3, niveau A.
En appuyant sur Tab, l'utilisateur navigue de lien en lien et de champ en champ. Si le curseur saute dans tous les sens - du bas de la page à l'en-tête, puis au milieu du formulaire - la navigation devient ingérable. C'est ce que sanctionne le critère RGAA 12.8, niveau A.
Chaque page web doit avoir un titre défini via la balise `<title>` dans le `<head>`. C'est le critère RGAA 8.5, niveau A. Sans lui, les utilisateurs de lecteurs d'écran ne savent pas sur quelle page ils se trouvent dès leur arrivée.
Quand on navigue au clavier, chaque élément interactif doit afficher un indicateur visible au moment où il reçoit le focus. C'est le critère RGAA 10.7, niveau AA. Sans lui, l'utilisateur clavier est aveugle à sa position sur la page.
Les menus déroulants, modales, onglets et sliders construits en JavaScript doivent être utilisables par les technologies d'assistance. Sans ARIA et sans gestion du clavier, ces composants sont invisibles ou inutilisables pour un utilisateur de lecteur d'écran. C'est ce que sanctionne le critère RGAA 7.1, niveau A.
Un lecteur d'écran peut naviguer directement vers le contenu principal, le menu ou le pied de page - à condition que ces zones soient balisées correctement. Sans landmarks HTML, cette navigation est impossible. C'est le critère RGAA 9.2, niveau A.
La balise `<title>` d'une page web doit décrire son contenu de façon précise et unique. Un titre comme "Accueil" ou le seul nom du site n'aide pas l'utilisateur à identifier la page. C'est le critère RGAA 8.6, niveau A.
Une vidéo pré-enregistrée avec une piste audio porteuse d'information doit, en règle générale, proposer des sous-titres synchronisés. C'est le critère RGAA 4.3, niveau A. Sans eux, les personnes sourdes ou malentendantes n'ont aucun accès au contenu audio. Le RGAA prévoit quelques cas particuliers (vidéo servant elle-même d'alternative à un texte, média de test).
Une vidéo qui ne propose pas de transcription textuelle de son contenu audio est inaccessible pour les personnes sourdes ou malentendantes, et pour tous ceux qui ne peuvent pas activer le son. C'est le critère RGAA 4.1, niveau A.
Les lecteurs d'écran permettent de naviguer directement d'une zone de la page à l'autre - en-tête, navigation, contenu principal, pied de page - à condition que ces zones existent dans le HTML. Sans elles, l'utilisateur doit tout parcourir séquentiellement. C'est ce que corrige le critère RGAA 12.6, niveau A.