Critères de succès

WCAG 1.3.1 Information et relations

Le critère de succès 1.3.1 exige que l'information, la structure et les relations véhiculées par la présentation visuelle puissent également être déterminées par programme, ou soient disponibles sous forme de texte. C'est un critère de niveau A sous la règle 1.3 (Adaptable) - et, en pratique, le critère le plus large de l'ensemble des WCAG, qui couvre une très grande part des erreurs de structure HTML courantes.

Ce que signifie « déterminable par programme »

Une personne voyante perçoit la structure visuellement : du gras suggère une mise en valeur, une indentation suggère une liste, la proximité suggère qu'une étiquette de formulaire se rapporte à un champ, une grille de cellules encadrées suggère un tableau de données. Le critère 1.3.1 exige que cette même structure soit encodée dans le balisage lui-même - et non seulement suggérée par la mise en forme - afin que les technologies d'assistance la perçoivent aussi.

Les défaillances que ce critère couvre

Le critère 1.3.1 est exceptionnellement large, parce que « structure et relations » recouvre plusieurs situations distinctes :

• Des titres qui ne reflètent pas la structure réelle du document, ou qui sautent des niveaux - voir Ordre des titres incorrect.
• Des tableaux de données sans véritables cellules d'en-tête associant chaque cellule de données à sa signification - voir En-têtes de tableau manquants.
• Des régions de repère absentes ou dupliquées, ne laissant aucune carte structurelle de la page - voir Problèmes de repères et de régions.
• Du HTML de présentation (<center>, <font>, l'attribut align) qui encode la mise en forme directement dans le balisage structurel au lieu de séparer les deux - voir Balisage de présentation obsolète.
• Des listes qui ressemblent visuellement à des listes - tirets ou numéros saisis en texte brut - mais ne sont pas balisées avec <ul>, <ol> et <li>.
• Des étiquettes de formulaire associées par la seule proximité visuelle, sans lien programmatique <label for>.

Pourquoi un seul critère couvre autant de terrain

Les WCAG auraient pu scinder « titres », « tableaux », « repères » et « listes » en critères distincts ; ces situations sont au contraire réunies sous un même principe : ne pas laisser la mise en forme seule porter un sens que le balisage devrait porter. S'il faut retenir un seul modèle mental pour le critère 1.3.1, c'est celui-ci : chaque fois que vous êtes tenté de communiquer une structure par le seul CSS - un texte plus grand pour la mise en valeur, une indentation pour la hiérarchie, des bordures pour le regroupement -, demandez-vous s'il n'existe pas un élément HTML sémantique dont c'est le rôle.

Références officielles

• Deque University : list
• Deque University : listitem
• Technique H62 du W3C
• Technique H91 du W3C

Questions fréquentes

Qu'est-ce que le critère WCAG 1.3.1 ?

Un critère de niveau A qui exige que la structure visuelle - titres, listes, en-têtes de tableau, champs étiquetés - soit encodée sémantiquement en HTML ou en ARIA, et non seulement mise en forme pour en avoir l'apparence.

Quelles sont les non-conformités courantes au critère 1.3.1 ?

Utiliser du texte en gras au lieu d'un véritable titre, des tableaux de mise en page dépourvus d'en-têtes appropriés, ou une étiquette visuelle qui n'est pas liée par programme à son champ.

Comment le critère 1.3.1 se teste-t-il ?

Il est partiellement automatisable - les outils détectent les en-têtes de tableau absents ou les étiquettes non associées - mais vérifier que la structure visuelle est entièrement représentée dans le balisage exige souvent une revue humaine.