Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 amp-story-interactive accessibility issues #32751

Closed
TetraLogicalHelpdesk opened this issue Feb 19, 2021 · 1 comment
Closed

🐛 amp-story-interactive accessibility issues #32751

TetraLogicalHelpdesk opened this issue Feb 19, 2021 · 1 comment

Comments

@TetraLogicalHelpdesk
Copy link
Contributor

🐛 Bug Report

Current behavior

While <amp-story-interactive> was not part of our recent accessibility assessment, we noticed (while going through the various parts of the documentation) that these have some serious fundamental issues:

  • none of the controls for quizzes (the buttons for binary polls or interactive polls) are keyboard-accessible - they can't be focused nor selected when using a keyboard
  • the polls themselves and the various options are not announced as being actionable by assistive technologies
  • when polls update to show results, this change is not announced by assistive technologies

Based on briefly going over https://amp.dev/documentation/components/amp-story-interactive/?format=stories and the demos at https://amp.dev/documentation/examples/components/amp-story-interactive-quiz/preview/?format=stories and https://amp.dev/documentation/examples/components/amp-story-interactive-poll/preview/?format=stories

Expected behavior/code

The way these components are rendered should be reviewed. The individual options need to be keyboard-accessible - suggest using something like a <button> element for each of these. The entirety of the quiz/poll should be wrapped in a <fieldset>, and the overarching question marked as a <legend>.

Changes that happen dynamically (e.g. results being shown) should use an ARIA live region to ensure they are announced by assistive technologies.

Reproduction procedure

Please provide the steps to reproduce the problem:

  1. Navigate to either https://amp.dev/documentation/examples/components/amp-story-interactive-quiz/preview/?format=stories or https://amp.dev/documentation/examples/components/amp-story-interactive-poll/preview/?format=stories
  2. Attempt to complete the poll/quiz using a keyboard (Tab / Shift+Tab to move focus, Space or Enter to activate a button/option
  • Chrome / Windows
@mszylkowski
Copy link
Contributor

This was fixed in #32957 and #32969 so closing this issue.

Issues fixed:

  • Controls are keyboard accessible
  • Options are announced as buttons by screen readers
  • Changes are announced by screen readers (using aria-live)

gmajoulet pushed a commit that referenced this issue Mar 8, 2021
)

* Add note about `amp-story-360` being inaccessible to mouse/kbd users

* Typo "subsect" > "subset"

* Add alt where missing, tweak existing alt text

* Reword localization documentation to make it clear it should always be done

* Expand alt for amp-story tag hierarchy illustration

* Add note strongly suggestion supports-landscape

* Add note about judicious use of animations

mirrors note in amp.dev

* Placeholder alt="..." in sample code, better alt on documentation images

* Add callout about content order

* Reinforce idea that videos should have subtitles/captions

* Add alt text to images

* Add note about interactive component lacking accessibility at this time

See #32751

Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants