It may seem like an odd notion but website accessibility is incredibly important. We typically think of ADA (American Disabilities Act) compliance when it relates to a physical business but things have changed. Making sure your website is accessible can help you reach a wider audience, bring in more search traffic, and help you avoid an ADA lawsuit.
Table of Contents
Why is website accessibility important?
For me, it really breaks down to adhering to compliance and attracting a bigger target market. Compliance has been the main driving force to website accessibility.
The European Union (EU) has had website accessibility requirements for several years but there is definitely a growing trend in the US no as well. While there have been ADA speculation of the Department of Justice setting a clear standard, it appears the US is content to let court cases set the precedent.
The 12 main categories for ADA compliance have been the primary targets of lawsuits. This includes industries like banks, medical clinics, and restaurants.
It is definitely a higher priority for these types of businesses but definitely not one to sleep on for others. And even web designers struggle to understand this relatively new concept.
…over 50% of web designers or developers understand digital accessibility2021 survery by SmartBrief on digital accessibility
The other driver has been increased traffic. Approximately 20% of the population has an accessibility challenge impacting their use of websites.
That is a massive group of potential customers to leave on the sidelines. And if you’re looking for even more traffic, search engines use a lot of the same features to understand and interpret a website.
That being said, try to focus on actual users when implementing these features instead of search engines. We’ll get into that a bit more later.
Website Accessibility Testing Tools
There are a lot of great tools out and many are free to use. Here are my favorites:
- Wave: This is my favorite tool to test the accessibility of an individual web page. It is fairly accurate and gives articulate feedback. They also now have an accessibility Chrome extension that works very well.
- Tota11y: When you’re in development mode, this Chrome extension is pretty solid at on-the-fly testing. Wave is more accurate but this is a nice compliment to that tool.
- Contrast Grid: There are different standards for color contrast and it can be tricky balancing a brand’s color palette to meet these requirements. Luckily, this tool helps you sort it out quickly.
- Contrast Ratio: Handy tool if you want to quickly check a color contrast ratio along with font size recommendations for that particular color combo.
- ChromeVox: For vision-impaired users, this tool can let you step into their world a bit. It is a free screen reading Chrome extension that allows you to navigate a website by keyboard and sound only.
- WCAG: While more of a resource than a tool, WCAG sets the standard for website ADA compliance.
- AccessibilityOz: When you need a helping hand, this agency is 100% geared towards website accessibility.
- Experte: One downside of most tools is that they only test one page at a time. The Experte accessibility tool will test up 500 URLs at one time. It’s a massive time saver for larger sites.
While WCAG guidelines are the gold standard for compliance, this article can serve as a primer to getting started. We’re going to look at some key components that every site should check.
It is also good to note at this point there are three levels of compliance when using WCAG:
- Level A: This is basic accessibility with minimal requirements.
- Level AA: This is the most common and used as the standard around the world for businesses and municipalities.
- Level AAA: Very high standards used by some government websites and dedicated software.
One of easiest fixes is to ensure your heading structure follows a proper hierarchy. For instance, there should be only one title/H1 heading for a web page. Going deeper, H2 headings should only be followed by other H2 headings or H3 headings. A page should never jump from an H2 heading to an H4 heading. Here how a web page might break down when viewed fr
Color Contrast Ratio and Font Size
If we use the most common AA level, the contrast ratio for colors needs to be at least 4.5. This can vary based on font size. You can dip below this level for large font sizes but body text and smaller headings to meet the 4.5 bar.
I’d recommend not using text overlayed on an image. It makes it much much trickier to hit this standard. Due to the responsive design where the text moves in relation to the background image, it is difficult to even know the contrast ratio.
Also, it is good to note that hover states, like for buttons, need to meet this level as well.
To account for color blindness, try the Toptal simulator. It allows you to enter any URL from a website and simulate what it would look like for four different versions of color blindness.
Anchor text is the hyperlinked words on a website. Try to use descriptive words when adding a link. Using phrases like “learn more” or “click here” provides no context to what happens when a user clicks that link. If they are using a screen-reader tool, it can be terribly confusing. This is also one of those times that search engines piggyback off of accessibility to understand links and the relationship between different pages.
Labels and Landmarks
These are special features intended primarily for accessibility. They allow the website developer to clearly label what is the navigation menu or what is a button. This extra information helps not only the user but screen readers. They can even allow you to hide certain elements from the screen reader if it isn’t necessary. For example, you can use the attribute aria-hidden=”true” for a decorative icon to hide it.
It is very difficult to interpret a photo for screen readers. The ALT tag attribute helps resolve this issue. You can add in a simple description of the photo for both screen readers and search engines. That being said, this feature has been notoriously abused by SEO (Search Engine Optimization) experts to game Google’s algorithm. The much better long play is to use this feature for its intended purpose as Google is getting smarter all the time.
Likewise, a video can lose a lot of its impact if a deaf user can’t hear the content. Adding captions can help a ton. Research has shown that a vast majority of online users watch videos without sound. Captions can help all of these users plus search engines to understand the content.
Accessibility Tools for WordPress
The following are plugins, themes, and resources that are specifically for websites built with WordPress:
- Accessible Content Plugin: A free plugin that analyzes content in pages and posts in order to provide you feedback. It also adds in some features to help with accessibility compliance for images.
- Calendar Plus: A fast, lightweight calendar plugin built with accessibility in mind.
- CampusPress Flex Theme: A theme built for organizations that typically require accessibility, like schools or municipalities.
There is a depth of resources and other factors that need to be considered when making accessibility a goal and accessibility should be a goal for all websites. The trend is very clear. More compliance requirements and legal precedents are likely to come in the near future. Get ahead of the crowd by becoming compliant and welcoming in a new audience with an accessible website.