Do headings introduced to meet SC 2.4.10 (AAA) need to be marked up With an h<n> tag too?
On this page, HTML heading markup h<n> tags are used for the titles of each scenario I / Ii / III and for each of the two ARIA1 and ARIA2 techniques. This is good enough to comply with SC 1.3.1 (A) for the three scenarios illustrated below. In Scenario I, these are the only headings.
Dans les scénarios II et III, chaque sous-section des techniques ARIA1 et ARIA2 comporte en outre un titre (dans le texte) : « Applicabilité », « Remarques concernant la prise en charge par les agents utilisateurs et les technologies d'assistance » et « Description ». Celles-ci sont numérotées respectivement A / B / C.
Il convient de noter que le style de présentation (police et taille du texte) des titres de chaque sous-section n'est pas distinctif, alors qu'ils font office d'en-têtes. Ces titres facilitent la compréhension pour tous et sont également utiles aux utilisateurs de lecteurs d'écran. Le simple fait d'introduire ces en-têtes permet donc au contenu d'être conforme à la spécification SC 2.4.10 (AAA).
2.4.10 Titres de section : les titres de section servent à structurer le contenu. (Niveau AAA)
La spécification SC 2.4.10 (AAA) précise que le terme « titre » est utilisé dans son sens général et englobe les titres ainsi que toute autre manière d'ajouter un titre à différents types de contenu. Les WCAG 2 ne définissent pas les termes « titre » ou « titre de section ».
Ces titres mettent-ils également en évidence la structure et les relations entre les informations, comme l'exige la norme SC 1.3.1 (A) ?
1.3.1 Informations et relations : les informations, la structure et les relations véhiculées par la présentation peuvent être déterminées par programmation ou sont disponibles sous forme de texte. (Niveau A)
Les titres des sous-sections ne sont pas mis en forme de manière distinctive et ne contreviennent donc pas à la règle F2 : « Utilisation de variations dans la présentation du texte pour transmettre des informations sans recourir au balisage ou au texte approprié ». Ils sont donc conformes à la règle SC 1.3.1 (A).
Dans le scénario III, chaque sous-section intitulée « Applicabilité », « Remarques concernant la prise en charge par les agents utilisateurs et les technologies d'assistance » et « Description » constitue un élément de liste et expose donc les relations et la structure des informations de manière programmatique. Dans le scénario II également, ces sous-sections se trouvent à l'intérieur de la balise P du contenu correspondant et satisfont donc au critère de conformité 1.3.1.
Bien sûr, c'est à l'auteur du contenu qu'il revient de décider si les titres des sous-sections doivent ou non présenter une mise en forme distincte. S'ils sont distincts, ils ne doivent pas échouer au test F2.
Le rôle ARIA « heading » à la rescousse :
Les titres des sous-sections ont le même aspect visuel dans ARIA1 et ARIA2, mais ils sont différents pour les utilisateurs de lecteurs d'écran. À titre d’illustration, les titres sous ARIA2 sont balisés avec le rôle ARIA « heading ». Même sans attribut « aria-level », ces titres aident les utilisateurs de lecteurs d’écran à découvrir le contenu et à naviguer efficacement. JAWS attribue également un niveau de titre à ces éléments (de manière incorrecte, semble-t-il dans ce cas), tandis que NVDA et VoiceOver (sous iOS) se contentent de les présenter comme des titres. (Freedom Scientific a été informé de ce problème).
Scénario I : Contenu de chaque technique présenté sans titres visibles
ARIA1 : Utilisation de la propriété `aria-describedby` pour attribuer une étiquette descriptive aux éléments de l'interface utilisateur
Cette technique s'applique à :
- SC 1.3.1 : Informations et relations
- SC 3.3.2 : Étiquettes ou instructions
Consultez les notes de prise en charge par les agents utilisateur pour ARIA1.
Cette technique a pour objectif de montrer comment utiliser la propriété `aria-describedby` de WAI-ARIA afin de fournir des informations descriptives, déterminées par programmation, concernant un élément de l'interface utilisateur. La propriété `aria-describedby` peut être utilisée pour…
ARIA2 : Identification d'un champ obligatoire à l'aide de la propriété « aria-required »
Cette technique s'applique à :
- SC 1.3.1 : Informations et relations
Consultez les notes de prise en charge par les agents utilisateur pour ARIA2.
L'objectif de cette technique est d'indiquer, de manière déterminée par le code, que le remplissage d'un champ de saisie utilisateur est obligatoire pour que l'envoi d'un formulaire aboutisse, lorsqu'un indice visuel est présent à cet effet. Le caractère obligatoire de l'élément est souvent signalé visuellement (au moyen d'un symbole textuel ou non textuel, d'un texte indiquant que la saisie est obligatoire, ou encore d'une couleur ou d'un style particulier)…
Scénario II : Contenu de chaque technique au sein d'un élément `p` et titres visibles pour respecter la critère de succès 2.4.4
ARIA1 : Utilisation de la propriété `aria-describedby` pour attribuer une étiquette descriptive aux éléments de l'interface utilisateur
A. Champ d'application :
Cette technique s'applique à :
- SC 1.3.1 : Informations et relations
- SC 3.3.2 : Étiquettes ou instructions
B. Remarques concernant la prise en charge par les agents utilisateurs et les technologies d'assistance :
Voir les remarques concernant la prise en charge par les agents utilisateurs pour ARIA1.
C. Description :
Cette technique a pour objectif de montrer comment utiliser la propriété « aria-describedby » de WAI-ARIA afin de fournir des informations descriptives, déterminées par programmation, concernant un élément de l'interface utilisateur. La propriété « aria-describedby » peut être utilisée pour…
ARIA2 : Identification d'un champ obligatoire à l'aide de la propriété « aria-required »
A. Champ d'application :
Cette technique s'applique à :
- SC 1.3.1 : Informations et relations
B. Remarques concernant la prise en charge par les agents utilisateurs et les technologies d'assistance :
Voir les remarques concernant la prise en charge par les agents utilisateurs pour ARIA2.
C. Description :
L'objectif de cette technique est d'indiquer, de manière déterminée par le code, que le remplissage d'un champ de saisie utilisateur est obligatoire pour que l'envoi d'un formulaire aboutisse, lorsqu'un indice visuel est présent à cet effet. Le fait que l'élément soit obligatoire est souvent signalé visuellement (au moyen d'un symbole textuel ou non textuel, d'un texte indiquant que la saisie est obligatoire, ou encore d'une couleur ou d'un style particulier) …
Scénario III : Contenu de chaque technique au sein d'une liste et titres visibles pour respecter le critère de succès 2.4.10
ARIA1 : Utilisation de la propriété `aria-describedby` pour attribuer une étiquette descriptive aux éléments de l'interface utilisateur
- Champ d'application
Cette technique s'applique à :- SC 1.3.1 : Informations et relations
- SC 3.3.2 : Étiquettes ou instructions
- Remarques sur laprise en charge par lesagents utilisateurs et les technologies d'assistance
Consultez les remarques sur la prise en charge par les agents utilisateurs pour ARIA1. - Description
Cette technique a pour objectif de montrer comment utiliser la propriété `aria-describedby` de WAI-ARIA afin de fournir des informations descriptives, déterminées par programmation, concernant un élément de l'interface utilisateur. La propriété `aria-describedby` peut être utilisée pour…
ARIA2 : Identification d'un champ obligatoire à l'aide de la propriété « aria-required »
- Champ d'application
Cette technique s'applique à :- SC 1.3.1 : Informations et relations
- Remarques sur la prise en charge des agents utilisateurs et des technologies d'assistance
Consultez les remarques concernant la prise en charge par les agents utilisateurs pour ARIA2. - Description
L'objectif de cette technique est d'indiquer, de manière déterminée par programmation, que le remplissage d'un champ de saisie utilisateur est obligatoire pour que l'envoi d'un formulaire aboutisse, lorsqu'il existe un indice visuel à cet effet. Le fait que l'élément soit obligatoire est souvent indiqué visuellement (au moyen d'un symbole textuel ou non textuel, d'un texte indiquant que la saisie est obligatoire, ou encore d'une couleur ou d'un style particulier)…
Créé par Sailesh Panchang, Deque Systems | 8 août 2014
