5 Common Web Accessibility Mistakes

Find out 5 common web accessibility mistakes that web designers and developers make and why they’re a problem, so that you create more accessible websites that reach more users.

In this episode of Design Domination, I’m getting into 5 common web accessibility mistakes. If you’re a web designer or developer currently doing anything with website accessibility or if you’re looking to get into it, this is for you.

These are just a few of the types of mistakes I see when I do website accessibility audits. But I also want to give you some actual data about how common some of these mistakes really are, so I will share some data from WebAIM.

WebAIM tested the top-ranking 1 million websites. They found that 98% of them failed a basic test of accessibility. There were, on average, 51 errors per page, and 97.4% of home pages had detectable WCAG 2 failures.

They said these sites failed a “basic” test of accessibility. It’s a basic test because they tested it with WAVE, which is an automated tool. Automated tools can only detect — on average — about 25% to 30% of potential accessibility issues. Some detect fewer issues, some detect more. Some do better than others on certain websites than others.

But the point is these are shocking statistics. What’s sad about these statistics is that there are likely many other accessibility barriers on these websites that would be found only through manual checking, which is how you can find the majority of accessibility issues.

Mistake #1: Using low-contrast text

The first mistake is using low-contrast text. I see this all the time — not just on the web but also on printed materials and food packaging.

This happens to be one of the most common WCAG 2 AA failures that WebAIM found on those websites. It was found on a whopping 86% of pages they reviewed!

This is a huge problem because users with visual disabilities other than blindness — for example, low vision or color blindness — may not be able to read that content. But really it’s not just them.

A lot of people who don’t have a visual disability may have a problem reading content with low contrast. That could be body text on the page or it could be text within an infographic, for example.

I don’t have a visual disability, but I constantly come across instances of white text on a yellow background or white text on a light blue background that I can’t read. I probably used these colors together at some point in my career too. But if you want something to be read, you have to think about the colors you’re using together.

Mistake #2: Using no or incorrect Alt-text

Mistake #2 is using no or incorrect Alt-text.

A lot of web designers and developers — and their clients — don’t think about Alt-text. If they do, they may write inadequate Alt-text, meaning they don’t say enough about the image.

WebAIM found that Alt-text was missing on images on almost 61% of the pages they checked. This means that users of assistive technology, such as a screen reader, don’t know what is shown in those images. In fact, they won’t even know that those images are there at all.

Alt-text tells them what the images contain — what it’s a photo of, what any text in it says, for instance. So that means they are missing out on information because that information may not be anywhere else on the page for them to get it.

That’s not to say you want to add Alt-text to everything. It’s not a free-for-all. Some images should not have it and therefore will be ignored by screen readers.

The other thing WebAIM found was that of the images that had Alt-text, 9.6% had questionable or redundant Alt-text. In this case, that means that web users got incorrect information in the Alt-text (maybe an image was of a dog but the Alt-text said it was a cat, for instance). Or they got the same information more than once, which can be a nuisance.

Sometimes what I also see when doing audits is that there is too much Alt-text, that the author editorialized. That means sighted users get less information than those using a screen reader.

I also find sometimes that there is Alt-text on decorative images, which gets in the way of assistive technology users getting the information they need.

I talked all about Alt-text in episode 100, Alt-text for Images. If you want to understand more about it, be sure to check that out.

Mistake #3: Using too much ARIA

Using too much ARIA is another common mistake that web developers make with accessible websites.

WebAIM found that 60% of pages with ARIA had more errors than pages without ARIA. On average, there were 48 ARIA errors per page!

What this means is that web developers used ARIA incorrectly or they may have added it where they shouldn’t have.

In some cases, it’s like pulling out a rifle to shoot a fly. It’s just overkill. The developer may take 10 extra steps to add the ARIA when they could have just used the proper tag instead.

Again, when I do accessibility audits of websites, I see this all the time. In most cases, well-meaning developers overdo it, and this actually causes more accessibility issues. It makes the content less accessible.

In some cases, I’ve seen them unintentionally override content for users of assistive technology by adding ARIA.

It’s important to understand that not all content needs ARIA in order to be accessible. Don’t use ARIA unless you have to.

Mistake #4: Tagging headings incorrectly

Another mistake is tagging headings incorrectly. I often see web designers and developers — and their clients — formatting body text as headings to get it to look a certain way.

How it’s tagged matters, because that conveys meaning to users of assistive technology. Also, though, they can navigate page content with headings, which should be used for introducing new sections of content.

If a one-line paragraph, let’s say, is tagged as a heading, it changes its meaning.

WebAIM found that one in every 21 headings was improperly tagged and that there were skipped heading levels on 38.4% of all pages. They also found that 10.6% of pages had no headings.

If there is a lot of content on a page and no headings, someone using a screen reader would have a harder time finding the information they’re looking for on that page.

Mistake #5: Use of focus: outline: 0

One other mistake I see quite often is that :focus { outline: 0; } or none has been used in the CSS.

A lot of web designers and developers don’t like how the focus looks by default, so they remove it instead of restyling it. I get it! I used to do that too before I knew better.

But this is actually one of the single worst accessibility mistakes a web designer or developer can make. What this does is remove the focus indicator from interactive elements on a page — hyperlinks, buttons and form fields.

Focus is necessary to show sighted keyboard users where they are on a page. So when you remove it, those sighted keyboard users cannot tell what interactive elements they are on on a page.

More Web Accessibility Mistakes

I hope this has been helpful for you and that you think about how some of your design and coding choices affect others. Your designs can still look great. They will just be more functional and user friendly too.

You can find out more common mistakes that web designers and developers make when building accessible websites. Download my free guide, 5 Mistakes Developers Make When Building Accessible Websites at creative-boost.com/5mistakes. By the way, these are totally different mistakes than the ones I already mentioned here.

All data copyright © WebAIM, webaim.org.

Originally published as a podcast and transcript are available at https://creative-boost.com/5-common-web-accessibility-mistakes