amp-story: Visual progress bar missing an alternative

[TetraLogicalHelpdesk]

Visual progress bar missing an alternative

WCAG Level

Level A

Priority

Medium

Pages/screens/components affected

• Navigation
• RTL
• Video
• Audio - amp-story background audio
• Audio - amp-story-page background audio
• Audio - amp-story using amp-audio
• Animation
• Sharing
• Tooltip
• Page attachment
• Branching
• Consent
• Prerender - Image
• Prerender - Video
• AMP Story Player - Player
• AMP Story Player - AMP Story 360

Description

AMP Stories use a visual progress bar to indicate the total number of pages, and to highlight progress through the story so far.

This element is only conveyed visually, using styled <div> elements. In addition, the entire component is hidden from assistive technologies using aria-hidden="true".

User impact

If an image does not have an appropriate text description, someone who is blind and uses a screen reader will be completely unaware of the image's purpose. If the image conveys important information like a graph, or is critical to the operation of a control like a link or button, then a missing text description can prevent them from completing vital tasks.

In this case, users who cannot visually perceive the progress bar will have no idea how many separate pages are in a story, and how far they have progressed through it.

Required solution

Make sure that every information that is conveyed visually is also conveyed in an alternative for assistive technology users.

This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the website.

Implementation guidance

The current progress bar uses an aria-hidden ordered list.

<ol aria-hidden="true" class="i-amphtml-story-progress-bar">
  <li class="i-amphtml-story-page-progress-bar">
    <div class="i-amphtml-story-page-progress-value" style="..."></div>
  </li>
  <li class="i-amphtml-story-page-progress-bar">
    <div class="i-amphtml-story-page-progress-value"></div>
  </li>
  ...
</ol>

We recommend including a separate, visually hidden element, set up as an ARIA live region (with aria-live="polite"). This element can then be used to provide the same information as the visual progress bar, but in an alternative text-based format, which will be conveyed to assistive technology users. As the user navigates through the story, change the content of the element dynamically, which will result in an announcement by assistive technologies.

<ol aria-hidden="true" ...>
  ...
</ol>
<div class="visually-hidden" aria-live="polite">
  1 of 8
</div>

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Test procedure(s)

Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the website for instances of the same issue:

1. Check that all images/visual elements have appropriate alternative text.
2. Check that the alternative text acts as a suitable equivalent for the image/visual element.

Definition of done

Complete all of these tasks before closing this issue or indicating it is ready for retest:

• All issues identified within the test sample have been resolved.
• The rest of the website has been tested for the same issue.
• All issues identified throughout the rest of the website have been resolved or filed as new issues.

Related standards

• WCAG 2.1 Success Criterion 1.1.1 Non-text Content (Level A)

More information

• MDN: ARIA live regions
• The A11Y Project - How to: hide content

Test data

Test date: January 2021

[gmajoulet]

This is being implemented in #32703

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.