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.
Les champs qui collectent des informations personnelles identifiables (nom, e-mail, adresse, téléphone, mot de passe) doivent porter un attribut `autocomplete` avec la valeur correspondant à leur finalité. C'est le critère RGAA 11.13, niveau AA. Sans cet attribut, le pré-remplissage automatique ne fonctionne pas et les utilisateurs de technologies d'assistance ne peuvent pas déléguer la saisie à leur gestionnaire de mots de passe ou à leur navigateur.
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.
Quand une portion de texte est dans une langue différente de celle de la page, elle doit porter un attribut `lang` avec le bon code de langue. C'est le critère RGAA 8.7, niveau AA. Sans lui, le lecteur d'écran applique les règles de prononciation de la langue principale à un texte qui n'est pas dans cette langue.
Le critère RGAA 8.2, niveau A, exige que le code HTML d'une page soit valide selon le type de document déclaré. Des erreurs de syntaxe peuvent déstabiliser les lecteurs d'écran et produire des comportements imprévisibles selon les navigateurs.
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 critère RGAA 10.2, niveau A, impose que le contenu visible d'une page reste accessible même quand les feuilles de styles sont désactivées. Si une information clé disparaît sans CSS, elle n'est pas accessible à tous.
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.
Le critère RGAA 13.10, niveau A, exige que toute fonctionnalité accessible par un geste complexe (pincer, rotation, glisser selon un trajet précis) soit aussi utilisable via un geste simple ou un contrôle alternatif.
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.
Chaque balise `<iframe>` doit porter un attribut `title` qui décrit son contenu. C'est le critère RGAA 2.1, niveau A. Sans lui, un lecteur d'écran annonce "cadre" à l'entrée du cadre, sans donner le moindre contexte à l'utilisateur.
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.
Le critère RGAA 13.1, niveau A, exige que l'utilisateur puisse contrôler toute limite de temps qui modifie le contenu de la page : session qui expire, formulaire qui se réinitialise automatiquement, minuterie de promotion.
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.
Le critère RGAA 7.5, niveau AA, impose que les messages de statut - confirmations, erreurs, mises à jour de compteur - soient restitués par les lecteurs d'écran sans nécessiter de prise de focus sur l'élément.
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.
Le critère RGAA 13.9, niveau AA, interdit de restreindre l'affichage d'une page à une seule orientation d'écran (portrait ou paysage), sauf si cette restriction est essentielle à la fonctionnalité proposée.
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 son déclenché automatiquement au chargement d'une page doit être court (moins de trois secondes) ou contrôlable par l'utilisateur. C'est le critère RGAA 4.10, niveau A. Sans mécanisme de contrôle, il couvre la synthèse vocale du lecteur d'écran dès l'ouverture de la page.
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.
Dans un tableau de données, chaque en-tête de colonne ou de ligne doit être déclaré avec la balise `<th>`. C'est le critère RGAA 5.6, niveau A. Sans cette balise, un lecteur d'écran ne peut pas annoncer la colonne ou la ligne à laquelle appartient chaque cellule.
Un tableau utilisé pour positionner des éléments visuellement (et non pour présenter des données) doit rester cohérent quand son contenu est lu en ordre linéaire, cellule par cellule. C'est le critère RGAA 5.3, niveau A.
Utiliser une image pour afficher du texte - un titre, un slogan, un bouton - est une erreur fréquente. Le critère RGAA 1.8, niveau AA, impose de remplacer ces images de texte par du vrai texte stylé en CSS.
Le critère RGAA 10.4, niveau AA, impose que le texte reste lisible quand l'utilisateur l'agrandit jusqu'à 200%. Les unités CSS en pixels fixes et les conteneurs à hauteur rigide sont les coupables les plus fréquents.
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.