Story accessibility improvements

[newmuis]

Description

Reported on behalf of a publisher:

1. Screen readers won't read beyond the first slide even after tapped/clicked to advance.
2. No slide/page numbers provided.
3. In desktop mode, the back button on the first slide is interpreted as “Unlabeled 0 button”

Reproduction Steps

Open https://preview.amp.dev/documentation/examples/introduction/stories_in_amp with a screen reader, and observe aforementioned issues.

As a note, I am not able to reproduce (3) from above.

Relevant Logs

No response

Browser(s) Affected

No response

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

No response

[newmuis]

1. This is caused by the fact that it is not possible to focus the active amp-story-page. I think we could just add a tabindex="0" to the active page (and remove it from previously active pages as the user switches pages)
2. We don't currently read out the progress bar (or any state derived from the progress bar). Not sure exactly the expected UX here (e.g: visually you can't strictly tell the page number; a story is allowed to have an indeterminate number of pages via live stories). I don't have a recommendation for the best ARIA/web APIs to use for this. Maybe role="progressbar" on the progress bar?
3. I am not able to reproduce this. The previous button is not selectable when on the first page, so I can't get it to read out. If I go forward, then back to the first page, it reads "previous page; disabled button," which seems appropriate.

[calebcordry]

I found a couple more items during a self assessment that would be good to add. LMK if you prefer I create a different issue for these.

• Add ability to pause auto-advancing pages while using a screen reader
• Add ability to navigate to next story while using screen reader

I think both of these could be invisible buttons that appear when a screen reader is used and focuses on the button.

[calebcordry]

We have done some work to improve the SR experience. My latest findings:

1. Screen readers won't read beyond the first slide even after tapped/clicked to advance.

I am unable to reproduce this. I am able to navigate to all page's content using both voiceover and talkback.

2. No slide/page numbers provided.

This is still outstanding. I think this needs UX work to determine the right approach. For numerically sensitive content pubs are able to add their own page indication using aria attrs but we may still want a systemic approach at some point.

3. In desktop mode, the back button on the first slide is interpreted as “Unlabeled 0 button”

I am also unable to reproduce on voiceover or talkback.

4. Add ability to pause auto-advancing pages while using a screen reader

Fixed by #37582

5. Add ability to navigate to next story while using screen reader

Turns out we already provide a way for players to do this in a SR friendly way. Since the format has no knowledge of if a story will be available to swipe to, this seems like the right layer to have this feature.

In summary I believe the only remaining suggested improvement from this issue is (2), but that one may need some UX input as it is not clear the best approach. If anyone finding this issue has ways to reproduce the issues that I was unable to reproduce please leave a comment.

[stale]

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.