Sur cette page :

Texte sous forme d'image :
Comprendre le CS 1.4.5

1.4.5 Texte sous forme d'image : si les technologies utilisées peuvent réaliser la présentation visuelle, du texte est utilisé pour véhiculer l'information plutôt que du texte sous forme d'image sauf dans les cas suivants : (Niveau AA)

Personnalisable : le texte sous forme d'image peut être personnalisé visuellement selon les exigences de l'utilisateur ;

Essentielle : une présentation spécifique du texte est essentielle à l'information véhiculée.

Note : les logotypes sont considérés comme essentiels (le texte qui fait partie d'un logo ou d'un nom de marque).

Objectif de ce critère de succès

L'objectif de ce critère de succès est d'encourager les auteurs qui utilisent des technologies capables de réaliser des présentations visuelles spécifiques de permettre aux personnes d'ajuster la présentation du texte lorsqu'elles ont besoin d'une présentation spécifique du texte. Cela comprend les personnes qui ont un besoin spécifique concernant une taille de police, une couleur d'avant-plan et d'arrière-plan, une famille de polices de caractères, un espacement entre les lignes ou un alignement du texte.

Si un auteur peut utiliser du texte pour obtenir le même rendu visuel, il ou elle doit présenter les informations sous forme de texte plutôt que d'utiliser une image. Si pour une raison quelconque, l'auteur ne peut pas adapter le texte pour obtenir le même rendu, si le rendu ne peut pas être présenté de manière fiable par les agents utilisateurs couramment disponibles, ou si l'utilisation d'une technologie dans le but de répondre à ce critère devait nuire au respect d'autres critères comme le 1.4.4, alors du texte sous forme d'image peut être utilisé. Cela inclut les cas où une présentation spécifique du texte est essentielle à l'information devant être véhiculée, comme les échantillons de types, les logotypes, la marque, etc. Du texte sous forme d'image peut également être utilisé dans le but de se servir d'une police de caractères particulière qui n'est pas largement déployée, ou que l'auteur n'a pas le droit de distribuer, ou pour s'assurer que le texte ne sera pas crénelé sur tous les agents utilisateurs.

Du texte sous forme d'image peut également être utilisé lorsqu'il est possible pour les utilisateurs de personnaliser le texte sous forme d'image pour qu'il réponde à leurs exigences.

Les techniques pour satisfaire ce critère de succès sont les mêmes que celles du critère 1.4.9, excepté qu'elles n'ont besoin d'être appliquées que si les technologies utilisées par l'auteur peuvent réaliser la présentation visuelle. Pour le critère de succès 1.4.9, les techniques suffisantes seraient seulement appliquées lorsque l'utilisateur peut personnaliser le rendu final.

Voir également Comprendre le critère de succès 1.4.9 Texte sous forme d'image (sans exception).

Avantages spécifiques du critère de succès 1.4.5 :

