The Forem team recently opened an accessibility issue that requires a Chromebook for further investigation.
This issue highlights a problem where content that is animated from an opacity: 0 is not read by the ChromeVox screen reader. ChromeVox is the built-in screen reading software for Chromebook.
Before a team member takes this issue, we wanted to open it up to the community for contributions.
We would love help from anyone who is interested in accessibility and has a Chromebook available for testing.
Details:
- This is a good first issue if you have never contributed to open source before.
- A potential solution is already included in the issue
- By helping us with this issue, you will help make Forem more accessible!
If this sounds like something you would like to work on please comment on the issue in GitHub👇.
Some animation transitions may make content inaccessible to ChromeVox users
#12939
Describe the bug
We recently became aware that ChromeVox (the in-built screen reading software for Chromebook) does not announce content that is set to have opacity: 0 (even if the opacity is then later transitioned to opacity > 0 via e.g. an animation) (See https://twitter.com/sarasoueidan/status/1365696682529333253)
We have a few instances in the app where we use opacity: 0 as the starting point for a transition - e.g. the sidebar-wrapper in articles.scss.
To Reproduce
I haven't actually been able to reproduce this as it seems ChromeVox is only available as the native screen reader on Chromebooks.
Expected behavior
Elements that fade or animate in should still be accessible to ChromeVox users. We can address this by adding a very small opacity to the elements that are currently 0, e.g. opacity: 0.00001
We would be happy to answer any questions you have there!
Top comments (2)
I have a chromebook coming in the mail today. Once I'm all set up and figure it out a little I would be happy to help out.
Wonderful! We would definitely appreciate it. If you have any questions once you get set up, hop in to the linked issue above and we can help you there. 🎉