Glossaire de l'Accessibilité

Liste des termes

• A11Y

  Général

  C'est un raccourci pour écrire "Accessibility" (en anglais). On prend la première lettre (A), la dernière (Y), et on compte les 11 lettres au milieu. C'est plus rapide à écrire !

  Définition Technique

  Numéronyme standardisé internationalement. Utilisé dans les hashtags (#a11y) et les noms de packages.

• Accordéon

  Technique

  Un élément qui permet d'afficher ou de cacher du contenu quand on clique dessus, comme l'instrument de musique qui se plie et se déplie.

  Définition Technique

  Pattern d'interface utilisant <button aria-expanded="true/false" aria-controls="id-panel"> pour le déclencheur et un conteneur avec role="region" (optionnel) pour le contenu.

• Alternative Textuelle (Alt)

  Contenu

  Une description écrite d'une image. Si l'image ne s'affiche pas ou si une personne aveugle visite le site, c'est ce texte qui sera lu à la place.

  Définition Technique

  Attribut alt="" obligatoire sur la balise <img>. Si l'image est décorative, l'attribut doit être vide (alt="").

• ARIA

  Technique

  Des "super-pouvoirs" qu'on ajoute au code HTML pour aider les outils d'assistance à comprendre des éléments complexes (comme des menus ou des onglets) que le HTML seul ne suffit pas à décrire.

  Définition Technique

  Accessible Rich Internet Applications. Attributs (aria-*) définis par le W3C pour enrichir la sémantique. Règle n°1 : Ne pas utiliser ARIA si un élément HTML natif existe.

• aria-controls

  Technique

  Crée un lien logique entre un bouton et la zone qu'il contrôle (ex: "Ce bouton ouvre ce menu").

  Définition Technique

  Attribut ARIA sur le contrôleur pointant vers l'ID de la zone contrôlée. Moins critique que aria-expanded mais recommandé.

• aria-current

  Technique

  Indique l'élément actif dans un groupe (ex: la page actuelle dans un menu de navigation ou une pagination).

  Définition Technique

  État ARIA. Valeurs : "page", "step", "location", "date", "time", "true". Essentiel pour la navigation.

• aria-describedby

  Technique

  Permet d'ajouter une description supplémentaire à un élément (comme une aide sous un champ ou un message d'erreur).

  Définition Technique

  Attribut ARIA référençant l'ID d'un élément de description. Lu après le label et le rôle par les lecteurs d'écran.

• aria-expanded

  Technique

  Indique si un menu, un accordéon ou une liste déroulante est actuellement ouvert ou fermé.

  Définition Technique

  État ARIA (true/false). Obligatoire sur le bouton déclencheur d'un composant dépliable (Disclosure pattern).

• aria-hidden

  Technique

  Un moyen de cacher un élément aux lecteurs d'écran tout en le laissant visible à l'œil nu (ex: une icône décorative).

  Définition Technique

  Attribut aria-hidden="true". Retire l'élément et ses enfants de l'Accessibility Tree. Ne pas utiliser sur des éléments focusables.

• aria-label

  Technique

  Une étiquette invisible qui remplace le texte visible pour les lecteurs d'écran. Utile pour les boutons avec juste une icône (ex: "Fermer").

  Définition Technique

  Attribut ARIA qui définit le "Nom Accessible" de l'élément. Écrase le contenu textuel de l'élément. À utiliser avec précaution.

• aria-labelledby

  Technique

  Comme aria-label, mais au lieu d'écrire le texte, on pointe vers un autre texte déjà présent sur la page (via son ID).

  Définition Technique

  Attribut ARIA qui référence l'ID d'un ou plusieurs éléments servant de label. Prioritaire sur aria-label et le contenu natif.

• aria-live

  Technique

  Une zone "vivante" : si le texte change ici (ex: message de chat, notification), le lecteur d'écran le lira immédiatement.

  Définition Technique

  Attribut pour les Live Regions. valeurs: "polite" (attend la fin de la phrase) ou "assertive" (interrompt la lecture).

• Attribut HTML

  Technique

  Une petite étiquette collée sur un élément HTML pour lui donner des détails supplémentaires (comme sa couleur, sa taille, ou son nom).

  Définition Technique

  Paire clé-valeur dans la balise ouvrante (ex: class="btn", id="main", disabled).

