Accessibilité Web : Comment utiliser l’attribut « alt » d’une image?

Donner aux images un texte alternatif est la première chose à faire pour l’accessibilité.

Le texte alternatif est l’un des problèmes d’accessibilité les plus courants, mais il est très souvent implémenté de manière inappropriée ou non standard.

Votre site sera plus accessible pour les personnes ayant une déficience visuelle. L’accessibilité justifie, à elle seule, l’utilisation des attributs « alt ». Même si votre site possède un contenu riche et pertinent, les attributs « alt » ne feront que renforcer ce qui est important.

L’attribut « alt » et l’accessibilité

Depuis la version HTML 4.0, les recommandations du W3C précisent qu’il faut insérer l’attribut « alt » dans les balises d’images, sinon il existera une erreur de validation. A noter que l’attribut « alt » est devenu facultatif depuis la version HTML 5.

Son rôle en matière d’accessibilité est de fournir une alternative textuelle à l’élément auquel il est lié, si cet élément n’est pas affiché :

  • Les navigateurs en mode texte (Lynx, Links…) ou en synthèse vocale (Jaws, NVDA, …)  doivent interpréter l’image, le contenu du « alt » est alors lu ou écrit.
  • Les images/animations peuvent être lentes à charger (images volumineuses, connexion lente),  le texte alternatif est alors affiché en attendant le chargement complet.

Nota : Pour une utilisation optimale, le texte alternatif doit avoir une longueuer maximale de 80 caractères,  tout simplement parce qu’une plage braille («dispositif permettant d’afficher en temps réel des caractères Braille») se compose de deux lignes de 40 caractères.

Photo : clavier Braille

Photo d’un clavier Braille

 

Où renseigner le texte alternatif ?

 

L’attribut « alt » est le principal vecteur des textes alternatifs pour

  • Les images img, avec attribut « alt » et l’attribut « longdesc »,
  • Les zones réactives des images cliquables, type « area »,
  • Les boutons formulaires input type= »image ».

L’attribut « alt » doit être présent sur toutes les images, même s’il peut rester vide (pour les images purement décoratives).

<img alt="Accueil" src="http://www.econocom.com/sites/all/themes/econocom4/images/logo.png">
<code>&lt;img src="puce.jpg" alt="" /&gt;</code>

L’attribut « longdesc »  (Description longue), est utilisé dans les cas où le contenu ne peut être résumé de manière suffisamment succincte. Si la description excède approximativement 10 mots, il faut envisager le recours à l’attribut « longdesc » des éléments « img », qui crée un lien vers une description détaillée placée dans un document annexe.

<code>&lt;img src="chart.gif"</code> width="526" height="353"
<code>alt="Graphique de marge brute d'autofinancement de financement pour chaque mois" longdesc</code><em>= "http://www.thismachine.com/</em>media/description.htm"&gt;

Le lien « D » (D-link : Description longue), placé après la balise image, le lien, avec la lettre « D » en guise de texte, mène à la page de description de l’image.

<img src="chart.gif" alt="Chart de marge brute d'autofinancement de financement pour chaque mois longdesc="http://www.thismachine.com/cashflowchar.txt"><a Href="cashflowchar.txt">D</a>

L’attribut « title », quant à lui, peut être utilisé sur les liens, pour apporter une information nécessaire à la bonne navigation du visiteur et supplémentaire à l’intitulé du lien. C’est un attribut facultatif, et très rarement nécessaire. Un « Title » reprenant à l’identique l’intitulé du lien est totalement inutile et redondant. De plus, il ne doit pas être utilisé sur les images (sauf cas extrêmement spécifiques).

Photo : Logo Armada 2013

Exemple du logo de la manifestation de l’Armada 2013 est taggé par des balises d’accessibilité

<a title="Accueil du site Armada 2013, Les plus grands voiliers du monde" href="../wp-content/uploads/2013/06/logo-armada.png">

Dans cet exemple,  l’attribut « title» apporte une information sur le lien.

<img src="../wp-content/uploads/2013/06/logo-armada.png" alt="Logo de l’armada 2013" width="185" height="98" /></a>

Et le « alt », décrit bien ce qu’est l’image (le logo de la manifestation)

 

