Good Mood

Page Content

terminologie

plusieurs termes sont couramment utilisés pour décrire le texte alternatif. Ils peuvent être utilisés dans différents contextes, même au sein de ce site web.,

• texte alternatif – le concept d’ajouter un texte convivial pour les lecteurs d’écran description alternative d’une image. Cela peut être implémenté différemment selon les types de documents.
• attribut ALT (HTML) – en HTML, le texte ALT est inséré dans L’attribut ALT dans la balise IMG.
• alt « Tag » – référence abrégée à L’attribut ALT.

Demo of ALT Text

Purpose

le texte ALT ajoute une description textuelle à une image sur une page Web et doit être utilisé pour toutes les images, les puces graphiques et les règles horizontales graphiques.,

le texte alternatif est accessible par les utilisateurs de lecteurs d’écran pour leur fournir un texte équivalent aux images. Dans les navigateurs visuels tels que Firefox, le texte ALT s’affiche lorsqu’une image est cassée ou lorsque toutes les images ont été désactivées.

WCAG-Directive

WCAG 2.0 de Directive 1.1.1.— »Tout contenu non textuel présenté à l’Utilisateur a une alternative textuelle qui sert le but équivalent. »

exemples de boutons D’Image

considérez les images des sections comme un site éducatif hypothétique en dessous duquel toutes contiennent du texte décoratif.,
remarque: tout texte utilisé dans une image doit suivre les directives de lisibilité et de contraste.

Sortie de Lecteur d’Écran Avec ALT de la Balise

Si les images ne se chargent pas, le texte ALT montrera ce que les images aurait dit dans un navigateur tel que Firefox.

sortie du lecteur D’écran sans balise ALT

sans le texte ALT, personne ne peut savoir quel aurait été le contenu de l’image.

la mise en Œuvre de l’Attribut ALT

ci-Dessous sont quelques exemples de la manière dont le texte ALT peuvent être mises en œuvre en fonction du contexte.

George Washington de la Peinture

Afficher le Code

mettre en Œuvre le texte comme un attribut de la balise IMG. Voir l’exemple ci-dessous.

remarque: une longueur de texte ALT recommandée est d’environ 125 caractères. Cela convient au champ de texte alt du lecteur D’écran JAWS. Cependant, ce n’est pas dans les directives WCAG.

légendes de L’Image par rapport au texte alternatif

toute information sur l’image, telle que les informations sur le droit d’auteur, la source de l’image ou des informations supplémentaires doit être placée dans le texte de la légende sous l’image, et non dans le texte alternatif. Voir l’exemple ci-dessous.

légende: Peinture « Washington et Lafayette à Valley Forge » par John Ward Dunsmore de 1907. Image reproduite avec l’aimable autorisation de la Bibliothèque du Congrès.,

Logos

Pour les logos, notamment les logos qui sont répétés, il suffit de repérer le logo c’est, pas nécessairement de décrire

l’utilisation Abusive du Texte alternatif

il ne doit pas être utilisé pour:

• introduire le texte de l’info-bulle,
• fournir des informations sur le droit d’auteur ou la source d’une image ou
• transmettre des informations supplémentaires sur le graphique.,
• introduire des termes de recherche (cela peut être fait via une bonne utilisation des en-têtes).

texte Alt vide pour les Images décoratives

certaines images sont utilisées uniquement à des fins de mise en page ou pour améliorer le contenu pour les utilisateurs voyants et ne fournissent aucun contenu.

La balise ALT pour ces images peuvent être vides ( <alt= «  » > ou <alt= » « >), de sorte que les lecteurs d’écran les ignore complètement.,

l’exemple ci-dessous utilisera un exemple d’image d’une barre d’outils arc-en-ciel, suivi de quelques exemples de code accessibles et inaccessibles.

Rainbow Tool Bar

supposons qu’un côté Web ait été conçu avec une barre d’outils rainbow utilisée pour séparer des morceaux de texte.

