Accessibility issues are present on the vast majority of web pages and web apps we use, unfortunately.
A lot of the time, they’re pretty simple to fix if we know what to look out for.
Let’s discuss the 5 most common accessibility issues that are probably present on websites and apps you visit everyday:
1. Alt attributes: to be or not to be?
This is a very common error
In a nutshell: Only images that add contextual information should have alt attributes, for example:
- alt = “home delivery”, for a truck image that represents home delivery
- Images that add no contextual information should have empty alt attributes (all images need alt attributes, whether they’re empty or not!), so an image of a red car, with no surrounding text, should be labeled: alt=""
2. Page Language Not Set in HTML
This is a common error, but super easy to fix. Language should be indicated at the top of the HTML document, it helps screen readers read out the page to users with the right accent/in the correct language
3. Language options (eg. “EN or FR”) are not placed near the top of the page
Ideally, these should be at the top left-hand corner of the page, so right after screen reader users enter your website, they can hear the language options and change them before starting to browse
4. The visible focus indicator is turned off
The default visible focus indicator on web pages (that glowing blue outline) should never be turned off, it gives both sighted and visually impaired users cues as to where they are on the page
Fun fact: you can customize the visible focus indicator! Change the colour to match your brand guidelines if you prefer!
5. Unintuitive Tab Order
When a user tabs through a page, the order in which they land on items should pretty closely match the order in which items appear. A great way to check for this is tabbing through the page and trying to see if you land on components in a logical order, and if you're able to make it through the page.
These are the most common issues I see on websites, and most of them are quite straightforward to fix. We can start here. By tackling these issues, we can make the web more accessible for everyone.