Contenu non textuel

by admin — last modified 2008-10-02 11:27

Liste des points de contrôle

Texte de remplacement pour tout élément non-textuel
Images cliquables côté client
Du texte balisé plutôt que des images
Liens textuels redondants

Fournir un texte de remplacement pour tout élément non-textuel. 1.1 (P1)

WCAG 1.0, traduction française d'AccessibilitéWeb

Fournir un texte de remplacement pour tout élément non-textuel (par exemple via "alt", "longdesc", ou dans le contenu des éléments). Ceci inclut : les images, les représentations graphiques de texte (y compris les symboles), les zones sensibles des images cliquables, les animations (par exemple les GIF animés), les applets et objets programmables, l'art ascii, les cadres, les scripts, les images utilisées comme puces pour les listes, les images d'espacement, les boutons graphiques, les sons (joués avec ou sans interaction de l'utilisateur), les fichiers audio indépendants, les pistes audio de vidéos, et la vidéo.

Section 508 version anglaise

1194.22 (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

1.1.1 (niveau A)
Contenu non textuel :
Tout contenu non textuel présenté à l’utilisateur a un texte de remplacement qui remplit une fonction équivalente sauf dans les situations suivantes :

Composant ou saisie :
Si le contenu non textuel est un composant d’interface ou s’il permet la saisie d’information par l’utilisateur, alors il a un nom qui décrit sa fonction.

CAPTCHA :
Si ce contenu non textuel vise à confirmer que le contenu est visité par une personne plutôt que par un ordinateur, alors un texte de remplacement est fourni pour identifier et décrire les contenus non textuels, et des formes alternatives du CAPTCHA sont offertes sous différents types de perception sensorielle pour accomoder différents types d'incapacités.

Décoration, formatage visuel, invisibilité :
Si le contenu non textuel est purement décoratif, s’il est utilisé seulement pour un formatage visuel ou s'il n’est pas présenté aux utilisateurs, alors il est implémenté de manière à pouvoir être ignoré par les technologies d’adaptation informatique.

Erreurs à éviter :

F30 : Utiliser du texte de remplacement qui n'en est pas (ex.: nom de fichier ou texte générique comme "image").
F20 : Ne pas mettre à jour le texte de remplacement quand le contenu non textuel change.
F3 : Utiliser le CSS pour inclure des images informatives.
F39 : Donner un texte de remplacement non vide (ex. "espaceur" ou "image") pour une image qui devrait être ignorée par les technologies d'adaptation.
F38 : En HTML, omettre l'attribut alt pour un contenu non textuel décoratif.
F71 : Utiliser des carctères ayant une apparence semblables mais pas la même signification sans texte de rechange (ex.: zéro (O) pour O ou W1K1 pour WIKI).
F72 : Utiliser un dessin ASCII sans texte de remplacement.
F65 : Omettre l'attribut alt pour les balises <img />, et <input type="image" />.
F67 : Donner une longue description d'un contenu non textuel qui ne sert pas la même fonction ou ne donne pas la même information.

Projet de standard du gouvernement du Québec

01 - 6, a : Une image informative doit être insérée dans une page Web à l’aide de la balise appropriée.

01 - 6, b : Une image informative doit avoir un texte de remplacement.

02 - 9, a : une image doit avoir un texte de remplacement lisible mécaniquement par une technologie d’adaptation informatique.

01 - 6, c : Un texte de remplacement doit être indiqué à l’aide de l’attribut alt.

01 - 6, d : La valeur de l'attribut alt doit contenir un maximum de 150 caractères.

01 - 6, e et 02 - 9, b : Une image comprenant du texte qui n’est pas seulement décoratif doit avoir un texte de remplacement qui reprend au moins le texte apparaissant dans l’image

01 - 6, f et 02 - 9, c : Une image décorative ou comportant déjà une légende doit avoir un texte de remplacement vide.

01 - 6, g : Une image cliquable est autorisée seulement du côté client.

01 - 6, h : Une zone sensible d'une image cliquable du côté client, indiquée à l’aide de la balise , doit inclure un texte de remplacement.

01 - 6, i et 02 - 9, d : un bouton graphique de formulaire Web ou une icône doit avoir un texte de remplacement indiquant sa fonction .

01 - 6, j et 02 - 9, e : une image de type schéma, un organigramme ou un diagramme présenté ou non sous la forme d’image doit :

soit avoir une description complète sur la même page Web, que cette description sois visible ou pas
soit offrir, à l’aide d’un hyperlien ou de l’attribut longdesc, un lien vers cette description sur une autre page Web.

01 - 6, k et 02 - 9, f : Un objet indiqué à l’aide de la balise <object> et intégré à la page Web doit offrir un contenu directement utilisable par les technologies d'adaptation informatiques ou doit contenir un texte donnant un contenu équivalent.

RGAA

1.1 Fournir une alternative textuelle aux éléments non textuels

Test 1.1.1 : Présence de l'attribut alt.

Test 1.1.2 : Alternative vide aux éléments décoratifs.

Test 1.1.3 : Alternative adjacente aux images.

Test 1.1.4 : Alternative aux images liens.

Test 1.1.5 : Pertinence de l'alternative textuelle aux images.

Test 1.1.6 : Alternatives textuelles aux éléments non textuels en lien ou déclenchant une action.

Test 1.1.7 : Présence de descriptions longues lorsque nécessaire.

Test 1.1.8 : Pertinence de la description longue.

Test 1.1.14 : Longueur des contenus d'attribut alt.

Test 1.1.15 : Utilité de l'attribut alt non vide.

AccessiWeb

Fiche 1.1 : Chaque élément graphique possède-t-il une alternative textuelle ?

Fiche 1.2 : Pour chacune des images de la page ayant une alternative, les textes dans l'attribut alt sont-ils appropriés par rapport au contexte dans lequel l'image se trouve ?

Fiche 1.3 : Les éléments graphiques destinés à la décoration sont-ils commentés par ALT="" ?

Fiche 1.4 : Pour chacune des images de la page, les textes dans l'attribut ALT font-ils moins de 60 caractères ?

Fiche 1.6 : Les zones de chacune des images MAP sont-elles ordonnées de manière logique ?

Fiche 1.8 : Pour chacune des images texte de la page, le contenu de son alternative est-il au moins équivalent au texte inscrit dans l'image ?

Fiche 1.10 : Quand une image nécessite une description détaillée, un commentaire texte lui est-il associé ?

Fiche 1.11 : Si une description détaillée de l'image est présente, son contenu est-il pertinent ?

Fiche 11.6 : Dans un formulaire, le commentaire du bouton SUBMIT est-il pertinent ?

Tout contenu non-textuel doit avoir un texte de remplacement ou texte de remplacement. Qu'il s'agisse d'une image fixe ou animée ou d'un programme incorporé à une page, un texte de remplacement doit être disponible.

Clientèles visées

Personnes ayant une incapacité visuelle.
Personnes ayant une incapacité cognitive.

Explication

Pour les images :

Quand il s'agit d'images purement décoratives et sans signification, vous devez inscrire un texte de remplacement vide, comme ceci : alt="".
Pour les images utilisées comme icône de navigation ou bouton de formulaire, il est important de décrire la fonction du bouton plutôt que son apparence (exemple: « Retour à la page d'accueil » plutôt que « Petite maison blanche au toit rouge ».
Pour les images représentant du texte, qu'elles soient ou non utilisées comme lien, l'attribut alt doit reprendre au moins le texte apparaissant sur l'image. On peut y ajouter si on le juge bon, mais on ne peut omettre aucun contenu textuel.
Pour les images plus complexes comme les diagrammes, les schémas ou les graphes, qui ne peuvent être décrites en moins de 150 caractères, incorporez un attribut longdesc pointant vers une page explicative qui reprendra tout le contenu visuel de cette image.
- Exemple :
```
<img src="diagramme_pph.gif" alt="Diagramme du processus de production 
du handicap." longdesc="description_pph.html" />
```
On peut également donner accès à la longue description en incluant l'image dans un lien y conduisant. Le alt de l'image devrait alors inclure une phrase de type : « Ce lien permet d'accéder à une description complète de l'image. »
- Exemple :
```
<a href="description_pph.html"> 
  <img src="diagramme_pph.gif" alt="Diagramme du processus de production 
  du handicap. Ce lien permet d'accéder à une description complète 
  de ce diagramme." />
</a>
```
Vous pouvez aussi ajouter cette description à la page courante. Par exemple : un histogramme peut être suivi ou précédé du tableau de données ayant permis de le créer. Le texte de remplacement de l'histogramme pourra alors indiquer simplement « Histogramme illustrant les données du tableau qui suit ».
Pour faciliter la lecture en synthèse vocale, il est également conseillé de terminer le contenu d'un attribut alt par un point final. Ce contenu devrait donc prendre la forme d'une ou de quelques courtes phrases. En lecture continue, cette façon de faire permettra à l'utilisateur de bien distinguer le contenu de l'image du texte qui la suit.

Pour les zones sensibles des images cliquables :

L'image cliquable peut comporter un attribut alt qui en décrit la fonction ou être traitée comme une image décorative avec un alt vide.
Chaque zone sensible d'une image cliquable doit avoir un attribut alt qui reprend exactement le texte ou la signification de l'icône utilisée dans cette zone.

Voir aussi Non-text Content in WCAG 2.0.

Utiliser des images cliquables côté client. 1.2 (P1) et 9.1 (P1)

WCAG 1.0, traduction française d'AccessibilitéWeb

1.2 : Fournir des liens textuels redondants pour chaque zone sensible d'une image cliquable côté serveur.

9.1 : Fournir des images cliquables côté client au lieu des images cliquables côté serveur, sauf lorsque les zones sensibles ne peuvent être définies avec une forme géométrique disponible.

Section 508 version anglaise

1194.22 (e) Redundant text links shall be provided for each active region of a server-side image map.

1194.22 (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

[Sans équivalent.]

Projet de standard du gouvernement du Québec

01 - 6, g.

RGAA

1.2 Doubler les zones cliquables côté serveur

Test 1.2.1 : Doublement des zones cliquables côté serveur.

Test 1.2.2 : Accès aux liens textuels doublant les zones cliquables côté serveur.

9.1 Fournir des images avec zones cliquables côté client

Test 9.1.1 : Accessibilité des images avec zones cliquables côté serveur.

AccessiWeb

Fiche 1.5 : Les commentaires associés à chacune des zones réactives d'une image MAP sont-ils pertinents ?

Fiche 1.6 : Les zones de chacune des images MAP sont-elles ordonnées de manière logique ?

Fiche 1.7 : Pour chacune des images MAP, les zones de l'image MAP sont-elles définies juste après la déclaration de l'image MAP ?

Clientèles visées

Personnes ayant une incapacité visuelle.
Personnes ayant une incapacité cognitive.

Explication

Vous devez utiliser des images cliquables côté client car elles permettent d'incorporer un texte de remplacement pour chaque zone sensible et peuvent être parcourues au clavier.

Si vous devez malgré tout utiliser des images cliquables côté serveur, vous devez ajouter des liens textuels redondants pour toutes les zones sensibles.

Voir aussi Technique 1.2 in WCAG 1.0 et Technique 9.1 in WCAG 1.0.

Revenir au début de la page

Utiliser du texte balisé plutôt que des images. 3.1 (P2) et 11.1 (P2)

WCAG 1.0, traduction française d'AccessibilitéWeb

3.1 : Quand un langage de balisage approprié existe, utiliser des balises plutôt que des images pour transmettre l'information.

11.1 : Utiliser les technologies du W3C lorsqu'elles sont disponibles et adaptées à une tâche. Utiliser les dernières versions supportées.

Section 508 version anglaise

3.1 : [No equivalent.]

11.1 : [No equivalent.]

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

1.4.5 (niveau AA)
Images de texte :
Si la technologie utilisée peut réaliser la présentation visuelle, du texte est utilisé pour communiquer l’information plutôt que des images de texte. Sauf pour les situations suivantes :

Images personnalisables :
L’image de texte peut être visuellement personnalisée selon les exigences de l’utilisateur.
Images essentielles :
Un présentation spécifique du texte est essentielle à la communication de l’information.

Note :
Le texte qui fait partie d’un logo ou d’un nom de marque est considéré comme essentiel.

Projet de standard du gouvernement du Québec

01 - 8, a : La présentation des éléments textuels d’une page Web doit être effectuée à l’aide d’une feuille de style.
01 - 8, e : La taille d’une police de caractères doit être spécifiée avec une unité de mesure relative.

01 - 8, h : Lorsqu'une feuille de style est désactivée, la page Web doit présenter le même contenu, visible ou non, organisé selon un ordre séquentiel logique en respectant le contraste défini à l’alinéa (d) du présent article.

01 - 8, k : À l’exclusion d’un dessin présenté sous forme d’image, une page Web doit exclure tout dessin réalisé à l'aide de caractères.

RGAA

3.1 Remplacer les éléments non textuels par des styles CSS

Test 3.1.1 : Remplacement des éléments non textuels par des styles CSS.

11.1 Privilégier les technologies du W3C

Test 11.1.1 : Privilégier les technologies du W3C.

Test 11.1.2 : Privilégier les dernières versions des technologies du W3C.

AccessiWeb

Fiche 1.9 : Il convient de remplacer un texte sous forme d'image par un texte mis en forme. Cette règle est-elle respectée ?

Explication

Pour la présentation des équations mathématiques, il est préférable d'utiliser une technologie comme MathML plutôt que de produire une image de l'équation décrite par un texte de remplacement. Contrairement à une image, une formule écrite en MathML pourra être agrandie selon les besoins de l'utilisateur et lue intelligemment aussi bien en synthèse vocale que sur un écran braille.

Des outils sont disponibles pour convertir une équation mathématique écrite dans Microsoft Word en code MathML. Pour plus d'information, voir : www.w3.org/Math/implementations.html.

Chaque fois que possible, il est également recommandé de remplacer les images du menu de navigation par du texte avec le balisage approprié. L'objectif d'accessibilité est de permettre à l'utilisateur de redimensionner le texte pour en augmenter la lisibilité.

Voir aussi Info and Relationships in WCAG 2.0.

Revenir au début de la page

Fournir des liens textuels redondants pour chaque zone sensible d'une image cliquable côté client. 1.5 (P3)

WCAG 1.0, traduction française d'AccessibilitéWeb

Jusqu'à ce que les agents utilisateurs interprètent texte de remplacement pour les liens des images cliquables côté client, fournir des liens textuels redondants pour chaque zone sensible d'une image cliquable côté client.

Section 508 version anglaise

[No equivalent.]

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

This is no longer required because user agents now render text alternatives for client-side image map areas.

Projet de standard du gouvernement du Québec

Cette exigence est considérée comme désuète.

RGAA

1.5 Doubler les liens des images avec zones cliquables côté client

Explication

Il s'agit d'un point de contrôle soumis à la condition « Jusqu'à ce que... ». Nous considérons que cette condition est remplie et que ce point de contrôle est par conséquent désuet.

Cette opinion est partagée par les rédacteurs de WCAG 2.0 (encore en version de travail au moment d'écrire ces lignes) qui écrivent :« This is no longer required because user agents now render text alternatives for client-side image map areas. » et par les auteurs du projet de standard du gouvernement du Québec.

Voir aussi Technique 1.5 in WCAG 1.0.

Revenir au début de la page

Liste des thèmes.

Revenir au début de la page.