L’accessibilité des images dans Drupal

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.

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.

• 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.

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"
}

Contactez-nous !

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

• Nous intégrons l'accessibilité numérique lors de la création de projets web Drupal.
• Nous réalisons des audits RGAA pour vous permettre de vous évaluer.
• Nous vous accompagnons dans l'amélioration de votre accessibilité numérique.

_{Crédit photo : Conservatoire de Bordeaux - 4ème Congrès mondial de saxophone, CC BY-SA 4.0 DEED}