amp-story: Visual progress bar missing an alternative

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

```

1. 
   
   
   


2. 
   
   
   

...

```

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.

```

...

```

```
.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)](https://www.w3.org/TR/WCAG21/#non-text-content)

## More information
* [MDN: ARIA live regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
* [The A11Y Project - How to: hide content](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/)

## Test data
Test date: January 2021