Our Takeaways From The 2021 WebAIM Million Analysis

After reading the 2021 WebAIM Million Analysis, here are our top 4 things to fix to make your website accessible.

WebAIM (Web Accessibility in Mind), is a non-profit organization based at the Utah State University, Center for Persons with Disabilities. Their goal is to help people and organizations make their websites more accessible.

WebAIM provides:

• Consulting, training, and website certification

• Web accessibility evaluation tools

• Instructional materials and resources around web accessibility

Every year since 2019, they’ve used one of their accessibility tools, the WAVE stand-alone API, to evaluate accessibility issues of the top million website home pages.

WebAIM hopes this data, combined with information about the websites’ industry sectors and content, will provide helpful insights to improve web accessibility.

Here at Bet Hannon Business Sites, the issue of web accessibility is fundamental to our philosophy on website design. We read the 2021 WebAIM report thoroughly. It’s encouraging to see that more website owners are paying attention to accessibility. However, the analysis proves there are still a lot of easily preventable issues on most websites.

Here are some of the biggest opportunities for web accessibility improvement, according to the 2021 WebAIM Million findings.

Low Contrast Text

According to the WebAIM analysis, a whopping 86.4% of all home pages low contrast text. On average, there were 31 instances of low-contrast text per home page.

“Color contrast” refers to the contrast ratio between text (or an icon) and its background. Choosing the wrong colors can make it nearly impossible for people with a visual impairment (like color blindness or low vision) to read. Common mistakes designers make include using white text on a colored background or using neon text on a white background.

For more examples of color contrast issues and more information on evaluating the colors on your site, check out our post: Website Color Contrast: How to Check For It.

Image Accessibility

Using “alt text” with images is crucial for your site to be easy for screen reader users to “read”.

Adding alt text is relatively easy and doesn’t require help from a web professional. However, 26% of images analyzed by the WebAIM analysis in 2021 were missing alternative text.

Beyond accessibility, adding alt text to every image on your site has its benefits. Search engines prioritize accessible websites, and search algorithms check for alt tags to help categorize web content and analyze accessibility. Alt text (also known as “alt tags”) can also make it easier to find images on your site because you’ll be able to search by keyword.

For more on the importance of great alt text and how to write it, check out this post: The Complete Guide to Writing Alt Text.

Form Labels

When you look at a form, you may think that a “label” just contains more information about the field being filled in. However, on the back end, “label” is an HTML tag that serves to link the tag to the field. It makes it easier for people to select the corresponding form field.

The WebAIM analysis found that nearly half of all form input on the internet’s top 1M websites were not correctly labeled. Thus, making the form difficult or impossible for people to use with a screen reader. (Interactive elements, like these, are usually the ones that tend to attract the most accessibility lawsuits, as we wrote in our post: How to Avoid Website Accessibility Compliance Lawsuits.)

What causes inaccessible form labels? Developers who build forms from scratch may skip the label field by using CSS to make the labels look a certain way or use inappropriate tags like “table” or other problematic HTML elements such as DIV and SPAN. Unfortunately, these approaches make it almost impossible for visually impaired people to use the form.

It’s a good idea to use a plugin that makes it efficient for website developers to create accessible forms. (We always use Gravity forms, as we explain in our post: Our Focus as a Gravity Forms Agency.)

ARIA usage

Accessible Rich Internet Applications or ARIA, is a set of attributes that make web content or apps more accessible.

ARIA is meant to bridge accessibility gaps for people using assistive technologies to navigate websites.

Unfortunately, the WebAIM Million analysis found that home pages with ARIA present averaged 41% more detectable errors, or 24 additional potential barriers per page, than those without ARIA.

This is troubling, as more businesses are turning to ARIA to make their sites easily accessible. The use of ARIA has increased 25% since the 2020 analysis.

In general, as we explained in our post WordPress Accessibility Plugins May Actually Make Your Site Less Accessible, trying to take shortcuts when it comes to accessibility may cause more problems. It’s better to hire someone who can make the site accessible than to rely on “band-aids” such as ARIA or plugins.

Moving Forward

The issues we highlighted don’t cover the full scope of the website accessibility issues covered in the 2021 analysis.

Other issues include things like:

• empty links (links with no text content to describe where the link goes)

• missing document language (the language attribute for a page tells screen reader users what language the page is in)

• empty buttons (there’s no text describing what the button does)

However, as the WebAIM report states, the majority of barriers belong to a handful of categories. If just a few of these issues were addressed accessibility would significantly improve for everyone.

For more on the WebAIM Million analysis, you can check out the full report here.

---