GSA/centers-of-excellence

Accessibility: Image captions redundant with alternative text

Closed this issue · 0 comments

aduth commented

The affected pages include captioned images which use the same text for the caption and for the images alternative text. Assistive technologies would announce each of these, which may be confusing because it is identical repeated information.

Affected pages:

Steps to Reproduce:

  1. Navigate to https://coe.gsa.gov/2018/08/03/cx-update-4.html
  2. Activate a screen reader (Cmd+F5 on macOS for VoiceOver)
  3. Navigate content to the first image
    • VO-RightArrow (Ctrl+Option+RightArrow) on macOS
  4. Continue navigating content

Expected result: No repeated information
Actual result: Repeated text "Hollis, Oklahoma"

Relevant guidance:

https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html

The figcaption should not repeat the content of the figure, or other content within the primary document.

an alt is meant to convey the important information an image represents. A figcaption should provide context to relate the figure (image) back to the primary document, or to call out a particular piece of information to pay attention to. If a figcaption takes the place of an alt, then this creates duplicate information for sighted users.

Remediation Guidance:

One of the following could be considered:

  • Provide a more descriptive alternative text to describe the image, unique from the caption
  • Remove the caption
  • Update the caption to relate back to the original document in a way which is distinct from the alternative text
  • Consider the image as "sufficiently described by the adjacent text" and assign empty alt (decorative). This may not be advisable, since assistive technology may skip the image and announce only the caption text, which could be confusing.

Per HTML 5.2 Embedded Content, it may also be possible that if constructed as a <figcaption>, assistive devices may also be able to infer the caption text:

If the src attribute is set and the alt attribute is not [...] the user agent should [...] provide caption information for the image, derived as follows: If the image is a descendant of a figure element that has a child figcaption element, and, ignoring the figcaption element and its descendants, the figure element has no Text node descendants other than inter-element white space, and no embedded content descendant other than the img element, then the contents of the first such figcaption element are the caption information

Warning: It is worth doing more testing for how this behaves with real assistive technology.