• Audiodescription

  Contenu

  Une voix off supplémentaire qui décrit ce qui se passe à l'écran (actions, décors, costumes) pendant les silences des dialogues. C'est le "cinéma pour les oreilles" des aveugles.

  Définition Technique

  Piste audio secondaire synchronisée avec la vidéo. Obligatoire si l'information visuelle est cruciale et non doublée par le dialogue (RGAA 4.2).

• Audit RGAA

  Légal

  Un examen de santé pour un site web. On vérifie point par point s'il respecte les règles d'accessibilité françaises.

  Définition Technique

  Vérification de la conformité aux 106 critères du RGAA 4.1, basée sur les WCAG 2.1 niveaux A et AA.

• Autocomplétion

  Technique

  Quand le navigateur propose de remplir automatiquement votre nom ou votre adresse dans un formulaire pour vous faire gagner du temps.

  Définition Technique

  Attribut autocomplete="" sur les <input>. Valeurs standardisées (ex: given-name, email, tel) pour faciliter la saisie (WCAG 1.3.5).

• Balise Sémantique

  Technique

  Utiliser le bon mot pour la bonne chose en HTML. Par exemple, utiliser une balise <button> pour un bouton, et pas juste une boîte (div) qui ressemble à un bouton.

  Définition Technique

  Éléments HTML porteurs de sens (ex: <nav>, <main>, <article>, <aside>) par opposition aux éléments génériques (<div>, <span>).

• Bouton Vide

  Technique

  Un bouton qui ne contient pas de texte (souvent juste une icône). Sans étiquette, un lecteur d'écran ne lira rien ou juste "bouton".

  Définition Technique

  Bouton sans contenu textuel ni aria-label. À corriger impérativement avec un texte caché (.sr-only) ou un aria-label.

• Bouton vs Lien

  Design

  La règle d'or : un Lien vous emmène ailleurs (nouvelle page), un Bouton fait une action sur la page actuelle (ouvrir un menu, envoyer un formulaire).

  Définition Technique

  Lien = <a> avec href (navigation). Bouton = <button> ou <input type="button"> (action JS). Ne jamais mettre un onClick sur une div sans gérer le clavier et les rôles.

• Cadre (Iframe)

  Technique

  Une fenêtre ouverte sur un autre site web (comme une vidéo YouTube ou une carte Google Maps intégrée). Elle doit avoir un titre pour qu'on sache ce qu'il y a dedans avant d'y entrer.

  Définition Technique

  Balise <iframe>. Doit posséder un attribut title="..." explicite (ex: "Vidéo de présentation", "Carte d'accès").

• Captcha

  Technique

  Ces tests "Je ne suis pas un robot" où il faut cliquer sur des feux rouges. Ils sont souvent très difficiles pour les personnes handicapées et doivent avoir une alternative.

  Définition Technique

  Completely Automated Public Turing test to tell Computers and Humans Apart. Doit proposer une alternative non visuelle (audio) ou ne pas être requis pour les utilisateurs authentifiés.

• Contenu Caché

  Technique

  Il y a 3 façons de cacher : 1. Pour tout le monde (display:none). 2. Juste visuellement mais lu par les robots (sr-only). 3. Juste pour les robots (aria-hidden).

  Définition Technique

  display:none/visibility:hidden retire du DOM (inaccessible). .sr-only (clip-path) cache visuellement mais reste accessible. aria-hidden="true" cache aux lecteurs d'écran.

• Contraste

  Design

  La différence de couleur entre le texte et le fond. Si le contraste est trop faible (ex: texte gris clair sur fond blanc), c'est illisible pour beaucoup de gens.

  Définition Technique

  Ratio de luminosité relative. Minimum 4.5:1 pour le texte normal, 3:1 pour le grand texte (18pt+ ou 14pt+ gras) et les composants d'interface (WCAG 1.4.3 & 1.4.11).

• Couleur (Information par la)

  Design

  Ne jamais utiliser *que* la couleur pour donner une info (ex: "cliquez sur le bouton rouge"). Les daltoniens ne verront pas la différence. Il faut ajouter du texte ou une icône.

  Définition Technique

  Critère WCAG 1.4.1. L'information ne doit pas être véhiculée uniquement par la couleur. Ex: Erreur de formulaire = bordure rouge + texte d'erreur + icône.

• Déclaration d'Accessibilité

  Légal

  Une page obligatoire qui dit en toute transparence : "Voici notre niveau d'accessibilité, voici ce qui ne marche pas encore, et voici comment nous contacter".

  Définition Technique

  Document légal obligatoire (Loi 2005-102 art 47). Doit contenir : état de conformité, résultats des tests, contenus non accessibles, et moyens de contact/recours.

