Describe the bug
A request from a community member:
I wanted to bring something to your attention and provide feedback on an accessibility issue. I was recently taking a quiz on a website that is following GSA's digital.gov accessibility guidelines, but the design of the quiz made the content extremely difficult for me to read. Each quiz question answer had a black box around it which caused my eyes to lose focus. My eyes could only focus on the space between the boxes and not on the text. This caused the bottom half of the text to look wavy and make it unreadable. When I used a piece of paper to cover the black lines, I could read the text without issue. Attached is an example:
I did some research and discovered that this can be the experience of anyone who has a visual processing disorder (such as dyslexia). When I looked up the GSA guidelines, this design was used as a radio button component preview: https://designsystem.digital.gov/components/radio-buttons/#component-preview
I wanted to suggest that you reconsider using this type of design in the website guidelines as the black border makes the content unreadable for some. A better idea would be to use a grey shadow box instead of a border.
I appreciate your consideration in updating the guidelines. If you have any questions, please let me know!
Additional information
From ZD Ticket 🔒 - https://gsa-solutionshelp.zendesk.com/agent/tickets/12291.
Related issue
Issue #5490 will revert the border color to 3.4.0 styles. We should continue to use this main issue as the hub to discuss the impact of this (and other USWDS components) on users with visual processing disorders.
Describe the bug
A request from a community member:
I wanted to bring something to your attention and provide feedback on an accessibility issue. I was recently taking a quiz on a website that is following GSA's digital.gov accessibility guidelines, but the design of the quiz made the content extremely difficult for me to read. Each quiz question answer had a black box around it which caused my eyes to lose focus. My eyes could only focus on the space between the boxes and not on the text. This caused the bottom half of the text to look wavy and make it unreadable. When I used a piece of paper to cover the black lines, I could read the text without issue. Attached is an example:
I did some research and discovered that this can be the experience of anyone who has a visual processing disorder (such as dyslexia). When I looked up the GSA guidelines, this design was used as a radio button component preview: https://designsystem.digital.gov/components/radio-buttons/#component-preview
I wanted to suggest that you reconsider using this type of design in the website guidelines as the black border makes the content unreadable for some. A better idea would be to use a grey shadow box instead of a border.
I appreciate your consideration in updating the guidelines. If you have any questions, please let me know!
Additional information
From ZD Ticket 🔒 - https://gsa-solutionshelp.zendesk.com/agent/tickets/12291.
Related issue
Issue #5490 will revert the border color to 3.4.0 styles. We should continue to use this main issue as the hub to discuss the impact of this (and other USWDS components) on users with visual processing disorders.