Test 8.9.1

Dans chaque page web les balises (à l’exception de <div>, <span> et <table>) ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée ?

Méthodologie 8.9.1

  1. Retrouver dans le document l’ensemble des éléments sémantiques utilisés à des fins de présentation ;
  2. Pour chacun de ces éléments, vérifier que :
    • L’élément est pourvu d’un attribut role="presentation" ;
    • L’utilisation de cet élément à des fins de présentation reste justifée.
  3. Si c’est le cas, le test est validé.

Note : Quelques exemples, non exhaustifs de détournement de balisage : un élément <div> utilisé comme paragraphe, un titre utilisé comme légende, un élément <blockquote> ou des paragraphes vides ou encore des espaces utilisés pour créer des effets de marges.
L’utilisation d’un role="presentation" est formellement déconseillée, mais peut toutefois se justifier dans de rares cas. Cela peut être acceptable sur un élément <blockquote> ou un paragraphe vide, mais sera considéré comme non-conforme sur un titre.

Le cas des tableaux : à noter que ce test aborde les tableaux de présentation qui ne devraient finalement pas apparaître au sein de la thématique Tableaux.

Tests suivants et précédents au clavier

Test précédent : Maj + ←

Test suivant : Maj + →

Avec ces raccourcis clavier, atteindre

Éléments et attributs

<div> <span> <table> <blockquote> role='presentation'

Définitions

Motif de conception

Un motif de conception (Design Pattern) est un modèle défini dans le document WAI-ARIA 1.1 Authoring Practices qui décrit la structure, les rôles et propriétés et le comportement clavier que doit respecter un composant JavaScript (widget).

Il est recommandé que les composants développés en JavaScript utilisant des attributs WAI-ARIA correspondant à un motif de conception respectent celui-ci. Attention cependant, les motifs de conception ne sont pas tous adaptés à un usage non applicatif, en particulier pour les sites proposant un affichage en contexte mobile.

Note 1 : compte tenu du manque de support de certaines propriétés et de certains rôles WAI-ARIA et de la grande variabilité des situations dans lesquelles un composant JavaScript peut être proposé, il est possible d’adapter des motifs de conception à des contextes ou des utilisations particulières. Dans ce cas, le motif de conception adapté doit :

  • Respecter la structure générale : par exemple un ensemble de panneaux (rôle WAI-ARIA tabpanel) d’un système d’onglets est forcément lié à un ensemble d’onglets (rôle WAI-ARIA tablist) ;
  • Utiliser en remplacement d’un rôle ou d’une propriété WAI-ARIA mal supporté, un rôle ou une propriété WAI-ARIA équivalent, offrant un comportement et une restitution similaire.

Note 2 : Le fait d’enrichir un motif de conception de rôles ou propriétés WAI-ARIA supplémentaires dont la compatibilité avec l’accessibilité est contrôlée par le test de restitution sur l’environnement de test (ou « base de référence ») ne constitue pas une adaptation d’un motif de conception. Par exemple l’ajout de l’attribut WAI-ARIA aria-hidden sur les panneaux (rôle WAI-ARIA tabpanel) d’un système d’onglets ne définit pas un motif de conception adapté.

Uniquement à des fins de présentation

Uniquement à des fins de présentation : utilisation de balises HTML pour une finalité différente de celle prévue dans les spécifications (au regard du type de document déclaré). Exemples : utilisation des balises h à seule fin de créer un effet typographique ; utilisation de la balise <blockquote> à seule fin de mettre un paragraphe en retrait, etc.

Note 1 : l’utilisation d’éléments <div> ou <span> ou plusieurs <br> pour créer visuellement un paragraphe est considérée comme non conforme et invalide le critère.

Exemple : <div>, paragraphes d’un bloc de texte simulés, <br>, à l’aide de plusieurs balises <br>, </div>

Note 2 : WAI-ARIA propose un rôle presentation permettant de supprimer la sémantique d’un élément, par exemple <h1 role="presentation">Titre</h1>. Dans ce cas, le texte sera correctement restitué mais son rôle de titre ne le sera plus. L’utilisation du rôle presentation peut être requise lorsque l’on utilise un motif de conception WAI-ARIA.

Le rôle WAI-ARIA presentation peut être également utilisé pour supprimer la sémantique d’un élément lorsque ce dernier est utilisé uniquement à des fins de présentation, par exemple <blockquote role="presentation"> aura le même effet qu’une absence d’élément <blockquote>.

Même si cette utilisation est fortement déconseillée (dans le cas de technologie d’assistance qui n’implémenteraient pas WAI-ARIA par exemple) elle peut être considérée comme conforme à WCAG. En revanche l’utilisation d’un rôle WAI-ARIA presentation sur un élément dont la nature (par exemple la sémantique) est essentielle à la compréhension du contenu est une violation des règles WCAG (particulièrement de l’échec F92) et invalide le critère.