Today is Global Accessibility Awareness Day, which exists as a yearly reminder that about 1 billion people in the world have some form of disability, and that among other things, digital products and services should be usable and accessible to all regardless of ability. In this post I’ll list three simple things you can do to increase the accessibility and overall quality of your digital product. There are many other things that should be done too, like manual accessibility evaluation and testing with real users, but this will get you started.

1. Use real buttons

If you’re about to add a click event handler on a span or div, stop. There are very rarely any good reasons for doing this. What you probably want is a button.

<button>: The Button element on MDN.

Yes, it is possible to turn a div or span into an accessible button, but you have to take care of keyboard accessibility yourself and make sure it won’t break later. Hardly worth it.

If you’re a code reviewer and you see a click event handler on something which is not a native interactive element, reject the pull request unless there is very good justification for making the code more complex than it probably needs to be, accessibility has been taken care of and there are tests in place to make sure it stays accessible.

If you’re building something more complex, follow the specs instead of reinventing the wheel:

• Get the basics on WAI-ARIA on MDN.
• Learn from my fellow Eficodean colleague Timo Övermark on Wednesday 25th of May, 2022 in a free webinar hosted by IAAP Nordic: WAI-ARIA – how and when to use it?
• See the brand-new ARIA Authoring Practices Guide published by the W3C.

2. Do keyboard testing

When you’re developing things for the web, you’re probably doing this on a keyboard. This means it should hardly take any extra time at all to start doing keyboard testing. Also consider whether you’d be able to use your fancy custom component with a keyboard without instructions. If not, add instructions or even better, fix the user interface. Follow WAI-ARIA specs for common components instead of inventing your own.

3. Do automated testing

Begin by installing a browser extension such as axe by Deque or Wave by WebAIM (or both). Automated testing can catch only a subset of accessibility issues, but it doesn’t mean it’s not useful.

When you’ve got the hang of using the browser extensions to fix issues, try adding automated accessibility testing to your pipeline for example with one of the many packages in the axe-core-npm repository.

Hope you found these tips useful, for more about Global Accessibility Awareness Day, see the official GAAD website.