Design comparison
Community feedback
- @bbsmoothdevPosted almost 4 years ago
One thing I would recommend is that you run your page through a basic accessibility tool like Axe, or Wave, Lighthouse, which will find the obvious issues. You've got a bunch of color contrast issues that need fixing. I know the style guide probably gave you the text/background colors to use. Typical designer, pays no attention to color accessibility. You'll need to darken the text color in order to have sufficient contrast with the background. Use WebAIM's color contrast checker to verify the contrast ratios.
The slider and monthly billing toggle do not have keyboard focus indicators so it is very hard to tell when the keyboard focus is on them. And the toggle switch is usually controlled by the space bar/enter key, not the arrow keys. Also, when I click on either the slider or toggle the keyboard focus should go there as well. Right now clicking on either one does not set the keyboard focus on them and I have to do extra Tabbing to get to them.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord