Aller au contenu
A11ySignal
Se connecterVérifier une page
Niveau AWCAG 2.0WCAG 2.1WCAG 2.2EN 301 549 § 9.1.3.1

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.

Ce que dit la norme

L'information, la structure et les relations véhiculées par la présentation peuvent être déterminées par un programme informatique ou sont disponibles sous forme de texte.

Pourquoi c'est important

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.

À quoi ressemble un échec

  • é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 A11ySignal le vérifie

12 vérifications automatiques s'exécutent sur ce critère à chaque analyse.

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
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

Ce qu'un outil ne peut pas vous dire

L'automatisation repère les en-têtes de tableau manquants et les titres vides. Savoir si vos niveaux de titre décrivent le plan réel demande toujours une lecture.

Également sous 1.3 Adaptable