Image Accessibility in Drupal

Digital accessibility

Digital accessibility involves designing a web project that is accessible to all users, regardless of their abilities: digital proficiency, cognitive or motor disabilities... In this context, special attention must be given to images so that they are properly accessible to users with specific needs, particularly people who are blind, visually impaired, or have cognitive disorders. To adapt our digital products, it is customary to provide alternative texts for each image. In this way, screen readers are able to interpret the images.

On the Importance of Alternative Texts for Images

When a screen reader encounters an image on a web page, it reads the associated alternative text to describe the content of the image to the user. This alternative text, known as "alt text," is therefore essential for conveying the information in the image to users who cannot see it. However, not all types of images require the same level of detail in their alternative text. There is an appropriate way to describe these images, a task that is the responsibility of the contributor and impacts digital accessibility.

Appropriate textual alternatives by image type

Text alternatives depend on the type of image presented. It is up to the contributor to use logic and put themselves in the shoes of someone visually impaired to determine whether or not an alternative description is useful.

Informative images: These are images that visually represent concepts or information. In this case, the alternative text should provide a concise description of the information conveyed by the image. For example, for a promotional image of an event displaying the name, place, and date, these pieces of important information should be included in the alternative description. For example, “4th World Saxophone Congress, Bordeaux, July 3–6, 1974.” However, if this information is presented elsewhere on the page, it is not necessary to add an alternative description. Doing so would be counterproductive as it would waste the user’s time and could become frustrating if it happens repeatedly.
Text images: Generally, if text is present on an image, it must be repeated in the alternative text—unless, again, the information is provided elsewhere on the page.

Decorative images: When the sole purpose of an image is to add visual decoration to the page without conveying important information for understanding the page, the alternative text must be empty (alt="") and the "aria-hidden" attribute must be set to true so that screen readers skip it. Be careful to avoid unnecessary alternative descriptions which would actually make the screen reader experience more cumbersome for users.
Functional images: For images used as a link or button, the alternative text should describe the function of the link or button (and not the image itself). For example, if the image links to a page with details about an event, you might use the description "Learn more about the event."
Complex images (charts, diagrams): A complete textual equivalent must be provided to present the data or information contained in the image.
Groups of images: If multiple images convey the same information, the alternative text for just one image should convey the information for the whole group.
Image maps: The alternative text for an image containing multiple clickable areas should provide an overall context for all the links, with individual alternative texts for each clickable area.

With Drupal, you have the option to mark images as "decorative

To prevent content moderators from forgetting to add alternative text for an image, it is common to make the "alt" field mandatory in an image field. However, this approach prevents moderators from intentionally leaving the "alt" field empty for decorative images. To address this issue, the Drupal module "Decorative Image Widget" was developed.

It allows site administrators to leave the alternative text field of an image empty simply by checking the "Decorative" box. If the box is checked, the alternative text will be disabled and the image will have an empty alternative text.

Use 'Decorative Image Widget'

Activate the 'Decorative Image Widget' module.
Edit the image field (any field of type 'Image' in a content type, paragraph, block + the IMAGE FIELD in the Media Image type), ensuring that alternative text is enabled but not required.
In the form display management, enable the option "force image to be marked as decorative when no alternative text is provided."

For images outside CKEditor

We will base our condition for adding aria-hidden on the value of the alt attribute as follows: If image.html.twig template, add the condition if alt is empty = add the attribute aria-hidden=true or role="presentation".

  {% if attributes.alt == '' %}
         
                                 or
        
    {% else %}
        
    {% endif %}

For CKEditor images

There is currently no way to force the addition of an alt attribute. This responsibility falls to contributors.

A custom JavaScript script will be added to set the aria-hidden attribute on CKEditor images with an empty alt.

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

Using the SVG Image Module

The contributed SVG Image module allows you to upload and use an SVG file with the standard image field by adding the SVG extension to the list of allowed image extensions in the image field settings.

If you use this module, you'll notice that in the form display settings for the image, the option "force the image to be marked as decorative when no alternative text is provided" has disappeared. This is because the module modifies the default image field widget and formatter. As a result, the option is no longer present in the widget. To address this issue, this patch must be added to the decorative image module to allow its integration with the SVG Image module. Once applied, the option will reappear and you will be able to use the module as usual.

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

Would you like to improve the accessibility of your Drupal site or carry out an audit?

Digital accessibility is one of our core commitments:

We integrate digital accessibility when creating Drupal web projects.
We conduct RGAA audits to help you evaluate yourselves.
We support you in improving your digital accessibility.

_{Photo credit:}_{Conservatoire de Bordeaux - 4th World Saxophone Congress,}_{CC BY-SA 4.0 DEED}