Getting started with web accessibility

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.

Colors

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?

Images

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="">

Icons

• Non-decorative icons should have proper title or aria-label text: <span aria-label="See the details"></span>.
• Consider custom component when using aria-label to display the text to the user and explain the meaning of non-obvious icons.
• If an icon is purely for decorative purposes, include aria-hidden="true" attribute:

<span aria-hidden="true">my_icon</span>

Forms

• Forms best practices

TODO: Examples with sr-only or visually-hidden class.

Keyboard support

• Tab key for navigating the website (Shift+Tab for moving back).
• Proper focus order.
• Enter key for submitting the form.
• Space or Enter keys for activating interactive elements (radio, checkbox).
• Arrow navigation (e.g. sliders).
• Esc key 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 focus with 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.

Semantic HTML

Whenever possible, use semantic HTML to convey the meaning of the elements. Even if you rely heavily on JavaScript, don’t replace native elements e.g. buttons and links with generic elements like div or span.

• Consider progressive enhancement approach.
• If for some very important reason (e.g. huge refactor) you can’t use native elements, consider role attribute, e.g. <span role="button"></span> with a TODO comment explaining that it has to be fixed in the future.

ARIA labels

See the ARIA roles, states, and properties on MDN.

TODO: Explain the most common aria-labels with examples.

Fonts

See the post about web typography best practices.

Further reading

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.

Share

Thanks for reading. If you liked it, consider sharing it with friends via:

https://www.damianwajer.com/blog/web-accessibility/

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.

Don't you want to subscribe via e-mail?

See other ways to keep in touch.