• Accueil
•   >  Recueil
•   >  Mentions légales en exposant - Accessibilité

Mentions légales en exposant - Accessibilité

Introduction

Dans beaucoup d’interfaces, on affiche une petite référence en exposant (ex. (1)) à côté d’un texte pour pointer vers une mention légale détaillée en bas de page. Ce pattern paraît trivial… mais il peut facilement devenir peu accessible si l’on ne respecte pas quelques règles : contrôle accessible, clavier, focus, masquage, structure sémantique.

Voici un pattern robuste, documenté, et auditable

Objectifs

Juridique

• Les renvois (1) sont autorisés
• Ils servent à préciser, pas à cacher une info obligatoire
• L’info principale doit être claire sans lire la note
• La note (1) est un complément juridique uniquement
• Règle clé : compréhension immédiate, sans effort ni interprétation

UX

• Texte principal suivi d’un exposant (1) cliquable.
• En bas de page, une liste des mentions légales avec leur texte complet.
• Quand on clique (1), on descend à la mention correspondante et le focus est mis sur cette zone.
• Un bouton “Retour au texte” permet de revenir au point d’origine et rend le focus au petit (1).
• Note typographique (français) : on peut insérer une espace insécable entre le texte et l’exposant

A11y

• Indicateur visuel & contrôle accessible : bouton avec nom accessible clair (WCAG 4.1.2).
• Pilotable au clavier :activation via Enter/Espace, focus correct (WCAG 2.1.1)
• Gestion du focus explicite :ordre et visibilité du focus (WCAG 2.4.3, 2.4.7)
• Masquage correct :les éléments inactifs ne doivent pas être dans l’API a11y (WCAG 1.3.1, 4.1.2)
• Structure sémantique :régions nommées, séquence lisible (WCAG 1.3.1, 1.3.2)

Exemple complet

Rendu

Explication « morceau par morceau »

Le (1) cliquable (contrôle accessible)

<sup>
    <button type="button" class="js--btn-mention" title="Voir la mention légale 1" aria-label="Voir la mention légale 1" data-mention="1">(1)</button>
</sup>

La région de mention (structure sémantique)

<div role="region" aria-label="Mention légale 1" tabindex="0">
    <p>(1) Lorem ipsum</p>
</div>

Le bouton “Retour au texte” (focus & cohérence))

<button class="hide js--btn-mention-retour" type="button" id="mention1">Retour au texte</button>

Le bouton “Retour au texte” (focus & cohérence))

<button class="hide js--btn-mention-retour" type="button" id="mention1">Retour au texte</button>

Disposition et masquage

.hide {
  display:none;
}
.reverse {
  display:inline-flex;
  flex-direction:row-reverse;
}

Logique clavier (JS)

• À l'aller : mémoriser l'origine, montrer "Retour", focus sur la région
• Au retour : rendre le focus au (1), re-masquer "Retour"

Check‑list de tests (NVDA + Firefox)

1. Tab → le focus passe sur (1) ; Entrée/Espace amènent le focus sur la région correspondante.
2. NVDA annonce : « Bouton, Voir la mention légale 1 », puis « Région, Mention légale 1 » et lit le texte.
3. Tab au sein de la région → le bouton Retour devient visible et atteignable au clavier.
4. Entrée sur Retour → le focus revient sur le (1) d’origine.
5. Les autres boutons Retour sont masqués (non atteignables) hors contexte.

Points d’attention

• Évitez les contrôles interactifs dans un

  si possible (cognitif) ; préférez le placer dans le flux (paragraphe). Si contrainte UI, ça reste acceptable si focus visible.

• Ne pas compter sur title pour l’a11y ; c’est un bonus visuel, pas une base.
• Cohérence des libellés : mention légale, numéro, accents, orthographe.
• Espace insécable :   (étroite) ou   selon rendu voulu.
Retour en haut