Drupal
23/04/2024

L’accessibilité des images dans Drupal

L’accessibilité numérique dépend notamment de l’accessibilité des images. Dans cet article, nous verrons comment gérer l'accessibilité des images dans vos travaux de contribution. Puis, quelles sont les bonnes pratiques d'utilisation du texte alternatif dans Drupal, notamment avec la mise en place du module Decorative Image Widget.

L’accessibilité numérique

L'accessibilité numérique consiste à concevoir un projet web accessible à tous les utilisateurs, quelle que soit leur capacité : aisance numérique, handicap cognitif, moteur... Dans ce contexte, une attention particulière doit être portée aux images pour que celles-ci soient correctement accessibles aux utilisateurs ayant des besoins spécifiques, notamment les personnes non voyantes / malvoyantes ou ayant des troubles cognitifs. Pour adapter nos produits numériques, il est d’usage de fournir des textes alternatifs à chaque image. De cette façon, on permet aux lecteurs d'écran d'interpréter les images.

De l’importance des textes alternatifs pour les images

Lorsqu'un lecteur d'écran rencontre une image sur une page web, il lit le texte alternatif associé pour décrire le contenu de l'image à l'utilisateur. Ce texte alternatif, dit "alt text", est donc essentiel pour transmettre l'information présente dans l'image aux utilisateurs qui ne peuvent pas la voir. Cependant, tous les types d'images ne nécessitent pas le même niveau de détail dans leur texte alternatif. Il y a une manière appropriée de décrire ces images, un travail qui relève de la responsabilité du contributeur et qui affecte l’accessibilité numérique.

Les alternatives textuelles appropriées par types d'images

Les alternatives textuelles dépendent du type d’image présentée. Il revient au contributeur de faire preuve de logique et de se mettre à la place d’un mal voyant pour arbitrer si oui ou non une description alternative est utile.

  • Images informatives : Il s'agit d'images qui représentent graphiquement des concepts ou des informations. Dans ce cas, le texte alternatif doit fournir une description concise de l'information véhiculée par l'image. Par exemple, dans le cas d’une image promotionnelle d’un événement sur laquelle figure le nom, le lieu et la date, ces éléments porteurs d’informations importantes devront être écrits dans la description alternative. Par exemple, “4ème congrès mondial du saxophone, Bordeaux, du 3 au 6 juillet 74”. Cependant, si ces informations sont présentées ailleurs sur la page, il n'est alors pas utile d'ajouter une description alternative. L'effet serait contreproductif car l'utilisateur va perdre du temps, voire s'agacer si la situation se reproduit à plusieurs reprises.
  • Images de texte : De manière générale, si du texte est présent sur une image, celui-ci doit être reproduit dans le texte alternatif. Sauf si là encore l’information est présentée ailleurs sur la page.
  • Images décoratives : Lorsque l'unique objectif d'une image est d'ajouter une décoration visuelle à la page sans transmettre une information importante pour la compréhension de la page, le texte alternatif doit être nul (alt="") et l'attribut "aria-hidden" doit être défini sur true pour que les lecteurs d'écran la sautent. Attention donc à éviter les descriptions alternatives inutiles qui vont au contraire alourdir l'expérience utilisateur avec lecteur d'écran.
  • Images fonctionnelles : Pour les images utilisées en tant que lien ou bouton, le texte alternatif doit décrire la fonctionnalité du lien ou du bouton (et non l’image en elle-même). Par exemple, si notre image renvoie vers une page présentant l’événement en détail, on pourra utiliser la description “En savoir plus sur l’événement”.
  • Images complexes (graphiques, schémas) : Une équivalence textuelle complète doit être fournie pour présenter les données ou les informations contenues dans l'image.
  • Groupes d'images : Si plusieurs images transmettent une même information, c’est le texte alternatif d'une seule image qui doit transmettre l'information pour l'ensemble du groupe.
  • Cartes d'images : Le texte alternatif pour une image contenant plusieurs zones cliquables doit fournir un contexte global pour l'ensemble des liens, avec des textes alternatifs individuels pour chaque zone cliquable.

Avec Drupal, vous avez la possibilité de marquer les images comme "décoratives"

Pour éviter que les modérateurs de contenu oublient d'ajouter un texte alternatif pour une image, il est courant de rendre le champ "alt" obligatoire dans un champ d'image. Cependant, cette démarche empêche les modérateurs de laisser intentionnellement le champ "alt" vide pour les images décoratives. C’est pour résoudre ce problème que le module Drupal "Decorative Image Widget" a été développé.

Il permet aux administrateurs de sites de laisser vide le champ de texte alternatif d’une image simplement en cochant la case "Décorative". Si la case est cochée, le texte alternatif sera désactivé et l'image aura un texte alternatif vide.

Utiliser 'Decorative Image Widget'

  1. Activer le module 'Decorative Image Widget'.
  2. Éditer le champ d'image (chaque champ de type 'Image' dans un type de contenu, paragraphe, bloc + le CHAMP D'IMAGE dans le type Média Image), en vous assurant que le texte alternatif est activé mais pas  requis.
  3. Dans la gestion de l'affichage du formulaire, activer l'option "forcer l'image à être marquée comme décorative lorsqu'aucun texte alternatif n'est fourni".

Pour les images en dehors de CKEditor

Nous baserons notre condition d'ajout d'aria-hidden sur la valeur de l'attribut alt comme suit : Si image.html.twig template, ajouter la condition si alt est vide = ajouter l’attribut aria-hidden=true ou role="presentation".
 

  {% if attributes.alt == '' %}
        <img{{ attributes.setAttribute('aria-hidden' , 'true') }}/> 
                                 or
        <img{{ attributes.setAttribute('role' , 'presentation') }}/>
    {% else %}
        <img{{ attributes }} />
    {% endif %}

Pour les images de CKEditor

Il n'y a pas encore de moyen de forcer l'ajout d'un attribut alt. Cette responsabilité incombe aux contributeurs.

Un script JavaScript personnalisé sera ajouté pour ajouter l'attribut aria-hidden aux images CKEditor avec un alt vide.
 

function checkImageAlt(){
    let ckImages = document.querySelectorAll('img');
    if(ckImages.length > 0){
        ckImages.forEach(function(image) {
            if(!image.alt && image.hasAttribute("data-entity-type")){
                image.setAttribute("aria-hidden", "true");
            }
        })
    }
}

Utilisation du module SVG Image

Le module contribué SVG Image permet d'uploader et d'utiliser un fichier SVG avec le champ d'image standard en ajoutant l'extension de fichier SVG à la liste des extensions d'image autorisées dans les paramètres du champ d'image.

Si vous utilisez ce module, vous remarquerez que dans les paramètres d'affichage de formulaire pour l'image, l'option "forcer l'image à être marquée comme décorative lorsqu'aucun texte alternatif n'est fourni" a disparu. C'est parce que ce module modifie le widget et le formateur de champ d'image par défaut. Par conséquent, l'option n'est plus présente dans le widget. Pour contrer ce problème, ce patch doit être ajouté au module d'image décorative pour permettre son intégration avec le module SVG Image. Une fois appliqué, l'option réapparaîtra et vous pourrez utiliser le module normalement.
 

"drupal/decorative_image_widget": {
"Support Integration with SVG image module": "https://www.drupal.org/files/issues/2023-12-13/%20decorative_image_widget-support-SvgImageWidget-1.0.1.patch"
}

Vous souhaitez améliorer l'accessibilité de votre site Drupal ou réaliser un audit ?

Contactez-nous !

L'accessibilité numérique fait partie de nos engagements fondamentaux :

 


Crédit photo :