• DOM (Document Object Model)

  Technique

  L'arbre généalogique de la page web. C'est la structure invisible que le navigateur construit pour comprendre comment tous les éléments (titres, images, paragraphes) sont imbriqués.

  Définition Technique

  Représentation en mémoire de la structure HTML. L'accessibilité dépend du DOM généré, pas du code source initial (important pour les SPA React/Vue).

• Fieldset & Legend

  Technique

  Le couple inséparable pour grouper des questions liées (ex: "Civilité : M / Mme"). Le Fieldset entoure le groupe, le Legend donne le titre du groupe.

  Définition Technique

  Balises <fieldset> et <legend>. Obligatoires pour les groupes de boutons radio et cases à cocher (checkboxes) afin de donner le contexte.

• Fil d'Ariane (Breadcrumb)

  Design

  Le petit chemin en haut de page (Accueil > Produits > Chaussures) qui vous dit où vous êtes et permet de remonter. Indispensable pour ne pas se perdre.

  Définition Technique

  Liste de liens structurée (souvent <nav aria-label="Fil d'Ariane"><ol>...). Permet de situer la page dans l'arborescence du site.

• Focus

  Technique

  Le curseur invisible. Quand vous naviguez au clavier (touche Tab), le "focus" est l'élément sélectionné prêt à être activé. Il doit toujours être entouré visuellement.

  Définition Technique

  État :focus. Doit être visible (outline CSS). L'ordre de tabulation doit être logique. Seuls les éléments interactifs (a, button, input) doivent recevoir le focus.

• Focus Visible

  Design

  Le petit cadre (souvent bleu ou pointillé) qui apparaît autour d'un bouton quand on le sélectionne au clavier. Si vous l'enlevez (outline: none), les handicapés moteurs sont perdus.

  Définition Technique

  Propriété CSS outline. Ne jamais mettre outline: none sans fournir un style alternatif (:focus-visible). Critère WCAG 2.4.7.

• Formulaire Accessible

  Technique

  Un formulaire où chaque champ a une étiquette (Label) claire, où les erreurs sont bien expliquées, et qu'on peut remplir entièrement sans souris.

  Définition Technique

  Association explicite <label for="id"> ou implicite (imbrication). Gestion des erreurs avec aria-invalid="true" et aria-describedby="error-id".

• Hiérarchie des Titres (Hn)

  Contenu

  L'organisation du document, comme dans un livre : Titre du livre (H1), Titres de chapitres (H2), Sous-titres (H3). On ne saute pas de niveau !

  Définition Technique

  Structure imbriquée de <h1> à <h6>. Un seul <h1> par page (titre principal). Pas de saut de niveau (ex: h2 vers h4 interdit).

• HTML

  Technique

  Le langage de base pour construire des pages web. C'est le squelette du site.

  Définition Technique

  HyperText Markup Language. La qualité du HTML (validité, sémantique) est le fondement de l'accessibilité web.

• Image Décorative

  Design

  Une image qui sert juste à faire joli (comme une ligne de séparation). On lui dit de se cacher des lecteurs d'écran pour ne pas les bavarder inutilement.

  Définition Technique

  Image avec alt="" (vide) ou aria-hidden="true" (si SVG/Icone). Elle est ignorée par l'Accessibility Tree.

• Image Informative

  Contenu

  Une image qui apporte une information nécessaire à la compréhension du contenu (graphique, photo d'un produit, icône d'action).

  Définition Technique

  Image nécessitant une alternative textuelle (alt) pertinente décrivant son contenu ou sa fonction.

• Image Réactive

  Technique

  Une image qui change de source ou de taille selon la largeur de l'écran, ou une image avec des zones cliquables (map).

  Définition Technique

  Utilisation de l'attribut srcset, de la balise <picture>, ou des balises <map> et <area>.

• Label (Étiquette)

  Technique

  Le texte juste à côté d'une case à cocher ou d'un champ de texte qui vous dit à quoi ça sert (ex: "Votre Email"). Sans label, un lecteur d'écran dira juste "Champ texte"... inutile !

  Définition Technique

  Élément <label> associé à un contrôle de formulaire. Indispensable pour l'accessibilité (nom accessible) et l'ergonomie (augmente la zone de clic).

