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.

Sign up for GitHub

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

Jump to bottom

🐛 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
Assignees
@mszylkowski
Labels
P1: High Priority Related to: Accessibility WG: stories
Projects
wg-stories Accessibility wg-stories Fixit

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
@patrickkettner patrickkettner transferred this issue from ampproject/amp.dev Feb 19, 2021
@newmuis newmuis added this to To do in wg-stories Accessibility via automation Feb 19, 2021
@gmajoulet gmajoulet self-assigned this Feb 22, 2021
@gmajoulet gmajoulet added this to To do - P1 in wg-stories Fixit via automation Feb 22, 2021
@newmuis newmuis mentioned this issue Feb 22, 2021
Closed
@mszylkowski mszylkowski assigned mszylkowski and unassigned gmajoulet Feb 25, 2021
@processprocess processprocess mentioned this issue Feb 26, 2021
Merged
@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)

wg-stories Accessibility automation moved this from To do to Done Mar 4, 2021
wg-stories Fixit automation moved this from To do - P1 to Done Mar 4, 2021
gmajoulet pushed a commit that referenced this issue Mar 8, 2021
@TetraLogicalHelpdesk @patrickhlauke
♿ TetraLogical: AMP Stories accessibility review / documentation (#32779
d99e411 
)

* 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>
@caroqliu caroqliu mentioned this issue Jun 8, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mszylkowski mszylkowski

Labels
P1: High Priority Related to: Accessibility WG: stories
Projects
wg-stories Accessibility
  
Done
wg-stories Fixit
  
Done
Milestone
No milestone
Development

No branches or pull requests
4 participants
@gmajoulet @newmuis @mszylkowski @TetraLogicalHelpdesk