Problem/Motivation

Accessibility standards/guidelines expect that decorative images will have alt="". As the Drupal field description texts are currently written, there is no mention of the distinction between decorative and meaningful images. This can easily result in a situation which is burdensome for both content editors and users of screen readers & other assistive technology.

Steps to reproduce

  • The business wants to build trust via the website and requires many human images (examples).
  • The site builder adds an image field to a content type.
  • The site builder, unfamiliar with accessibility, sees the checkboxes for Alt field enabled & required, reads

    "Short description of the image used by screen readers and displayed when the image is not loaded. Enabling this field is recommended"

    "Making this field required is recommended"

    and leaves the Alt field enabled and required.

  • The editor makes new content with the new image field, using an image of a person looking at a computer screen.
  • The editor, unfamiliar with accessibility, reads the required Alt field description

    "Short description of the image used by screen readers and displayed when the image is not loaded. This is important for accessibility."

    enters "person looking at a computer screen", and publishes. The editor makes 100 more pages like this.

  • The user of a screen reader visits the page, trying to understand the content of the page, but is impeded by hearing "person looking at a computer screen", which gives them no useful information, and wastes their time. The user of a screen reader visits 100 more pages like this.

Proposed resolution

I think we can provide a better experience for screen reader users and editors with one easy fix.

Minimal change:

Prepend 3 words: "For meaningful images," to "Short description of the image used by screen readers and displayed when the image is not loaded."

Wordsmithing:

"meaningful"

This is an attempt to summarize in a single word the w3c concepts of Informative and Functional,
https://www.w3.org/WAI/tutorials/images/informative/
https://www.w3.org/WAI/tutorials/images/functional/
and exclude the w3c concept Decorative.
https://www.w3.org/WAI/tutorials/images/decorative/

"displayed"

People who are blind aren't viewing a display, they're using a screen reader, so it would be better to say "read".

"accessibility"

People unfamiliar with accessibility would benefit from something more specific.
Reviewing the WCAG 2 terms:

  • Perceivable - already implied by "screen reader"
  • Operable - w3c term functional, above
  • Understandable - w3c term informative, above
  • Robust - already implied by "screen reader"

Proposed change: "accessible understanding or use of the image"

Amplified:

"For [meaningful|informative or functional] images, short description of the image used by screen readers and [read] when the image is not loaded. This is important for [accessible understanding or use of the image]."

Remaining tasks

Discuss wording which works yet avoids TLDNR.

User interface changes

Alt field description text above. Sentences to update include "used by screen readers" and "Making this field required is recommended" in >5 places in the core codebase.

API changes

-

Data model changes

-

Release notes snippet

Clarify alt text use for meaningful images.

Comments

RMattB created an issue. See original summary.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

alejandraaviles’s picture

alejandraaviles commented

Hi, I'm novice contributor, and tried to add this issue and realised there are already this 3 created issues for this:

- According to the WCAG guidelines decorative images should not have an alt-text but this is not possible, 2018 https://www.drupal.org/project/drupal/issues/3081475

- [META] Improve workflows for image alternative text, 2019
https://www.drupal.org/project/drupal/issues/2934405

- image field alt help/description should distinguish between decorative & meaningful images, 2021
https://www.drupal.org/project/drupal/issues/3230231

My proposed solution to this well known issue, will be to have added to the helper text that sits bellow the field
To alt text decorative images use two brackets ("")

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +wcag111

Tagging

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

RMattB’s picture

RMattB commented
Issue summary: View changes
RMattB’s picture

RMattB commented

@alejandraaviles
Thanks for the links!

proposed solution to this well known issue, will be to have added to the helper text that sits bellow the field
To alt text decorative images use two brackets ("")

That info is already in the help text, see #2934405-27: [META] Improve workflows for image alternative text

RMattB’s picture

RMattB commented
Issue summary: View changes
ll66382’s picture

ll66382 commented

Has there been any discussion of adding a "Decorative" checkbox to images?

mgifford’s picture

mgifford
he/him
Primary language English
commented

Adding a simple checkbox is a good idea. I believe it is becoming more common on other CMS too. It would be great to have a screenshot of what this could look like.

jan kellermann’s picture

jan kellermann commented

Here is a ready solution: https://www.drupal.org/project/decorative_image_widget

We would prefer this texts: https://www.drupal.org/project/decorative_image_widget/issues/3468387#co...

Here is another solution, but less used and stores information in key/value-store: https://www.drupal.org/project/decorative_images

Additionally you need a hook for a attribute role="presentaion":

/**
 * Implements template_preprocess_image().
 */
function hook_preprocess_image(array &$variables): void {
  if ($variables['attributes']['alt'] == '') {
    $variables['attributes']['role'] = 'presentation';
  }
}

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.