Is your product accessible?

Photo by Joshua Tsu on Unsplash

You don’t need to be an experienced W3C WAI accessibility tester to start testing and improving your product.

Digital accessibility essentially just means ensuring that all users can use your app or website. The potential accessibility needs of your users can be divided into clear groups:

• Users unable to see everything on the screen.
• Users unable to comprehend certain information on the screen.
• Users unable to use a mouse.

For now, let’s just consider those users unable to use a mouse.

Nowadays nearly all websites are viewed by many users on a portable or mobile device. This is a well established trend and nearly all public websites are therefore “mobile friendly”.
Being mobile friendly directly affects your search engine ranking. For the last few years, Google’s indexer is said to only load pages in mobile screen size, so if you’re hiding any information from mobile users, you’re hiding it from search engines too.

Aside from indexing bots, real world users unable to use a mouse also include those with a temporary or situational disability, such as someone with a bandaged wrist or their arm in a sling.

Go and try using your product using JUST the keyboard. The ‘Tab’ key, up and down keys, and the Space bar, are all you’ll need to do this test. Remember you can press ‘Shift-Tab’ to go backwards.

• As you ‘tab’ through each of the actionable elements on the page, the current element should always be clearly indicated, your browser will often add an outline.
• You should progress through the elements in a logical order, from left to right and from top to bottom.
• Every link, input and button should be reachable by tabbing, and pressing the Space bar will action the selected element.
• If an action opens a new dialog box or popup window, you must be able to immediately progress through the elements in it, or else close it again and continue through the original page.

If you find you have ANY difficulty navigating or executing actions on the page, you have accessibility issues!

Well done, you’ve just done the hard bit - you’ve identified a problem for disabled users. Now fixing it is generally about understanding how to use modern HTML tags. If a particular tag cannot be swapped, for whatever reason, there are always the ARIA attributes to help you out.

Reference: Keyboard Compatibility | Web Accessibility Initiative (WAI) | W3C