• Landmark (Région)

  Technique

  Les grandes zones de la page : En-tête, Menu, Contenu Principal, Pied de page. Elles permettent aux aveugles de sauter directement à la bonne section.

  Définition Technique

  Rôles ARIA implicites des balises HTML5 : <header> (banner), <nav> (navigation), <main> (main), <footer> (contentinfo), <aside> (complementary).

• Langue de la page

  Technique

  Dire au navigateur si la page est en français ou en anglais. Ça permet aux lecteurs d'écran de prendre le bon accent !

  Définition Technique

  Attribut lang="" sur la balise <html> (ex: <html lang="fr">). Doit être valide (code ISO 639-1). Changements de langue locaux avec <span lang="en">.

• Lecteur d'Écran

  Général

  Un logiciel qui parle. Il lit à haute voix tout ce qui s'affiche à l'écran pour les personnes aveugles (ex: NVDA, Jaws, VoiceOver).

  Définition Technique

  Screen Reader (SR). Interagit avec l'Accessibility API du système d'exploitation, qui elle-même lit l'Accessibility Tree du navigateur.

• Lien Explicite

  Contenu

  Un lien dont le texte se suffit à lui-même. "En savoir plus" est mauvais. "En savoir plus sur nos tarifs" est un bon lien explicite.

  Définition Technique

  Le texte du lien doit décrire sa destination ou sa fonction hors contexte. Si contrainte visuelle, utiliser aria-label ou .sr-only pour compléter.

• Lien Vide

  Technique

  Comme le bouton vide, c'est un lien qui ne contient que du vide ou une image de fond. Il est invisible pour les technologies d'assistance.

  Définition Technique

  Balise <a> sans texte ni aria-label. Souvent causé par des icônes en background-image ou des polices d'icônes (FontAwesome) mal implémentées.

• Modale (Pop-in)

  Technique

  Une fenêtre qui s'ouvre par-dessus la page (comme pour une connexion). Pour être accessible, elle doit piéger le clavier à l'intérieur tant qu'elle est ouverte.

  Définition Technique

  Pattern complexe : role="dialog", aria-modal="true", focus trap (emprisonner tab), fermeture sur Echap, retour du focus à l'élément déclencheur à la fermeture.

• Navigation Clavier

  Technique

  Pouvoir utiliser tout le site juste avec les touches du clavier (Tab, Entrée, Flèches), sans jamais toucher la souris. Indispensable pour les handicapés moteurs.

  Définition Technique

  Tous les éléments interactifs doivent être focusables et activables au clavier (Enter/Space). L'ordre du focus doit suivre l'ordre visuel.

• Placeholder

  Design

  Le texte gris clair dans un champ qui disparaît quand on écrit. Ce n'est PAS une étiquette (Label) et il ne doit pas contenir d'info vitale car il s'efface.

  Définition Technique

  Attribut placeholder="". Ne remplace PAS le <label>. Problèmes de contraste fréquents et disparition à la saisie (problème de mémoire à court terme).

• Responsive Design

  Design

  Un site qui s'adapte comme de l'eau : il prend la forme de l'écran (téléphone, tablette, ordi) sans que le texte ne devienne minuscule ou qu'il faille scroller horizontalement.

  Définition Technique

  Utilisation de Media Queries CSS (@media) et d'unités relatives (%, rem, vw) pour adapter la mise en page à la largeur du viewport (WCAG 1.4.10 Reflow).

• RGAA

  Légal

  Le livre de règles officiel en France. Si vous êtes un service public, vous devez le respecter pour que votre site soit accessible à tous.

  Définition Technique

  Référentiel Général d'Amélioration de l'Accessibilité. Obligation légale pour le secteur public et les grandes entreprises (>250M€ CA).

• Rôle ARIA

  Technique

  Un déguisement pour élément HTML. Si vous transformez une image en bouton, vous devez lui donner le rôle "button" pour que les lecteurs d'écran comprennent que c'est cliquable.

  Définition Technique

  Attribut role="". Redéfinit la sémantique d'un élément. Attention : ne donne pas les comportements clavier (il faut les gérer en JS).

• Sans Serif

  Design

  Une famille de polices d'écriture "bâton" (comme Arial ou Roboto) sans les petites fioritures aux extrémités des lettres. Elles sont souvent plus lisibles sur écran.

  Définition Technique

  Famille de polices sans empattements. Recommandée pour le corps de texte sur écran car plus lisible en basse résolution.