Remarque: L’attribut ALT avec le caractère espace est considéré comme moins correct, mais peut être la seule option autorisée dans certains systèmes de gestion de contenu.

texte alt concis

Si une description textuelle est déjà fournie pour une image dans le texte principal de la page, alors la balise ALT peut simplement fournir un résumé de l’image, pas une description complète.,

Voir les Images complexes pour des exemples de la façon dont cela peut être utilisé dans différentes situations.

Exemple de Texte avec Image

ci-Dessous une image d’une graisse saturée molécule avec 18 molécules de carbone. Notez que les liaisons simples entre les éléments rendent la chaîne de carbone relativement droite.,

liens vers des Descriptions étendues

Dans certains cas, il peut être nécessaire d’ajouter un lien vers une description étendue d’une image, en particulier dans les cas où les images sont utilisées pour transmettre un contenu significatif. Il y a plusieurs façons d’y parvenir—y compris une balise LONGDESC, un lien D ou un lien plus ouvert vers la description plus longue. Voir ci-dessous pour des exemples

lien vers le texte de la légende

Si l’information est critique, alors un lien de légende manifeste peut être la meilleure solution. Cette méthode fournit l’indication la plus claire qu’une description plus longue est disponible.,

Affichage de Texte Étendu Description

D-liens

Certains experts préconisent l’utilisation d’une D-link pour signaler la présence d’une étendue de texte description. Cependant, certains utilisateurs peuvent ne pas être au courant de la convention. Cette méthode est mieux utilisée pour fournir des informations purement supplémentaires.

D

Attribut LONGDESC

C’est un attribut qui est caché dans les navigateurs visuels, mais reconnu par certains lecteurs d’écran. LONGDESC est le meilleur pour fournir des détails supplémentaires qui améliorent le contenu, mais n’est pas critique., Il convient de noter que LONGDESC a un support incomplet parmi les navigateurs visuels et les lecteurs d’écran, et est obsolète en HTML5.

liens et boutons

pour les images utilisées comme éléments de navigation pour déclencher des fonctions telles que l’impression, le téléchargement ou l’enregistrement, le texte ALT doit décrire la destination ou la fonction, pas l’image.

Bouclier Penn State cliquable ou Non cliquable

Lorsqu’un bouclier Penn State est utilisé sur une page Web, le texte alternatif utilisé dépend s’il est cliquable (c’est-à-dire des liens vers la page D’accueil Penn State) ou non.,

Si une image de bouclier Penn State est utilisée pour fournir un lien cliquable vers la page d’accueil, le texte ALT doit indiquer la destination (C’est-à-dire ALT= »Page D’accueil Penn State ») notez que la balise IMG est incorporée dans une balise A pour le lien.

Remarque: Si le bouclier n’est pas cliquable, le texte alternatif peut être « Penn State » ou « Penn State shield ».

attribut TITLE pour les conseils D’outils

L’attribut TITLE d’un texte IMG peut être utilisé pour générer une info-bulle pour les utilisateurs voyants. Mais s’il vous plaît être conscient.,

• L’attribut TITLE n’est pas lu à haute voix par défaut dans la plupart des lecteurs d’écran.
• Le texte ALT n’est généralement pas affiché en tant qu’info-bulle dans la plupart des navigateurs.

Si une astuce est nécessaire pour les utilisateurs voyants, alors un attribut TITLE et ALT avec les mêmes informations peuvent être utilisés pour s’assurer que les mêmes informations sont fournies aux deux publics.

Voir cet exemple ci-dessous

bouton coeur favoris avec Astuce

considérez une version de l’image coeur ci-dessous qui peut être utilisée dans une interface pour sélectionner des éléments favoris (par exemple des chansons préférées ou des livres électroniques).,

à la Fois le texte et le TITRE de l’attribut sont des « Favoris »

Afficher le Code