Improve donation frequency button accessibility - Githubissues

teacherfund / TeacherFund_next

A website to fund teachers discretionary spending because the government sucks at it

https://theteacherfund.com

MIT License

90 stars 87 forks source link

Improve donation frequency button accessibility #131

Closed meowwwls closed 5 years ago

meowwwls commented 5 years ago

While the previous fix improved the accessibility for keyboard users and most screenreader users, I discovered today thanks to an article by Scott O'Hara that using a visually-hidden class can still cause issues for some screenreader users and those who depend on touch. I've used the method he describes to make the radio inputs more accessible while still hiding them.

I also made a slight design change to something that was making the options inaccessible – the current option's text color. Using white on the yellow background made the contrast ratio fail on all levels: https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=F6B333

Keeping the dark grey text that the unselected option has passes WCAG AA for our use case. https://webaim.org/resources/contrastchecker/?fcolor=434343&bcolor=F6B333

vercel[bot] commented 5 years ago

This pull request is automatically deployed with Now. To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://teacherfund-git-fork-meowwwls-fix-a11y-frequency-btns.teacherfund1.now.sh