Comment renseigner l’attribut « alt » ?

« Tout est dans le contexte, aucune réponse ne s’impose sans doute possible ».

Le contexte et le contenu présent autour de l’image apportent un complément textuel, ce complément va déterminer la pertinence ou non d’ajouter une description à l’image. (Voir exemples plus bas).

Méthode  en 3 étapes :

  1. Commencez par repérer le contenu et la fonction de l’image,
  2. Analysez son contexte,
  3. Puis choisissez le texte alternatif le plus adapté.

Respectez les Règles suivantes:

  • Être précis et équivalent au contenu et aux fonctions de l’image.
  • Être court. Le contenu et la fonction (s’il y en a) de l’image doivent être présentés en quelques mots, aussi peu que possible. On peut néanmoins dans certaines situations aller jusqu’à une ou deux phrases courtes.
  • Nul besoin d’apporter plus d’information que nécessaire. L’attribut « alt » ne contient pas  plus d’information que l’image en comporte.
  • Ne PAS être redondant ou dupliquer le texte entourant l’image.
  • Ne PAS contenir « image de … » ou « graphisme de … ». C’est une précision totalement inutile généralement, et dans le cas d’une image porteuse de sens il est rarement utile de préciser qu’il est apporté par une image plutôt que par du texte.
  • Une image purement décorative contient l’attribut « alt » vide (alt= » »).

 

Quelques conseils à appliquer :

Déterminer si l’image a une fonction ou elle présente du contenu.

  • Si le contenu proposé par l’image se trouve dans le texte entourant l’image, un attribut « alt » vide peut suffire.

Déterminer si l’image à une légende. Si la légende est accompagné un copyright

  • Si le contenu proposé par l’image se trouve dans le texte entourant l’image, un attribut « alt » vide peut suffire.

Déterminer si l’image contient un lien hypertexte (l’image fait partie du lien)

  • la fonction de l’image doit être présentée dans son texte alternatif, à l’intérieur du lien.
  • Si une légende est présente, l’inclure également dans le lien. ex  » article de Wikipédia sur… » Autant que possible, évitez « lien vers » ou « cliquez ici pour » et les formulations de ce type dans l’attribut « alt ».

Parfois le contenu de l’image n’est pas disponible dans son contexte immédiat.

  • Si l’image est un tableau (œuvre d’art) par exemple, Rappelez-vous que le texte alternatif ne sert pas qu’aux non-voyants. De nombreux autres utilisateurs pourraient comprendre qu’il s’agit de ce tableau grâce à une telle description.

 

Les cas des images fonctionnelles

Les images ont parfois non seulement un contenu mais aussi une fonction importante, par exemple pour la navigation.

  • Exemple 1 : Une barre de menus, l’onglet (image)  » Produits » peut contenir la balise « alt » intitulée « Produits », pas nécessaire d’en ajouter plus.

Contre-exemple vu sur un site commercial

Photo : Menu Produits

Photo : Barre d’un menus, le lien « Produits » est en surbrillance.

<img src="/fr/accessibility/images/website/gng_case_01.jpg" alt="Global Navigation Bar, highlighting Products menu">

 

  • Exemple 2 : Un texte, suivi d’une image « flèche ». Une description de l’image (« flèche ») ne serait pas correcte. Il serait probablement plus intéressant d’inclure « page suivante » ou quelque chose d’équivalent dans le texte du lien, auquel cas l’image pourrait avoir un texte alternatif vide.

 

Photo : Flèche Suivante

Photo d’un bouton-image composé d’une flèche en forme de flamme qui pointe vers la droite.

<img src=" /images/bt_blueflam_next.jpg" alt="Page suivante">

 

  • Exemple 3 : Une image (icône flêche) qui accompagne un lien de téléchargement (il n’est  indiqué ni le format du document, ni son poids). Cette image fait partie d’un lien. Dans le cas présent, l’image apporte des informations supplémentaires sur la fonction du lien, il faut baliser par « fichier PDF »,  pour informer aussi précisément que l’image-lien pointe vers un fichier PDF.
    • Ici un texte « alt » vide fait perdre l’information importante apportée par l’image. Si le lien vers le fichier PDF ne contenait que l’icône, le texte alternatif devrait apporter à la fois la fonction et son contenu, par exemple « télécharger le formulaire de candidature au format PDF ». La meilleure solution reste à indiquer le maximum de choses dans le lien, l’image ayant uniquement une fonction visuelle.
    • Si le lien PDF, contenait le nom, le format du document et le poids du fichier téléchargé, une balise « alt » pourrait suffire. (image décorative).
