La guerre au bureau démystifié

bataille au paintball au bureau

La video suivante montre le process de création de l’image ci-dessus :

Dans cette vidéo l’équipe détaille toutes les étapes du photoshoot : décor, acteurs, effets, travail final sous Photoshop. En bef tout le travail méconnu pour une photographie réussie pour un usage de publicité ou plus large de marketing.

écrire l’attribut alt des images

Le premier commandement de l’accessibilité est de fournir une alternative textuelle pour chaque élément non-textuel (visuel, audio, vidéo).

Cet article est destiné aux utilisateurs d’un système de gestion de contenu (Content Management System en anglais) et aux webmestres.

Quelques clarifications pour débuter :

  • chaque image doit avoir un attribut alt
  • chaque attribut alt ne doit pas être renseigné par du texte
  • l’attribut alt n’est pas une légende de l’image
  • pour faire apparaître un texte au survol d’une image, il faut utiliser l’attribut title.

Alors comment écrire le texte de l’attribut alt ?

Réponse : en fonction de la raison d’être de l’image et pas nécessairement de son contenu.

Images informatives

Faire le test du téléphone : essayer de lire la page web à quelqu’un au téléphone, est-ce que l’information contenue dans l’image est suffisamment importante pour que vous la mentionnez ? Si oui, il faut écrire le texte de l’attribut alt. Si non, l’image n’a pas besoin de texte et son code sera <img src="image.jpg" alt="" />.
Exemple : page de présentation du Pdg avec une photo, cette image contient une information (à quoi ressemble le pdg), alors on écrira pour l’attribut alt : Photo de M X, Pdg.

Images décoratives

C’est facile, si l’image est purement décorative alors la balise alt doit être laissée vide <img src="image.jpg" alt="" />.

Encore mieux, le webmestre peut la retirer du code HTML et la mettre en image de fond dans la feuille de style CSS.

Images de texte

Répéter le texte de l’image.

Images complexes

Il s’agit des graphes et de tout ce qui ne peut se résumer en quelques mots, alors il faut écrire l’attribut alt du style « graphe montrant la croissance régulière du chiffre d’affaires sur ces 5 dernières années » et soit inscrire la description complète à côté de l’image ou ajouter à l’image l’attribut longdesc avec cette description en plusieurs lignes.

Précisions destinées principalement aux webmestres :

Images fonctionnelles

Le texte de l’attribut alt doit correspondre à la fonction de l’image. Pour des liens, il s’agit de la destination du lien (accueil, produit, contact), pour le bouton d’un formulaire à sa fonction (rechercher, annuler) et pour un logo (nom_de_la_société accueil si c’est un lien vers sa page d’accueil ou juste nom_de_la_société si c’est un lien vers un autre site web). pas besoin d’écrire le mot « logo ».

Images de layout

Elles devraient être remplacées par des feuilles de style, mais sinon laisser l’attribut alt vide.

Images structurelles

À remplacer par la feuille de style, mais si elles existent alors inscrire leur nature structurelle dans l’attribut alt (bullet, * ou -).

Image Maps

Chaque image a besoin de texte pour l’attribut alt, ainsi que les éléments AREA.
L’image principale pourrait être quelque chose comme « carte des arrondissements de Paris » et les élements AREA auraient un attribut alt selon la règle pour les images fonctionnelles.

Cet article est une traduction / interprétation de l’article Better Connected, Better Results: Alt Text de Ann du Royal National Institute of Blind People