Common website accessibility issues (and how to fix them)
If you’re reading this post, you know website accessibility is a big deal. When we’re reviewing sites for accessibility problems, we come across the same few issues over and over again – and they only take a few minutes to fix!
Here’s the three most common issues we see and how to quickly fix them.
Low contrast ratios
Low contrast ratios are among the most common issues we see. Designers simply aren’t trained to check how much contrast certain elements have against each other.
Simply put: it’s easier for everyone, but especially people with visual impairments, to read text and see buttons that have a high contrast ratio.
WCAG AA accessibility standards require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Those numbers are hard to understand, but online tools like WebAIM’s contrast checker can make it much easier to visualize.
The button on the left has a contrast ratio of 2.87:1, while the button on the right has a contrast ratio of 12.71:1.
How to fix it
Check all your elements with the contrast checker and make sure that every piece of your site stands out from the colour behind it. Image backgrounds can be tough to judge, so minimize them where possible.
Images with important information
This is a common problem.
Let’s say you’re holding an event and you create a poster. On your poster, your graphic designer writes all the important information: The date, location, time, a phone number to call or text for more information.
When you post the event on your website, you simply post the event name and say, “come out to our event!” And the image of the poster.
Someone using a screen reader will not get any of the event details because there is no text of the event details for it to read.
How to fix it
Images are not a problem if they’re decorative – it’s only when they contain information that’s needed to convey understanding that they pose a problem.
One step you should be taking is to include alternative text (or alt text). Alt text is inputted when you upload a photo and it will be read by screen readers. Alt text should be used to describe what’s in a photo and can pass along important information about what users see on the page.
Another good rule of thumb is to always include anything important from an image in the text of your article.
Posting the event poster is fine – but make sure all the key information is also written into the body of your post. That makes the photo decorative, and not vital information for users.
Image Carousels (also known as sliders) present major accessibility issues. Any timed elements (that is, things which change based on timing, not clicks) need to be very carefully considered and meet a series of criteria in order to pass accessibility tests.
Basically, timed elements need to be fully controllable by the user to be considered accessible. The user needs to be able to change the speed, pause, and manually flip between them.
Frankly, almost no carousels do all these things… because by the time you include all those controls, they don’t look very nice – and that’s 90% of the reason people include them to begin with!
How to fix it
Get rid of the slider.
Carousels are bad, outdated design. Their click-through rate is terrible and they make your website look stuck in 2010.
Most often, they are on the homepage so you can feature several calls-to-action at once. Stop doing that, and decide what call-to-action you really want front-and-centre on your homepage.