Photo : icône télécharger PDF

Photo : icône flêche + texte « télécharger l’édition du jour » pour télécharger un fichier PDF

<a id="lienpdf"href="http://www.monjournal.fr/pdf/download/20130603_FRA"><img src=’’monimage.png’’ alt=’’Fichier PDF : ’’ >Télécharger l'édition du jour</a>

En règle générale, le texte alternatif d’une même image utilisée dans différents liens doit permettre d’identifier la cible du lien.

 

Les cas des images décoratives

 

Les images décoratives ne portant pas de contenu important, sont utilisées pour la mise en page ou sans apporter d’information, et n’apparaissent pas dans le texte des liens. Dans la majorité des cas, ce genre d’image doit avoir un texte « alt » vide (alt= » »).

  • Exemple 1 : Traits de séparation horizontal purement visuel et sans intérêt.
Photo : barre décorative

Photo : barre décorative

  • Exemple 2 d’une image qui vient ponctuer un texte de présentation commerciale, sans réel intérêt.
Photo : article et image

Photo : Article accompagné d’une photo d’une poignée de main.

 

Dans la pratique, de nombreuses images de ce type ont pour texte alternatif une description alors que celle-ci n’apporte rien. Ce n’est pas parce qu’une image n’est ni un « spacer » ni une simple image décorative qu’elle a besoin de texte alternatif. Le choix alt= » » est le plus approprié car l’image n’offre aucun contenu important ou utile.

 

Les cas particuliers

 

Dans certains cas il peut être vraiment épineux de faire le bon choix. Dans tous les cas, tester ses choix avec un logiciel de revue d’écran et un navigateur en mode texte permet de déterminer le meilleur texte et où l’inclure.

Par exemple, les images utilisées comme boutons. Dans les formulaires, il est obligatoire de donner aux images utilisées comme boutons un attribut « alt » traduisant l’action du bouton. Les images utilisées comme bouton doivent permettre de connaître l’action effectuée par ce bouton («Chercher», «Envoyer », «S’inscrire », «Valider la commande », etc). Dans le cas d’un formulaire de recherche, le code le plus approprié  serait:

<input type="image" alt="Lancer la recherche">.
Bouton de validation

Bouton de validation, l’image contient une icône Caddy, et un texte image « Je valide ma commande ».

Attention : En règle générale, il faut éviter de placer du texte dans une image, sur le cas ci-dessus, seul le caddy devrait être une image, le texte devrait-être dans la page HTML, la couleur du texte et le fond de bouton devraient-être dans le CSS.

Exemples d’images spécifiques :

  • Les images réactives, (mapping d’une carte géographique).
  • Les images découpées
  • Les images d’arrière-plan
  • Les logos
  • Les images complexes
Photo : image carte mappée

Photo : image d’une carte topographique mappée en zones clicquables.

Focus sur les « sprites CSS »

Attention :  La technique du « sprite CSS  » ne devrait-être employée que pour des images à but décoratif, il n’est pas judicieux de ne pas y placer toutes les images. Les images faisant partie d’un contenu pertinent doivent rester dans le code HTML.

Photo : Sprite d'icones

Photo : Sprite d’icones : image contenant une série d’images rangées qui serviront pour les feuilles de styles CSS.

Formulé autrement, quand une image est utilisée de manière décorative, il est généralement recommandé de l’appliquer en tant qu’arrière-plan via CSS. En procédant ainsi, le choix du texte alternatif ne se pose plus et l’image n’apparaît pas dans le corps sémantique et structurel de la page. A contrario les images fonctionnelles, contenues dans des «sprites CSS» et utilisées en arrière-plan (background-position) ne seront pas reconnues par les moteurs de recherche et les lecteurs de page Web pour déficient visuels.

 

