Clavier

Ne pas imbriquer les composants interactifs

Règle: nested-interactive
Gravité: Sérieux
Niveau WCAG A

Pourquoi c’est important

Un lien dans un bouton, ou un bouton dans un lien, donne au navigateur deux cibles au même endroit. Les lecteurs d’écran n’en annoncent qu’une, et laquelle est imprévisible.

Comment corriger

Placez les composants côte à côte plutôt que l’un dans l’autre.
Si toute une carte doit être cliquable, utilisez un seul lien étiré en CSS sur la carte.
Vérifiez que vos composants sur mesure n’ont pas de descendants encore focusables nativement.

Dans le balisage

Échoue

<button>
  Details <a href="/terms">terms</a>
</button>

Réussit

<button>Details</button>
<a href="/terms">terms</a>

L’exigence sous-jacente

Cette règle est une manière d’échouer aux critères de succès WCAG 2.2 suivants. Le W3C, qui rédige la norme, explique chacun d’eux :

4.1.2 Nom, rôle et valeur (s’ouvre dans un nouvel onglet) — Niveau WCAG A

Pour aller plus loin

Deque University sur nested-interactive (s’ouvre dans un nouvel onglet)

Deque développe axe-core, le moteur open source utilisé par notre scanner. Sa page documente la règle telle que le moteur l’implémente.

Les contrôles automatiques trouvent les défaillances qu’un navigateur peut prouver. Ils ne peuvent pas juger si un sous-titrage est fidèle, si une alternative textuelle est utile, ni si une page s’utilise de bout en bout au clavier : cela demande une personne.