How to Make WordPress Websites Accessible

This post was guest written by Amber Hinds, CEO of Equalize Digital, a certified B Corporation specializing in WordPress accessibility. If you’d like to learn more about Equalize Digital and its services, visit the company website.

---

Millions of people around the world have a disability that affects the way they use the internet, and after a pandemic that increased the need for easy online shopping, food ordering, and even remote health care services, web accessibility is more important than ever. 

This guide to web accessibility discusses what accessibility is, why it matters, and how to make WordPress websites accessible, including identifying common problems through testing.

In this article, I’ll cover:

• What is web accessibility?
• Why accessibility matters
• What are some common accessibility problems?
• Testing WordPress websites for accessibility
• Keeping a website accessible

What Is Web Accessibility?

Simply put, accessible websites are websites that can be used by all people, including people who may not interact with the web through a typical keyboard and mouse set up, and those who have a variety of intellectual or physical differences.

Specific features must be built into websites to make them usable and understandable to people with disabilities. Auditory, visual, cognitive, motor, or learning disabilities require accommodations and website modifications to make them usable. Depending upon their situation, people with disabilities use various assistive devices, such as screen readers, to access websites.

Web designers and developers need to ensure that their websites’ content and functionality are perceivable, operable, understandable, and robust (POUR), meaning the content and functionality can be accessed and understood by all people on all devices.

Some examples of features that make websites more accessible include:

• closed captions and transcripts for video and audio files
• alternative text on images
• skip links to assist with keyboard navigation 
• appropriate color contrast to make text more readable

Why Accessibility Matters

Website accessibility makes an impact on everyone who uses the web. If your or your clients’ websites are accessible, this ensures everyone has equal access to online information, necessities, entertainment, shopping, and more, regardless of ability. 

But website accessibility isn’t just about good karma; it also has real-world effects on search engine rankings, new sales and website visitors, legal complications, and brand image. 

Search Engine Ranking

Making accessibility fixes can improve a website’s search engine ranking. Many accessibility features like alternative text on images and properly structured content with headings help both accessibility and search engine optimization (SEO). Ranking higher on a search results page can boost visibility with new clients or customers, leading to increased website traffic, conversions, blog or newsletter subscribers, and more. 

Increased Sales

The CDC states that, as of 2018, 1-in-4 Americans have a disability. Disabled Americans spent more than $200 billion in online discretionary spending annually. Accessibility features allow more people to find and use websites, increasing the opportunity for new sales, conversions, and repeat customers. When many websites are not accessible in today’s world, any accessible website will stand head and shoulders above the competition.

It’s Legally Required

All websites need to meet web accessibility standards set in the Americans with Disabilities Act (ADA). Under the ADA, a legal precedent has been set that establishes websites as places of public accommodation. This means that business websites, which are essentially their digital storefronts, need to be made accessible in the same way that a brick & mortar business’ building needs to be made accessible. 

Local, state, and federal government agency websites and any websites for federally funded organizations and projects must also meet the standards of Section 508. Additionally, there are a variety of state and international laws that require websites to be accessible. 

If a website does not meet the accessibility requirements laid out in these guidelines, the organization may be at risk of a lawsuit or, in some cases, a government fine. According to Usablenet, in 2020, 3,550 website accessibility lawsuits were filed in the United States. Maintaining legal compliance is an important part of doing business, and having an accessible website is one way businesses can meet their legal obligations.

Brand Image

Companies and nonprofits that take steps to make their WordPress websites more accessible show that they’re practicing social responsibility and affirm they want to make the internet a place for everyone. An organizational commitment to accessibility shows people that they are cared about in a profoundly human way, which builds loyalty and can elevate the brand’s image. 

What are Some Common Accessibility Problems?

My company, Equalize Digital, is an accessibility consulting firm that performs accessibility audits on websites for businesses, nonprofits, and government agencies. Across all of our tests, we see many accessibility issues repeated across all websites. These common issues are relatively simple problems to solve but are typically overlooked by developers, designers, and content creators. 

If you want to make sure that the websites you build or manage are accessible, start by checking for these issues:

Missing or Low-Quality Alternative Text

Alternative text is what screen readers use to describe an image’s contents or purpose to blind people. If the alternative text is left empty, a screen reader will either skip over it entirely or may read the image’s file name instead, which is unhelpful when the filename is a string of numbers or not descriptive of the appearance. Without proper alternative text, blind and visually impaired users will have no context or understanding of an image. 

Low-quality alternative text is problematic because it fails to describe the image accurately or is overly verbose and may cause confusion. Words and phrases like “picture,” “image,” “graphic of,” “image of” do not need to be added to alternative text because the screen reader will announce that an image or graphic is present.

If you have alternative text that is longer than 125-150 characters, some screen readers will cut off and stop reading. Adding periods within the alternative text can cause screen readers to pause, potentially confusing listeners or leading them to believe that the alternative text has ended.

Insufficient Color Contrast

In web design, color contrast refers to the measure of brightness between the background color and colored elements like text, buttons, or icons. The background and foreground colors have to have a ratio of 4.5:1 for standard-sized text to be considered sufficient. You can test your color contrast by entering the hexadecimal codes of both colors into a free color contrast checker.

Ambiguous Anchor Text