Récapitulatif

  • Le texte alternatif est à la fois l’un des principes d’accessibilité les plus simples à retenir, mais parmi les plus difficiles à maîtriser.
  • Le contenu alternatif peut se présenter soit dans l’attribut « alt » soit dans le contexte de l’image.
  • Toute image doit avoir un attribut alt.
  • Le texte alternatif doit
    • Présenter et le contenu et la fonction de l’image.
    • Être court.
  • Le texte alternatif ne doit pas :
    • Répéter un contenu disponible immédiatement avant ou après.
    • Contenir les mots « image de… » ou « graphisme de… ».
  • Le texte alternatif approprié se choisit en fonction du contexte.
  • Le texte alternatif d’une image fonctionnelle (contenue dans un lien, par exemple) doit décrire sa fonction en plus de son contenu.
  • Les images décoratives doivent avoir un attribut « alt » qui doit être vide (alt= » »).

 

Aller plus loin :

L’accessibilité ne s’arrête pas aux images, il est conseillé de balayer l’ensemble des composants d’une page HTML.

Considérer les autres éléments à traiter

  • Cadres
  • Couleurs
  • Formulaires ( Etiquette <label>, légende <fieldset)
  • Documents Word et PDF
  • Multimédia (audio, vidéo, Flash, ..)
  • Navigation
  • Présentation
  • Scripts
  • Standards
  • Structure
  • Tableaux
  • Textes

Penser au référencement….

Référencement manuel :

Les règles d’accessibilité dépassent largement le cas des personnes handicapées. Elles concernent également le référencement et la navigation avec des terminaux mobiles.

Soyez conscient que ces attributs jouent un rôle dans votre stratégie SEO globale. Pour autant, veillez à ne pas rédiger ces attributs uniquement pour les robots des moteurs de recherche. Rédigez des attributs « alt » pour toutes vos images tout en gardant les moteurs de recherche en tête, mais pas uniquement.

Bien que les attributs « alt » ne soient pas aussi importants que d’autres facteurs SEO (comme la balise de titre, les balises H1, H2…), il est important d’y prêter une attention particulière.

Paramétrer les balises d’accessibilité avec WordPress

Lorsque vous souhaitez insérer une image dans vos articles, vous devez renseigner les champs d’un formulaire, dans lequel se cache l’attribut « alt ».

  • Champ Titre : Définit l’attribut « Title »
  • Champ légende : Définit l’attribut « Alt »
<img src="../images/voiliers.jpg" alt="Armada 2013, rassemblement des plus grands voiliers du monde dans le port de Rouen" />

 

Selon l’association AccessiWeb, dans la pratique il faut recomposer l’ensemble des pages qui ont été générées par les générateurs de sites, car les pages ne sont absolument pas lisibles par les lecteurs texte et les synthèses vocales. Le temps à passer est un surcoût non négligeable à prendre en compte dès la conception.

Pour rendre un contenu accessible dans WordPress, il existe plugin TinyMCE Advanced apporte des fonctions complémentaires d’édition.  (voir page Accessibilis).

Optimiser la rédaction de vos articles sous WordPress (article) : http://www.geekpress.fr/wordpress/guide/optimisez-referencement-article-1034/

 

Contrôler ses pages soi-même :

Il existe 3 axes (non exhaustifs) de contrôles assez faciles.

  • Utiliser un référentiel
  • Installer un logiciel de contrôle
  • Installer un lecteur écran

Utiliser un référentiel :

Le développeur peut se baser sur un référentiel qui respecte les standards WCAG (Web Content Accessibility Guidelines), cependant son accès est parfois un peu difficile à appréhender. Le référentiel reste une référence pour le contrôle des pages Web.

  • Le référentiel Accessiweb.
    Les 133 critères AccessiWeb sont répartis en 3 niveaux (Bronze – Argent – Or).
    • 82 critères de Bronze
    • 20 critères d’Argent
    • 31 critères d’Or

 

  • Le référentiel RGAA (Référentiel général d’Accessibilité pour les Administrations)
    12 règles, réparties en 4 principes et 61 critères. Les 187 test de conformité du RGAA sont répartis en 3 niveaux (A – AA – AAA).
    • 82 critères de Bronze
    • 20 critères d’Argent
    • 31 critères d’Or

 

