I believe that accessibility, as a part of usability, contributes on many levels to a quality product. Most of the time, it improves the general user experience and makes the app better for everyone.
The best way to ensure the high quality of a product in terms of accessibility is to follow the WCAG 2.1 for at least level AA.
With this post, I aim to create a getting started guide that will help you start with the topic and look for more information elsewhere. Basic knowledge of web development and web design is recommended.
When working with colors, make sure your combinations meet color contrast requirements. You can easily check the color contrast using a contrast plugin in your favorite design tool or you can check it online with WebAIM Contrast Checker.
- Don’t rely only on color to convey a meaning. Along with color, use an appropriate text or icon to communicate what a particular UI means.
- Think of automation. Maybe some useful SASS functions to ensure safe colors?
Make sure all non-decorative images have an alternative text:
<img src="" alt="One slice of pizza on a plate.">.
- Include a dot at the end of the sentence, it will make the screen reader sound more natural.
- Don’t repeat the same text in both the alt and the caption text.
If an image is purely for decorative purposes, then it needs empty alt tag:
<img src="decorative-image.jpg" alt="">
- Non-decorative icons should have proper
<span aria-label="See the details"></span>.
- Consider custom component when using
aria-labelto display the text to the user and explain the meaning of non-obvious icons.
- If an icon is purely for decorative purposes, include
TODO: Examples with
Tabkey for navigating the website (
Shift+Tabfor moving back).
- Proper focus order.
Enterkey for submitting the form.
Enterkeys for activating interactive elements (radio, checkbox).
- Arrow navigation (e.g. sliders).
Esckey for closing dropdowns, popovers, modals, and popups.
Skip to main content
Useful feature which allows the user to skip optional header, links etc. right to the main content of the website. It’s just a link, which appears on
href pointing to the ID of the element containing the main content of a website. Read more about skip links or see it for yourself here. Just reload the current page and click the tab on your keyboard as a first action when the page loads.
- Consider progressive enhancement approach.
- If for some very important reason (e.g. huge refactor) you can’t use native elements, consider
<span role="button"></span>with a TODO comment explaining that it has to be fixed in the future.
TODO: Explain the most common
aria-labels with examples.
See the post about web typography best practices.
This post is just the tip of the iceberg. I encourage you to read more about accessibility and apply its rules to your day-to-day work so the web will be a better place for everyone, one step at a time.
See the next steps at: Accessibility reading list.
Thanks for reading. If you liked it, consider sharing it with friends via:
Let's be in touch!
Don't miss other useful posts. Level up your skills with useful UX, web development, and productivity tips via e-mail.