Aller au contenu
A11ySignal
Se connecterVérifier une page
critiqueWCAG 1.3.1 · A

Certains rôles ARIA doivent comporter des descendants directs spécifiques

aria-required-children

Vérifier que les éléments avec un rôle ARIA comportent aussi des rôles pour les descendants directs

Le critère derrière

1.3.1 Information et relations

La structure que vous montrez par la mise en page — titres, listes, tableaux, groupes — doit aussi exister dans le balisage.

Niveau A · EN 301 549 § 9.1.3.1

Pourquoi cette vérification existe

Les utilisateurs de lecteurs d'écran naviguent par titre et par région. Si vos titres sont des `div` stylés, cette navigation n'existe pas et la page devient un seul long paragraphe.

Ce qui la déclenche habituellement

  • échoue`<div class="h2">` au lieu de `<h2>`.
  • échoueUn tableau de mise en page sans `<th>`, ou un tableau de données sans cellules d'en-tête.
  • échoueDes boutons radio liés sans `<fieldset>` ni `<legend>`.
  • échoueUne liste visuelle construite avec des balises `<br>`.

Comment corriger

  • à fairePrenez l'élément qui veut dire ce que vous voulez dire, puis stylez-le. La sémantique d'abord, le CSS ensuite.
  • à faireDonnez aux tableaux de données `<th scope="col">` ou `scope="row"`.
  • à faireGroupez les champs liés dans un `<fieldset>` et nommez le groupe dans la `<legend>`.
  • à faireAjoutez les régions : `<main>`, `<nav>`, `<header>`, `<footer>`.

Comment c'est signalé

A11ySignal le signale avec un impact critique. Chaque élément en échec arrive avec son sélecteur CSS et le balisage fautif, pour aller droit à la ligne plutôt que de la chercher. Deque publie le détail au niveau du moteur :

https://dequeuniversity.com/rules/axe/4.13/aria-required-children ↗

Vérification implémentée par axe-core 4.13.0, © Deque Systems, MPL-2.0.

Autres vérifications pour 1.3.1

critiquearia-hidden-bodyaria-hidden='true' ne doit pas être présent sur <body>
critiquearia-required-parentCertains rôles ARIA doivent être contenus par des parents spécifiques
critiquetd-has-headerChaque élément td non vide dans un tableau plus grand que 3 × 3 doit avoir une cellule d’entête associée
gravedefinition-listLes éléments <dl> ne doivent contenir directement que des groupes d’éléments <dt> et <dd> correctement ordonnés, ou des éléments <script> ou <template>
gravedlitemLes éléments <dt> et <dd> doivent être contenus dans un élément <dl>
gravelist<ul> et <ol> ne doivent contenir directement que des éléments <li>, <script> ou <template>
gravelistitemLes éléments <li> doivent être contenus dans un élément <ul> ou <ol>
gravep-as-headingLa graisse, le style et le corps du texte ne doivent pas être utilisés pour styler les éléments p comme des niveaux de titres
gravetable-fake-captionLes données ou les cellules d’entête ne devraient pas être utilisées pour légender un tableau de données
gravetd-headers-attrLes cellules utilisant l’attribut headers ne doivent faire référence qu’à d’autres cellules du même tableau
graveth-has-data-cellsTous les éléments th et ceux avec role=columnheader/rowheader doivent décrire des cellules de données