5 WCAG Criteria Website Owners Miss That Cause 90% of the Accessibility Issues

Ron Zuidema
3 min readApr 11, 2023

--

You are probably unaware of the accessibility issues with your website.

Person who is blind walking with a cane and dog in cartoon style
Image by storyset on Freepik

I don’t mean to kick you down by saying that, just to make you a bit more aware. I have been working as a web accessibility specialist for 3 years now, and I still find new accessibility issues. But by keeping reading, as you are now, and working on it, we can make our websites more accessible for everyone.

So, by checking out these 5 areas, you know where to look next to improve the accessibility of your website.

Criterion #1: Info and Relationships

This criterion is most often violated on websites.

It’s about ensuring that visual information is programmatically correct so it can be interpreted correctly by other software, like screenreaders. A lot of users, with all kinds of disabilities may use this kind of software to assist them on the internet. So having this setup the right way is important for your visitors.

Make sure all elements are programmed according to the intention of the code.

Criterion #2: Non-text Content

Every non-text element, like informational images, needs a text alternative.

Images cannot be perceived by people without vision. This means you should always keep in mind that if you are using an image on the internet that holds any useful information, it has a textual alternative. Otherwise, people who rely on screenreaders cannot get the information.

Give all informative images a text alternative.

Criterion #3: Contrast

The lower the contrast between adjacent colors, the harder it is to see them.

When a color has a low contrast to the color next to it, it becomes harder to perceive the line. This is especially difficult to see for people with visual disabilities, but if the contrast is low enough, it should be easy for everybody. So if you want to be sure your visitors can see every separation, use enough contrast.

Give adjacent colors enough contrast from each other.

Criterion #4: Name, Role, Value

This one is about coding elements correctly, kind of like the first criterion, but for actionable elements.

For all actionable elements on the page, like links and buttons, the name, role, and values are available to software like browsers and screenreaders. This is important so that visitors to your website can make use of it. Otherwise, visitors cannot use the website correctly and get stuck.

Without correctly programmed actionable elements, interaction will not work on your website.

Criterion #5: Link Purpose

Your visitors need to know where a link leads to.

What do you think about a link without a clearly stated destination? Like a link with the text “read more”? For visitors with vision, it might be clear because the link is next to a new article, but for users of screenreaders, it’s not. All they hear is “read more” without any context.

Let the reader know where a link is going.

Accessibility can be a bit hard to grasp at first, but it’s very rewarding. Just imagine someone being able to surf your content instead of getting stuck and having to leave without succeeding.

By thinking of these criteria, you can make your website more accessible, more readable, and more enjoyable for everyone.

--

--

Ron Zuidema

Sharing insights about web accessibility | Helped over 100 individuals and organizations be more accessible | Web Accessibility Specialist