Installer un logiciel de contrôle (partiel) de pages Web :

 

  • WebDeveloppeur et Firebugs sur Firefox
  • Webacceessility toolbar Internet Explorer
  • Color Laboratory pour contrôler la visibilité les couleurs
  • Colour Contrast Analyser (Juicy Studio) pour contrôler l’accessibilité aux contrastes
  • Colour Contrast Check (Snook)
  • Colour Contrast Verification Tool (HP)
  • GrayBit : Grayscale conversion Contrast Accessibility Tool
  • Luminisity Contrast ration Analyser (Juicy Studio)

Mais aussi tout simplement :

  • Désactiver les feuilles de styles de votre navigateur ( contrôle de l’enchainement des infos)
  • Utiliser les paramètres d’accessibilité de votre OS

Installer un lecteur d’écran :

Réf. http://certif.accessibiliteweb.com/accueil/base-de-connaissances/tester-ses-contenus-avec-un/article/installer-un-lecteur-d-ecran

NVDA

NVDA (NonVisual Desktop Access) est un lecteur d’écran gratuit et sous licence GPL, pour Windows XP et Windows Vista.
Ce lecteur d’écran s’appuie sur des synthèses vocales logicielles telle que Espeak, synthèse vocale mutilangue gratuite également. NVDA permet de travailler relativement aisément avec FireFox, Microsoft Word ou Outlook Express, notamment.Son approche strictement tournée vers l’utilisateur et non commerciale le rend unique dans son genre.

Je vous invite à consulter le site français qui lui est consacré : www.nvda-fr.org

Article « Nvda un mieux que jaws gratuit » : http://urlaccess.blogspot.fr/2010/06/nvda-un-mieux-que-jaws-gratuit.html

Jaws pour Windows

Jaws est un lecteur d’écran pour Windows XP et Windows 7. Il supporte les synthèses vocales logicielles et les plages tactiles braille. Il permet de travailler efficacement avec beaucoup de logiciel, des navigateurs internet aux traitements de texte, des environnements de développement tel qu’Eclipse sous Java ou C.

Accédez à la page Jaws pour Windows des utilisateurs francophones.

Les versions de Jaws sont destinées aux détenteurs de clés autorisées (environ 2000€).
Sinon, le logiciel s’exécutera en version de démonstration pendant 40 minutes.

http://www.eurobraille.fr/index.php?page=telechargement-jaws&title=T%E9l%E9chargement%20Jaws

 

VoiceOver sur iOS et MacOS

 

Le lecteur d’écran VoiceOver est intégré au système d’exploitation sur Mac et sur les appareils mobiles fonctionnant sous iOS. VoiceOver peut interagir avec le contenu à différents niveaux : l’application et ses barres d’outils, le contenu, un paragraphe spécifique, etc.).

Chaque Mac prend en charge plus d’une quarantaine des principaux afficheurs braille USB et Bluetooth de nombreux fabricants tels que HumanWare, GW Micro, Freedom Scientific, Handy Tech, Baum, Alva, APH, Eurobraille et Nippon Telesoft.

http://www.apple.com/fr/accessibility/voiceover/

 

Conclusion :

L’accessibilité est une démarche globale, le développeur bien guidé pourra intégrer certaines fonctionnalités d’accessibilité à moindre coût. Ces actions s’inscrivent dans démarche plus large qui est de rendre ses pages accessibles au plus grand nombre.
Il faut rappeler que c’est un droit universel, selon l’article 9 de la Convention relative aux droits des personnes handicapées adoptée en 2006 par l’Organisation des Nations Unies. La loi française handicap « pour l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées » a été votée le 11 février 2005.

 

Il faut ajouter le vieillissement de la population dont vous ferez un jour partie. Le risque d’être confronté à un handicap augmente avec l’âge : 75 % des personnes handicapées le deviennent au cours de leur vie. Le maintien dans l’emploi de personnes en situation de handicap est donc un véritable enjeu pour les employeurs et la société.

 

Photo : Johnny Depp

Photo : Johnny Depp dans Sleepy Hollow avec une grosse lunette.

Publié dans Design, Général Tagués avec : , , , , ,