Accessibility Review for proposed Home page flag animation
Categories
(www.mozilla.org :: General, enhancement)
Tracking
(a11y-review:changes required)
a11y-review | changes required |
People
(Reporter: mholland, Assigned: ayeddi, NeedInfo)
References
(Depends on 3 open bugs)
Details
Description:
We intend to animate the flag in the "Welcome to Mozilla" section of the homepage and have a button to allow user control over play/pause functionality.
If JavaScript is disabled, the flag will be a static image.
If JavaScript is enabled, there will be a button in the section to control animation
If the user has reduced motion preference, the flag will be static on load. The button will read "Play Animation".
If the user has no motion preference, the flag will animate on load. The button will read "Pause Animation".
When the user clicks the button, the flag animation will toggle state (if playing, it pauses or if paused, it plays) and the button text will update to indicate the state that will apply on next click.
How do we test this?
The animation is on the first section in main landmarked content: https://www-dev.allizom.org/en-US/
When will this ship?
Tracking bug/issue: https://github.com/mozilla/bedrock/issues/15677 (we are still working out the details of the animation itself)
Design documents (e.g. Product Requirements Document, UI spec):
Engineering lead: Maureen Holland
Product manager: Dan Brown
The accessibility team has developed the Mozilla Accessibility Release Guidelines which outline what is needed to make user interfaces accessible:
https://wiki.mozilla.org/Accessibility/Guidelines
Please describe the accessibility guidelines you considered and what steps you've taken to address them:
Semantic markup
- we're using an HTML button with an accessible name (the button is icon-only on mobile, text is visible on larger screens)
- we've also added image role and titles for the static and animated SVGs
Dynamic content - the name of the button changes on click, we have added assertive live region to the button to announce this change
Describe any areas of concern to which you want the accessibility team to give special attention:
- The dynamic content change is of most concern. We're unsure if the announcement is too aggressive with "assertive" setting or if the content change itself is a bit confusing
Assignee | ||
Updated•2 months ago
|
Assignee | ||
Comment 1•2 months ago
|
||
Thank you for filing the review request - amazing work on the ways to make animations inclusive and give the control to a user. Thank you, team, for working on it!
There are just two bugs that I uncovered - the bug 1936862 is likely to be caused by the sizing or positioning of the main/nav elements. And the bug 1936865 is likely affected by the need of build-in the HCM support for the website. I added links to the HCM media query docs with examples as well as the Figma references (the latter one would require an SSO to access it, but the static copy of the main frame could be found in another bug). The first bug is not a blocker and the second one is most likely could be addressed on the site-wide level, so I'd mark the review as passed
- yet, we encourage the Websites team to resolve both issues before the release.
The Accessibility team will be happy to advice on the remediation work.
Assignee | ||
Comment 2•2 months ago
|
||
with the bug 1936870 that shows the lack of on-screen text label for minfied state of the button, I'd change the status to "changes required" - this fix would be a big curb cut for all users
Sorry for the delay here, we hope we have resolved the issues uncovered with the following changes (made in https://github.com/mozilla/bedrock/pull/15776):
- no longer using icon-only button on smaller screens, we keep icon and text for all screen sizes
- better support for HCM following advice on issue
- navigating backwards, the animation button will be promoted to a higher level when focused so it is always visible in that state
The changes are available on https://www-demo5.allizom.org/en-US/
Please let us know if these changes have met requirements, thank you!
Description
•