Information et relations :
Comprendre le CS 1.3.1
1.3.1 Information et relations : 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. (Niveau A)
Objectif de ce critère de succès
L'objectif de ce critère de succès est de s'assurer que l'information et les relations qui sont impliquées par la mise en forme visuelle ou auditive sont conservées lors de la présentation sous d'autres formats. Par exemple, le format de présentation change lorsque le contenu est lu par un lecteur d'écran ou lorsque la feuille de style de l'utilisateur est substituée à la feuille de style fournie par l'auteur.
Les utilisateurs voyants perçoivent la structure à travers divers indices visuels — les en-têtes de section sont souvent dans une taille de police plus grande, en caractères gras et séparés du paragraphe par des lignes blanches ; les éléments de liste sont précédés par une puce et peut-être en retrait ; les paragraphes sont séparés par une ligne blanche ; les éléments partageant une caractéristique commune sont organisés en lignes et en colonnes dans des tableaux ; des champs de formulaires peuvent être positionnés par groupes partageant des étiquettes textuelles ; une couleur de fond différente peut être utilisée pour indiquer que plusieurs points sont liés les uns aux autres ; les mots qui ont une fonction particulière sont indiqués par un changement de la famille de police et/ou par des caractères gras, italiques ou soulignés et ainsi de suite.
Des signaux sonores peuvent aussi être utilisés. Par exemple, un carillon pourrait indiquer le début d'une nouvelle section, un changement de ton de la voix ou du débit de lecture pourrait faire ressortir de l'information importante ou indiquer le texte d'une citation, etc.
Lorsque de telles relations sont perceptibles à un ensemble d'utilisateurs, ces relations peuvent être rendues perceptibles à tous. Une méthode permettant de déterminer si oui ou non l'information a été correctement donnée à tous les utilisateurs est d'accéder à la même information dans une série de modalités différentes.
Si des liens vers des articles du glossaire sont implémentés en utilisant des éléments d'ancrage (ou l'élément de lien approprié pour la technologie utilisée) et si ces liens sont identifiés en utilisant une police différente, un utilisateur d'un lecteur d'écran va entendre que l'élément est un lien quand le terme du glossaire sera rencontré, même s'il ne peut pas recevoir l'information sur le changement de la police. Un catalogue en ligne peut indiquer les prix en utilisant une plus grande police rouge. Un lecteur d'écran ou une personne qui ne peut pas percevoir le rouge ont toujours l'information sur le prix tant qu'il est précédé du symbole monétaire.
Certaines technologies ne donnent pas le moyen de déterminer par un programme informatique certains types d'information et de relations. Dans ce cas, il devrait y avoir une description textuelle de l'information et des relations. Par exemple, « tous les champs obligatoires sont signalés par un astérisque (*) ». La description du texte devrait être à proximité de l'information qui est décrite (si la page est linéarisée), comme dans l'élément parent ou dans l'élément adjacent.
Il peut aussi y avoir des cas où il faut porter un jugement sur les informations qui doivent figurer dans le texte et ce qui aurait besoin d'être directement associé, et il peut alors être plus approprié de dupliquer des informations (par exemple, dans un tableau HTML, fournir le résumé tant dans le paragraphe précédant le tableau que dans l'attribut summary du tableau lui-même). Toutefois, dans la mesure du possible, il est nécessaire que les informations puissent être déterminées par un programme informatique plutôt que de fournir une description textuelle précédant le tableau.
Note : il n'est pas nécessaire que les valeurs de la couleur soient déterminables par un programme informatique. L'information véhiculée par de la couleur ne peut pas être présentée de façon adéquate simplement en donnant la valeur. Par conséquent, le critère de succès 1.4.1 traite du cas spécifique de la couleur, plutôt que le critère de succès 1.3.1.
Avantages spécifiques du critère de succès 1.3.1 :
Ce critère de succès aide les personnes ayant différentes limitations fonctionnelles en permettant aux agents utilisateurs d'adapter le contenu en fonction des besoins de chaque utilisateur.
Les utilisateurs aveugles (et qui utilisent un lecteur d'écran) en bénéficient lorsque les informations transmises par la couleur sont également disponibles en texte (y compris les équivalents textuels des images où la couleur est utilisée pour transmettre l'information).
Les utilisateurs sourds-aveugles et qui utilisent un afficheur braille éphémère peuvent être incapables d'accéder à l'information dépendante de la couleur.
Exemples du critère de succès 1.3.1
Un formulaire avec des champs obligatoires
Un formulaire contient plusieurs champs obligatoires. Les étiquettes pour les champs obligatoires sont affichées en rouge. En outre, à la fin de chaque étiquette on trouve un astérisque, *. Les instructions pour remplir le formulaire indiquent que « tous les champs obligatoires sont affichés en rouge et marqués d'un astérisque « * », consigne qui est suivie d'un exemple.
Un formulaire qui utilise la couleur et du texte pour indiquer les champs obligatoires
Un formulaire contient à la fois des champs obligatoires et optionnels. Les instructions figurant au début du formulaire expliquent que les champs obligatoires sont marqués avec du texte en rouge ainsi qu'avec une icône dont l'équivalent textuel dit « obligatoire ». Tant le texte en rouge que l'icône sont associés par programmation au champ de formulaire approprié afin que les utilisateurs d'une technologie d'assistance puissent déterminer les champs obligatoires.
Un horaire d'autobus présenté sous forme de tableau où les en-têtes de chaque cellule peuvent être déterminés par un programme informatique
Un horaire de bus consiste en un tableau présentant les arrêts de bus à la verticale dans la première colonne et les différents bus énumérés horizontalement dans la première rangée. Chaque cellule contient le moment où le bus sera à l'arrêt. Les arrêts de bus et les cellules des différents bus sont identifiés comme des en-têtes de la rangée ou de la colonne correspondante de telle sorte que la technologie d'assistance puisse déterminer par programmation quel bus et quel arrêt de bus sont associés dans chaque cellule.
Un formulaire où les étiquettes des cases à cocher peuvent être déterminées par un programme informatique
Dans un formulaire, l'étiquette de chaque case à cocher peut être déterminée par programmation par la technologie d'assistance.
Un document texte
Un simple document texte est mis en forme avec deux lignes vides avant les titres, des astérisques pour indiquer les éléments de liste et d'autres conventions de mise en forme standard si bien que sa structure peut être déterminée par un programme informatique.
Ressources liées
Les ressources sont présentées dans un but d'information seulement, il ne s'agit pas d'une approbation.
Quick tips for accessible headings – Conseils en anglais pour créer des en-têtes accessibles
Techniques et échecs pour le critère de succès 1.3.1 - Information et relations
Chaque élément numéroté dans cette section représente une technique ou une combinaison de techniques que le groupe de travail des WCAG considère comme suffisante pour satisfaire à ce critère de succès. Les techniques énumérées satisfont le critère de succès seulement si toutes les exigences de conformité aux WCAG 2.0 ont été appliquées.
Techniques suffisantes
Consignes : choisissez parmi les situations suivantes celle qui correspond à votre contenu. Chaque situation comprend des techniques ou des combinaisons de techniques qui sont connues et documentées comme suffisantes par rapport à cette situation.
Situation A : la technologie offre une structure sémantique permettant de rendre l'information et les relations véhiculées par la présentation déterminables par un programme informatique :
G115 : Utiliser les éléments sémantiques pour baliser la structure (en anglais) ET H49 : Utiliser les éléments sémantiques pour baliser le texte accentué ou spécial (en anglais) (HTML)
Rendre l'information et les relations véhiculées par la présentation déterminables par un programme informatique en utilisant les techniques suivantes :
G138 : Utiliser un balisage sémantique quand des indices sont donnés par la couleur (en anglais)
H51 : Utiliser le balisage des tableaux pour présenter l'information tabulaire (en anglais) (HTML)
FLASH31 : Préciser un titre pour un composant DataGrid (en anglais) (Flash)
FLASH23 : Ajouter un résumé à un composant DataGrid (en anglais) (Flash)
FLASH29 : Définir la propriété label pour les éléments de formulaire (en anglais) (Flash)
H85 : Utiliser optgroup pour regrouper des éléments option dans un élément select (en anglais) (HTML)
H48 : Utiliser ol, ul et dl pour les listes (en anglais) (HTML)
H42 : Utiliser h1-h6 pour identifier les en-têtes de section (en anglais) (HTML)
Situation B : la technologie en cours d'utilisation ne fournit pas la structure sémantique permettant de rendre l'information et les relations véhiculées par la présentation déterminables par un programme informatique :
Rendre l'information et les relations véhiculées par la présentation déterminables par un programme informatique ou disponibles en texte en utilisant les techniques suivantes :
Techniques supplémentaires (recommandées) pour 1.3.1
Bien qu'elles ne soient pas nécessaires à la conformité, les techniques supplémentaires suivantes devraient être envisagées afin de rendre le contenu plus accessible. Toutes ces techniques ne peuvent pas être utilisées ou ne seraient pas efficaces dans toutes les situations.
C22 : Utiliser les CSS pour contrôler la présentation visuelle du texte (en anglais) (CSS)
Contrôler la mise en page par CSS plutôt que par tableaux (lien à venir)
G162 : Positionner les étiquettes afin de maximiser la prévisibilité des relations (en anglais)
ARIA2 : Identifier les champs obligatoires avec la propriété required (en anglais) (ARIA)
Fournir des étiquettes pour tous les éléments de contrôle de formulaire qui n'ont pas d'étiquettes implicites (lien à venir)
G141 : Organiser une page en utilisant les en-têtes de section (en anglais)
Échecs fréquents pour le CS 1.3.1
Le groupe de travail des WCAG considère les erreurs fréquentes suivantes comme des échecs du critère de succès 1.3.1.
Mots clés
- déterminé (déterminable) par un programme informatique
déterminé par un programme à partir de données fournies par l'auteur d'une manière qui permet aux agents utilisateurs, y compris les technologies d'assistance, d'extraire et de présenter cette information aux utilisateurs sous différentes formes
Exemple 1 : déterminé dans un langage de balisage à partir d'éléments et d'attributs auxquels on accède grâce aux technologies d'assistance couramment disponibles.
Exemple 2 : déterminé grâce à des structures de données spécifiques d'une technologie pour un langage non-balisé et exposée aux technologies d'assistance via une API d'accessibilité aux technologies d'assistance couramment disponibles.
- présentation
rendu du contenu sous une forme perceptible par l'utilisateur
- relations
associations significatives entre des parties distinctes du contenu
- structure