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

Les données ou les cellules d’entête ne devraient pas être utilisées pour légender un tableau de données

table-fake-caption

Vérifier que les tableaux avec une légende utilisent l’élément <caption>

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 grave. 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/table-fake-caption ↗

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-childrenCertains rôles ARIA doivent comporter des descendants directs spécifiques
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
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