Les personnes ayant une basse vision (qui peuvent avoir des difficultés à lire le texte avec la famille de police de caractères, la taille et/ou la couleur définies par l'auteur).
Les personnes ayant un dysfonctionnement du système visuel (qui peuvent avoir des difficultés à lire le texte avec l'espacement entre les lignes et/ou l'alignement définis par l'auteur).
Les personnes ayant des troubles cognitifs qui affectent la lecture.

Exemples pour le critère de succès 1.4.5

En-têtes stylisés

Plutôt que d'utiliser des images matricielles pour présenter des en-têtes dans une police de caractères spécifique, l'auteur utilise les CSS pour atteindre le même résultat.
Images générées dynamiquement

Une page Web utilise la programmation par script côté serveur pour présenter du texte comme une image. La page comprend des contrôles qui permettent à l'utilisateur d'ajuster la taille des polices et les couleurs d'avant-plan et d'arrière-plan de l'image générée.
Une citation

Une page Web contient une citation. La citation est présentée sous forme de texte en italique avec un retrait par rapport à la marge de gauche. Le nom de la personne à laquelle est associée la citation est situé sous la citation avec un espacement proportionnel entre les lignes de 1,5 et un retrait par rapport à la marge de gauche. CSS est utilisé pour positionner le texte, gérer l'espacement entre les lignes tout comme pour afficher les propriétés du texte : famille de police de caractères, taille, couleur et habillage.
Éléments de navigation

Une page Web contient un menu de liens de navigation qui ont à la fois une icône et un texte pour décrire leur cible. CSS est utilisé pour afficher les propriétés du texte : famille de police de caractères, taille et couleurs d'avant-plan et d'arrière-plan ; tout comme pour gérer l'espacement entre les liens de navigation.
Un logo contenant du texte

Un site Web contient le logo d'une organisation dans le coin supérieur gauche de chaque page Web. Le logo contient le logotype (du texte comme une partie ou la totalité du logo). La présentation visuelle du texte est essentielle à l'identité du logo et est incluse dans une image GIF qui ne permet pas que les caractéristiques du texte puissent être modifiées. L'image dispose d'un équivalent textuel.
Représentation d'une famille de police

Une page Web contient des informations sur une famille de polices particulière. Substituer la famille de police avec une autre police irait à l'encontre de l'objectif de la représentation. La représentation est incluse dans une image JPEG qui ne permet pas que les caractéristiques du texte puissent être modifiées. L'image dispose d'un équivalent textuel.
La représentation d'une lettre

Une page Web contient la représentation d'une lettre authentique. La représentation de la lettre dans son format d'origine est essentielle pour la transmission de l'information à propos de la période à laquelle elle a été écrite. La lettre est incluse comme une image GIF qui ne permet pas que les caractéristiques du texte puissent être modifiées. L'image dispose d'un équivalent textuel.
Texte sous la forme de caractères symboliques

Un formulaire permet aux utilisateurs d'entrer des blocs de texte. Le formulaire fournit un certain nombre de boutons, y compris les fonctions pour la mise en forme du texte et la correction orthographique. Certains boutons utilisent des caractères de texte qui ne forment pas une séquence qui exprime quelque chose dans une langue. Par exemple, « B » pour augmenter la graisse de la police, « I » pour mettre le texte en italique et « ABC » pour vérifier l'orthographe. Le texte sous la forme de caractères symboliques est inclus sous la forme d'images GIF qui ne permettent pas que les caractéristiques du texte puissent être modifiées. Les boutons disposent d'équivalents textuels.
Paramètres pour la personnalisation des polices de caractères dans des textes sous forme d'images

Un site Web permet aux utilisateurs de spécifier des paramètres de police et tous les textes sous forme d'images sont ensuite affichés sur la base de ces paramètres.

Ressources liées

Les ressources sont présentées dans un but d'information seulement, il ne s'agit pas d'une approbation.

CSS Web fonts – Polices de caractères Web CSS (en anglais)
Weblog comments: WebKit now supports CSS @font-face rules – Commentaires d'un blogue Web : WebKit supporte désormais les règles CSS @font-face (en anglais)
Creating Cross Browser Compatible CSS Text Shadows – Créer des ombrages de texte CSS compatibles sur plusieurs navigateurs (en anglais)
CSS and text – Texte et CSS (en anglais)

Techniques et échecs pour le critère de succès 1.4.5 - Texte sous forme d'image

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

Techniques (recommandées) supplémentaires pour 1.4.5

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.

Techniques générales pour le contenu non textuel

Identifier un contenu non textuel informatif (lien à venir)

Techniques CSS

C12 : Utiliser les pourcentages pour les tailles de caractères (en anglais) (CSS
C13 : Utiliser les taille de caractères nommées (en anglais) (CSS)
C14 : Utiliser les unités en em pour les tailles de caractères (en anglais) (CSS)
C8 : Utiliser la propriété CSS letter-spacing pour contrôler l'espacement dans un mot (en anglais) (CSS)
C6 : Positionner le contenu selon le balisage structurel (en anglais) (CSS)
Éviter d'appliquer des styles de texte aux caractères dans un mot (lien à venir)

Échecs fréquents pour le CS 1.4.5

Le groupe de travail des WCAG considère les erreurs fréquentes suivantes comme des échecs du critère de succès 1.4.3.

(Aucun échec n'est actuellement documenté)

Mots clés

essentiel(le): élément qui changerait fondamentalement les informations ou les fonctionnalités du contenu s'il était supprimé et informations et fonctionnalités qui ne pourraient être restituées autrement d'une manière conforme
personnalisé visuellement: la police, la taille, la couleur et le fond sont paramétrables
texte: séquence de caractères pouvant être déterminée par un programme informatique, et exprimant quelque chose dans une langue donnée
texte sous forme d'image: texte qui est restitué sous une forme non textuelle (par exemple une image) dans le but de permettre un effet visuel spécifique

Note : cela n'inclut pas le texte qui est une partie d'une image qui contient d'autres contenus visuels signifiants.

Exemple : le nom d'une personne sur un badge dans une photographie.

Texte sous forme d'image :Comprendre le CS 1.4.5