Anchor text is a clickable word or group of words on a web page. Clicking on anchor text might take you to a new website, download a document, open an image or video in a new tab. Anchor text is considered ambiguous if it does not make sense out of context or describe the purpose of the link. Some examples of ambiguous anchor text include “link,” “click here,” “learn more,” or “continue.” When adding links to content, it is essential that, if someone were to hear only the link independently (without any of the surrounding text), they would know where the link is pointing or what will happen when the link is clicked.

Missing Captions & Transcripts

Captions take spoken content and non-spoken content, like sound effects, music, or laughter from a video, and describe it via text. They appear on the screen during a video, so deaf and hard of hearing users can understand what is happening in the video. Additionally, captions must match the video’s timing. It’s important to note that captions have to be accurate; auto-generated captions need to be checked for accuracy.

A transcript is a written record of what is said in an audio clip or during a video. Transcripts provide a secondary means of understanding video content or audio files. They should be used alongside captions on a video so people can read the transcript rather than watch the video. This is important because not all users can read captions. Transcripts also provide the benefit of being easily translated into other languages and can help SEO.  

Testing WordPress Websites for Accessibility

The best way to test websites for accessibility is to perform a combination of automated, manual, and user testing. 

Automated Accessibility Testing

Automated accessibility testing is performed with AI scanning tools. There are many free and paid tools that can offer a variety of accessibility scanning features. When choosing an automated tool, here are some things to keep in mind:

• The size of the website. If you have a smaller website, a free tool may work for you. If you have a larger website, such as a site with a blog or eCommerce section with thousands of posts, a paid tool will likely be more appropriate.  
• How much support you need. If you need help finding accessibility errors on your website so that you can fix them, free tools can be a great option. If you need help understanding accessibility errors, or want someone else to fix them, try finding a tool with support options that are built-in or offered by the developers. Having support available is key if you’re new to accessibility remediation.
• User experience. Some automated accessibility tools can be used directly on your website, for example, through a browser extension or within the WordPress dashboard. Other tools require you to use an interface that is entirely separate from your website. If you would like to see accessibility errors while working on your website, choose a tool that offers on-site reporting. This makes it easier for you to continually check your website for accessibility while editing content on the site. 

Two popular free tools that can be used on any website are WAVE and Axe. These tools both have Chrome and Firefox extensions available for testing single URLs, one at a time, and paid plans that allow for bulk testing and additional features.

Accessibility Checker WordPress Plugin

If you want to run bulk accessibility scans and see reports in the WordPress dashboard, the WordPress Accessibility Checker plugin is the best tool. You can download the base version of the plugin for free on WordPress.org.

Accessibility Checker scans pages and posts for accessibility errors or potential problems and displays them directly on the edit screen for that page or post. These in-page reports are useful not just for checking to see if the website is accessible in the first place but also to monitor ongoing accessibility.

Accessibility Checker runs more than 40 different checks, including for the common problems identified above. The free version scans posts and pages, and the Pro version includes full site scans of custom post types and archive pages. Incorrectly flagged or reviewed items can be dismissed, allowing for tracking of accessibility fixes as they are made over time. It’s a great tool for agencies, developers, and WordPress users alike.

Manual Testing

Unfortunately, automated scans cannot identify every accessibility issue on a website—some problems can only be determined by a human being experiencing the website. After testing the website with an automated tool like Accessibility Checker, next perform manual testing to ensure all people can use it no matter which device they’re using.

The first step in a manual accessibility test is to confirm that users can fully navigate it with only a keyboard. Go to the front end of the website and use the tab and arrow keys to move through the site, making sure that you don’t lose your place as you go and that you can use all parts of the website. 

After keyboard testing, you can move on to screen reader testing. Screen readers are a type of assistive technology software that blind and visually impaired people use to understand web content. If you have a Mac, you can use the VoiceOver software that is built into your computer. If you do not have a Mac, you can download the free, open-source screen reader NVDA or purchase the popular screen reader JAWS. It is best practice to test your website with two or more screen readers as not all screen readers say the same thing for individual elements. 

To test your website with a screen reader, go to the page you would like to test, and then move through the page as you did during the keyboard navigation test, using tab and arrow keys only. Listen to what the screen reader says as you move through the page and flag anything incorrect or confusing. Listen for media files or sliders that play automatically and interrupt other content on the page. 

Once you have performed keyboard navigation and screen reader tests, you need to check all embedded or linked media files. Media files include videos, audio files, PDFs, .Doc or .XLS files, image or text sliders, and third-party widgets or iFrames. Ensure that people with a disability can access, interact with, and understand the content presented by all embedded or linked media files. 

User Testing

After automated and manual accessibility testing, it is recommended to perform user testing. User testing involves hiring real-world assistive technology users to test your website for accessibility errors. Typically, a test user is given a brief from a web developer with specific goals. The test user will then try to accomplish those goals and then provide feedback to the developer.  

You can hire individual test users through paid or volunteer programs, or find an accessibility firm that offers user testing services. 

Conclusion: Keeping A Website Accessible

It’s important to note that, like SEO, accessibility is an ongoing process that requires continual monitoring and modifications. To ensure your website stays accessible, create a plan to:

• Regularly monitor and test for accessibility errors using a tool like the Accessibility Checker plugin.
• Train web developers, designers, and content creators in web accessibility best practices. If you’re launching websites for clients, ensure that they know how to add content in an accessible manner post-launch.
• Remain informed of any accessibility guidelines or law changes you must follow. 

Taking these steps will help to ensure that your website stays accessible and that all people will have equal access to information, products, and services on the web, regardless of their abilities.