Accès rapide : Aller au contenu de l'article |  Aller au menu |  Liste complète des articles  |  Aide  |  Contact |
bandeau

Accueil > Aides pour les nuls > Images et alt (alternatives textuelles)

Images et alt (alternatives textuelles)

 La nécessité de l’attribut alt

Les personnes non voyantes ne peuvent pas voir les éléments graphiques et n’ont, par conséquent, pas accès à l’information qu’ils véhiculent. Pour consulter une page Internet, elles utilisent soit un navigateur textuel, soit une aide technique du type lecteur d’écran.

A l’heure actuelle, ces aides techniques interprètent uniquement les données textuelles présentes sur une page. Cela signifie qu’elles ne peuvent pas directement décrire les éléments graphiques.

C’est précisément le contenu de l’alternative textuelle qui sera restitué à l’utilisateur par son aide technique. D’où la nécessité d’un alt =’’

Si aucune alternative textuelle n’est associée aux éléments graphiques, les aides techniques vont néanmoins tenter d’afficher une information pour l’utilisateur. Dans la plupart des cas, c’est le nom de fichier de l’élément graphique qui est affiché, par exemple, « ar_000.jpg ». Cette information est dénuée de sens pour l’utilisateur. Il y a perte d’information.

Les utilisateurs n’ayant qu’une connexion à faible débit ou consultant un site Web via leur téléphone portable, peuvent être amenés à désactiver l’affichage des éléments graphiques dans leur navigateur afin de gagner du temps lors du chargement de la page. Concrètement, lorsque la page est chargée, aucun élément graphique n’apparaît. Ces utilisateurs ont donc aussi besoin de l’alternative textuelle.

Les utilisateurs qui ont un reste visuel et qui tentent de déchiffrer le contenu d’une image écrite en texte pourront tirer profit d’une alternative sur cette image. En effet, certains pourront, à l’aide de la souris, afficher l’alternative textuelle de toute image dont ils ne comprennent pas le contenu, en passant leur souris sur l’image.

 Alt avec spip

Il y a deux façons de mettre une image sur un site spip.
– soit avec l’outil en haut à gauche

JPEG - 20.8 ko
Outil en haut à gauche


– soit avec l’outil qui apparaît en bas à droite quand l’article est enregistré.

JPEG - 17.3 ko
Outil en bas à droite

Moi j’aime bien l’outil en bas à droite car, lorsqu’on clique sur l’image, celle-ci peut être largement agrandie si on veut mieux la voir. Inconvénient : alt affiche par exemple « Jpeg 351 Ko ». Et moi je voulais qu’elle affiche le titre de la photo. Après avoir beaucoup cherché, j’ai ouvert le dossier « modeles » qui se trouve dans le dossier « prive », sur le site distant. Là j’ai trouvé doc.html , emb.html, image.html.

 Modifier doc.html

Le fichier doc fourni par le logiciel spip comporte ceci à la fin :

<dt>[<a href="(#GET{url})"[ class="(#ENV{lien_class})"] title='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]'[ (#ENV{lien}|?{'',type="#MIME_TYPE"})]>]<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]' />[(#GET{url}|?{</a>})]</dt>
[<dt class='#EDIT{titre} spip_doc_titre'[ style='width:(#GET{width}|min{350}|max{120})px;']><strong>(#TITRE)</strong></dt>]
[<dd class='#EDIT{descriptif} spip_doc_descriptif'[ style='width:(#GET{width}|min{350}|max{120})px;']>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</dd>]

.

Alors j’ai modifié title et alt
puis j’ai modifié la ligne Descriptif pour y indiquer : cliquer sur la photo pour agrandir.

Voilà ce que ça donne :

<dt>[<a href="(#GET{url})"[ class="(#ENV{lien_class})"] title=''[ (#ENV{lien}|?{'',type="#MIME_TYPE"})]>]<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt='#TITRE />[(#GET{url}|?{</a>})]</dt>
<dt class='#EDIT{titre} spip_doc_titre'[ style='width:(#GET{width}|min{350}|max{120})px;']>#TITRE</dt>
<dd class='#descriptif spip_doc_descriptif'[ style='width:(#GET{width}|min{350}|max{120})px;']>Cliquer sur la photo pour agrandir</dd>

Ensuite j’ai enregistré le nouveau fichier doc.html
et je l’ai envoyé dans squelettes/modeles (si le sous dossier modeles n’existe pas dans squelettes, il faut le créer).

 Modifier emb.html

En fait je n’ai rien pu modifier car le modèle emb délègue le travail à cinq modèles nommés par le nom du groupe MIME du document concerné : text, image, audio, video, application.

Je suis donc allée voir : image.html

Il y avait ceci :

<dt>[<a href="(#GET{url})"[ class="(#ENV{lien_class})"] title='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]'[ type="(#ENV{lien}|?{#ENV{lien_mime},#MIME_TYPE})"]>]<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]' />[(#GET{url}|?{</a>})]</dt>[
<dt class='#EDIT{titre} spip_doc_titre'[ style='width:(#GET{width}|min{350}|max{120})px;']><strong>(#TITRE)</strong></dt>][
<dd class='#EDIT{descriptif} spip_doc_descriptif'[ style='width:(#GET{width}|min{350}|max{120})px;']>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</dd>]

Là encore j’ai modifié title et alt .

J’ai donc mis ceci :

<dt>[<a href="(#GET{url})"[ class="(#ENV{lien_class})"] title=''[ type="(#ENV{lien}|?{#ENV{lien_mime},#MIME_TYPE})"]>]<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt='#TITRE' />[(#GET{url}|?{</a>})]</dt>
<dt class='#EDIT{titre} spip_doc_titre'[ style='width:(#GET{width}|min{350}|max{120})px;']>#TITRE</dt>[
<dd class='#EDIT{descriptif} spip_doc_descriptif'[ style='width:(#GET{width}|min{350}|max{120})px;']>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</dd>]

Ensuite j’ai enregistré le nouveau fichier image.html
et je l’ai envoyé dans squelettes/modeles (si le sous dossier modeles n’existe pas dans squelettes, il faut le créer).

Sans doute ensuite aurais-je dû modifier text.html, audio.html, video.html, application.html. Ce sera pour une autre fois !

J’espère ne pas avoir fait de faute, en tout cas ça fonctionne !


NOTES:

Les modèles de spip, voir ici :

http://www.spip.net/fr_article3454.html et

http://www.spip.net/fr_article3715.html