Image et figure, entre accessibilité et précision

Article écrit par Victor Darras

Bonjour à tous, aujourd’hui un sujet léger autour de l’intégration d’une image sur le Web. Nous allons revoir ou découvrir ensemble quelques possibilités de nos navigateurs pour afficher, mais surtout rendre accessible les images sur nos sites.

Contenu ou style ? Deux manières d’aborder les images

Il y a globalement deux manières d’afficher une image sur le web, en CSS pour le fond d’un élément, une bordure personnalisable ou même pour modifier le curseur de l’utilisateur… mais surtout en HTML, au sein d’une balise <img>.

La première solution doit rester exclusivement décorative notamment parce qu’elle ne comporte aucune information textuelle qui permettrait de lui donner du sens pour une machine ou un lecteur. Nous allons donc nous concentrer sur les images qui constituent — entre autres choses — le contenu réel de la page.

Plus récemment (et donc non disponible sur IE) nous avons la possibilité d’utiliser le tag <picture> qui, plutôt que de se substituer au tag <img/> vient l’englober afin de fournir des informations complémentaires. Le tag <picture> nous sert donc à contenir une image dont plusieurs tailles/résolutions ou même formats peuvent être déclarées au sein de tags <source>. Nous ajouterons par ailleurs un tag <img/> classique qui servira de solution de replis au cas où aucune des sources ne serait adaptée. Mais nous y reviendrons dans un futur article.

Dans la même veine, nous voudrions nous assurer d’afficher des informations dans le cas où l’image n’aurait pas été correctement chargée. Le fameux attribut alt="" est là pour ça. Il sert à décrire le contenu de l’image afin d’être perçu par les non ou malvoyant. Cet attribut est d’autant plus important dans le contexte de la balise <picture> vu plus haut puisqu’il sera attribuable à l’ensemble des images potentiellement déclarées avec nos <source>. Il est possible de définir une image avec un attribut alt contenant une chaine vide pour qu’elle soit ignorée par les lecteurs d’écran. Pourquoi pas ?! C’est un usage qui s’apparenterait à la solution CSS citée en début d’article, mais sachez que ce choix est totalement subjectif et peu mener à des incompréhensions.

Des infos plein la figure

Pour aller plus loin, en plus de permettre de commenter l’image avec du code, il est parfois nécessaire d’être plus précis, plus complet, d’ajouter un commentaire ou une légende à notre image. Pour ça nous avons à notre disposition un élément plus généraliste <figure> qui permet de contenir un ensemble de balise. Si vous connaissez <caption> qui nous permet de commenter/sous-titrer un tableau vous retiendrez aisément <figcaption> qui nous permet la même démarche dans un <figure>.

Utilisable avec toute sorte de média et donc les tags blockquote, audio ou même video. <figure> permet de mettre une emphase un contenu spécifique.

Prenons un exemple concret :

<figure>   <img alt="Illustration de Victor" src="avatar-victor.png" />   <figcaption>Victor DARRAS, Webdesigner et Intégrateur</figcaption> </figure> 

Ici nous avons donc un simple avatar, explicité par son contenu alt mais nous apportons plus de contexte avec son rôle dans le contenu global.

Comme dit plus haut, il est aussi possible d’utiliser <figure> pour afficher un morceau de code.

<figure>   <figcaption>Un filtre d'unicité en Javascript :</figcaption>   <pre>     function onlyUnique(value, index, self) {       return self.indexOf(value) === index;     }   </pre> </figure> 

Comme vous pouvez le remarquer, la position du figcaption n’a pas d’incidence, nous pourrions en changer l’apparence avec des CSS, mais sachez que par souci d’accessibilité, il faut qu’il ait du sens à la simple lecture.

Pour finir

C’est tout ce que nous verrons pour aujourd’hui, j’aurais pu aborder les attributs aria, la gestion des différents formats d’image pour être chargé le plus rapidement possible tout en étant vu par l’ensemble de nos utilisateurs ou encore la balise <picture>, mais je garde tout ça pour de prochains articles. Je vous incite à aller voir plus en détails les documentations des points que nous avons vu, figcaption ou figure afin d’avoir une vision plus complète encore.