Identification cohérente :
Comprendre le
CS 3.2.4
3.2.4 Identification cohérente : dans un ensemble de pages Web les composants qui ont la même fonctionnalité sont identifiés de la même façon. (Niveau AA)
Objectif de ce critère de succès
L'objectif de ce critère de succès est de s'assurer d'une identification cohérente des composants fonctionnels qui apparaissent répétitivement dans un ensemble de pages Web. Les personnes se servant de lecteurs d'écran ont pour stratégie lors de leur utilisation d'un site Web de s'appuyer fortement sur leurs connaissances des fonctions apparaissant sur les différentes pages Web. Si des fonctions identiques ont des étiquettes différentes sur les différentes pages Web, alors le site sera beaucoup plus difficile à utiliser. Cela peut être également perturbant et augmenter la charge cognitive pour les personnes ayant des limitations cognitives. Par conséquent, un étiquetage cohérent sera utile.
Cette cohérence est étendue aux équivalents textuels. Si des icônes ou autres éléments non textuels ont la même fonctionnalité, alors leurs équivalents textuels devraient être cohérents.
Avantages spécifiques pour le critère de succès 3.2.4 :
Les personnes qui repèrent une fonctionnalité sur une page d'un site peuvent retrouver les fonctions désirées sur d'autres pages si elles sont présentes.
Quand un contenu non textuel est utilisé de manière cohérente pour identifier des composants avec la même fonctionnalité, les personnes ayant des difficultés pour lire du texte ou identifier les équivalents textuels peuvent alors interagir avec le Web sans dépendre des équivalents textuels.
Les personnes dépendant des équivalents textuels peuvent disposer de plus de situations prévisibles. Elles peuvent chercher un composant s'il possède une étiquette cohérente sur les différentes pages.
Exemples pour le critère de succès 3.2.4
Exemple 1 : icône d'un document
Une icône « document » est utilisée pour indiquer le téléchargement d'un document dans un site. L'équivalent textuel pour cette icône commence toujours avec le mot « Télécharger, » suivi d'une version raccourcie du titre du document. Utiliser de cette manière différents équivalents textuels pour identifier les noms des documents représente une utilisation cohérente d'équivalents textuels.
Exemple 2 : marque « cochée »
Une marque « cochée » peut signifier « approuvé » sur une page ou « inclus » sur une autre. Dans la mesure où ces marques servent des fonctions différentes, elles doivent avoir des équivalents textuels différents.
Exemple 3 : références cohérentes vers d'autres pages
Un site Web publie des articles en ligne. Chaque article comprend plusieurs pages Web et chacune de ces pages contient des liens vers la première page, la page précédente et la page suivante de l'article. Si les références aux pages suivantes indiquent successivement « Page 1 », « Page 2 », « Page 3 », etcetera, les étiquettes ne sont pas les mêmes mais elles sont cohérentes. Par conséquent, ces références ne sont pas des échecs du critère de succès.
Exemple 4 : icônes avec des fonctions similaires
Un site de commerce électronique utilise une icône d'imprimante qui permet à l'utilisateur d'imprimer ses reçus et factures. Dans une partie du site, l'icône imprimante est étiquetée avec « Imprimer reçu » et est utilisée pour imprimer les reçus, alors que dans une autre partie du site elle est étiquetée « Imprimer factures » et est utilisée pour imprimer les factures. L'étiquetage est donc cohérent (« Imprimer x »), mais les étiquettes sont différentes pour refléter les différentes fonctions des icônes. Par conséquent, cet exemple ne fait pas échouer le critère de succès.
Exemple 5 : icône sauvegarde
Une icône « sauvegarder » classique est utilisée dans un site, dans les pages où la fonction « sauvegarde » est disponible.
Exemple 6 : exemple d'échec du critère
Un bouton de soumission « recherche » sur une page Web et un bouton « trouver » sur une autre page disposent tous les deux d'un champ pour saisir des termes. Après soumission ils listent les sujets du site en relation avec les termes saisis. Dans ce cas, les deux boutons ont la même fonctionnalité mais ils ne sont pas étiquetés de façon cohérente.
Ressources liées
Les ressources sont présentées dans un but d'information seulement, il ne s'agit pas d'une approbation.
(Aucune ressource n'est actuellement documentée
Techniques et échecs pour le critère de succès 3.2.4 - Identification cohérente
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
G197 : Utiliser les étiquettes, les noms et les équivalents textuels de façon cohérente pour des contenus ayant la même fonctionnalité (en anglais)ET en suivant les techniques suffisantes pour le critère de succès 1.1.1 et les techniques suffisantes pour le critère de succès 4.1.2 pour fournir des étiquettes, des noms, et des équivalents textuels.
Note 1 : les équivalents textuels « cohérents » ne sont pas toujours « identiques ». Par exemple, vous pourriez avoir une flèche graphique en bas d'une page Web représentant un lien vers la prochaine page Web. L'équivalent textuel indiquerait par exemple « Aller à la page 4 ». Naturellement, il ne serait pas approprié de répéter ce même équivalent textuel sur la page suivante. Il serait plus approprié d'indiquer « Aller à la page 5 ». Bien que ces équivalents textuels ne seraient pas identiques, ils seraient cohérents et satisferaient ainsi ce critère.
Note 2 : un élément de contenu non textuel pourrait répondre à plusieurs fonctions. Dans de telles situations, différents équivalents textuels sont nécessaires et devraient être utilisés. Des exemples peuvent être classiquement trouvés avec l'utilisation d'icones comme des marques cochées ou en croix ou encore des panneaux de signalisation. Une marque « cochée » peut signifier « approuvé », « complété » ou « inclus » suivant la situation. Utiliser « marque cochée » comme équivalent textuel dans toutes les pages Web et situations n'apportera pas d'information sur la fonction de l'icône à l'utilisateur. Ainsi, différents équivalents textuels peuvent être utilisés quand un même contenu non textuel sert différentes fonctions.
Techniques (supplémentaires) recommandées pour le critère de succès 3.2.4
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.
S'assurer que l'équivalent textuel exprime la fonction du composant et ce qu'il adviendra lorsque l'utilisateur l'activera (lien à venir)
Utiliser le même contenu non textuel pour une fonction donnée à chaque fois que cela sera possible (lien à venir)
Échecs fréquents pour le CS 3.2.4
Le groupe de travail des WCAG considère les erreurs fréquentes suivantes comme des échecs du critère de succès 3.2.4.
Mots clés
- même fonctionnalité
produit le même résultat à l'utilisation
Exemple : un bouton « recherche » sur une page Web et un bouton « trouver » sur une autre peuvent tous les deux proposer un champ pour saisir un terme et lister les sujets présents dans le site et pertinents par rapport au terme soumis. Dans ce cas, ils offrent la même fonctionnalité mais ne sont pas nommés à l'identique.
- page Web
une ressource autonome obtenue depuis un URI unique grâce au protocole HTTP, accompagnée de toutes les autres ressources utilisées dans la restitution ou conçues pour être restituées simultanément par un agent utilisateur
Note 1 : bien que toutes les « autres ressources » seraient restituées avec la ressource primaire, elles ne sont pas nécessairement restituées simultanément.
Note 2 : à des fins de conformité avec ces règles, une ressource doit être autonome à l'intérieur du périmètre de conformité pour être considérée comme une page Web.
Exemple 1 : une ressource Web incluant toutes les images et médias liés
Exemple 2 : un programme Web de courrier électronique (Webmail) développé à l'aide d'AJAX (Asynchronous JavaScript and XML, JavaScript asynchrone et XML). Le programme réside intégralement à l'adresse http://exemple.com/mail, mais comprend une boîte de réception, un carnet d'adresses et un calendrier. Des liens et des boutons permettent d'afficher la boîte de réception, les contacts ou le calendrier, mais ne changent pas globalement l'URI de la page.
Exemple 3 : un site portail personnalisable, dans lequel les utilisateurs peuvent choisir le contenu à afficher à partir d'un ensemble de modules de contenu.
Exemple 4 : quand on saisit « http://shopping.exemple.com/ » dans son navigateur, on entre dans un environnement commercial animé et interactif dans lequel on se déplace visuellement dans une boutique, retirant les produits directement depuis les rayons pour les placer dans un panier d'achat face à soi. Cliquer sur un produit déclenche une démonstration avec la fiche technique juste à côté. Cela peut être un site Web à page unique ou simplement une page à l'intérieur d'un site Web.