• Skip Link (Lien d'évitement)

  Technique

  Un raccourci secret (souvent caché) qui apparaît au clavier pour sauter directement au contenu principal sans devoir traverser tout le menu.

  Définition Technique

  Premier lien focusable de la page (href="#main"). Visible au focus. Permet d'éviter les blocs répétés (WCAG 2.4.1).

• Sous-titres

  Contenu

  Le texte en bas de l'écran qui écrit ce qui est dit. Pour les sourds (CC), il doit aussi décrire les bruits importants (ex: [Musique angoissante], [Coup de feu]).

  Définition Technique

  Fichier VTT ou SRT synchronisé (<track kind="captions">). Différent des sous-titres de traduction (subtitles).

• SVG

  Technique

  Un format d'image magique qui reste net même quand on zoome très fort, car il est dessiné avec des mathématiques (vecteurs) et non des pixels.

  Définition Technique

  Scalable Vector Graphics. XML pour les graphiques. Accessible via <title> et <desc> ou role="img" + aria-label.

• TabIndex

  Technique

  L'ordre de passage quand on appuie sur la touche Tab. En général, on laisse l'ordre naturel (0), mais parfois on doit le corriger (-1 pour sortir du circuit).

  Définition Technique

  Attribut tabindex. 0 = ordre naturel (focusable). -1 = focusable via JS mais pas au clavier. >0 = anti-pattern (force un ordre arbitraire, à éviter).

• Tableau de Données

  Technique

  Un tableau fait pour trier des chiffres ou des infos (comme un emploi du temps). Il doit avoir des en-têtes clairs pour qu'on sache à quoi correspond chaque case.

  Définition Technique

  Balise <table> avec <caption>, <th> (avec scope="col" ou "row") et <td>. Ne pas utiliser pour la mise en page (layout).

• Taux de Conformité

  Légal

  La note sur 100 de votre site. Attention, même à 100%, un site peut encore avoir des problèmes d'usage, mais il respecte techniquement toutes les règles.

  Définition Technique

  Calculé sur un échantillon de pages. (Critères conformes / Total critères applicables) * 100.

• Titre de Page (<title>)

  Technique

  Le nom de l'onglet dans votre navigateur. C'est la première chose qu'un aveugle entend. Il doit être unique et décrire précisément la page.

  Définition Technique

  Balise <title> dans le <head>. Doit être unique pour chaque URL et suivre le pattern : [Nom Page] - [Nom Site].

• Transcription

  Contenu

  La version écrite de tout ce qui se dit dans une vidéo ou un podcast. Indispensable pour les sourds, et génial pour ceux qui préfèrent lire.

  Définition Technique

  Alternative textuelle pour les médias temporels (audio/vidéo). Doit inclure les dialogues et les sons importants (WCAG 1.2.1).

• Validité HTML

  Technique

  Écrire du code sans fautes d'orthographe. Si le code est propre, les navigateurs et les lecteurs d'écran le comprennent mieux.

  Définition Technique

  Respect de la spécification HTML du W3C. Vérifiable via le W3C Validator. Les erreurs de parsing (balises mal fermées, IDs dupliqués) cassent l'accessibilité.

• W3C

  Général

  L'organisation mondiale qui décide comment le Web doit fonctionner. Ce sont les gardiens des standards.

  Définition Technique

  World Wide Web Consortium. Consortium international qui développe les standards Web (HTML, CSS, XML, WCAG).

• WCAG

  Légal

  Les règles internationales d'accessibilité. Le RGAA français est basé dessus. C'est la bible mondiale de l'accessibilité.

  Définition Technique

  Web Content Accessibility Guidelines. Norme ISO/IEC 40500:2012. 3 niveaux de conformité : A (minimum), AA (standard légal), AAA (idéal).

• Zone (Area)

  Technique

  Une partie cliquable définie à l'intérieur d'une image (carte cliquable).

  Définition Technique

  Balise <area> dans une <map>. Doit avoir un attribut alt pour décrire la destination ou l'action de la zone.

• Zoom Texte

  Design

  La capacité d'agrandir le texte jusqu'à 200% (deux fois sa taille) sans que le site ne se casse ou que le texte ne se chevauche.

  Définition Technique

  Critère WCAG 1.4.4. Le texte doit pouvoir être redimensionné jusqu'à 200% sans perte de contenu ou de fonctionnalité (éviter les hauteurs fixes en px).