WordPress Accessibility: A Guide to Creating Inclusive Websites in 2023

1.3 billion people experience significant disability. That's 1 in 6 of us. But only 2% of the world’s top million websites offer full accessibility leaving a large chunk of the population unable to use digital services.

That’s why website accessibility has gained significance over the recent few years.

Website accessibility means making your website usable for everyone, regardless of their physical or cognitive abilities. It's about ensuring that everyone has equal access to information and functionality.

In this guide, we’ll go over the importance of accessibility and how to make your WordPress site more accessible. By the end, you'll have a comprehensive understanding of WordPress accessibility and how to implement it on your sites. Let’s get started.

Understanding Accessibility on WordPress

Website accessibility is about inclusivity. It’s about ensuring that everyone, regardless of their physical or cognitive abilities, can use a website. This includes visual and hearing-impaired people who rely on assistive technology to browse the web.

The Four Key Concepts of Accessibility

Web accessibility focuses on four main ideas:

• Perceivable — People should be able to sense the information in some way, like seeing it or hearing it. To make your text content accessible, adding a “read aloud” option or a video tutorial is a great choice.
• Operable — Your site must be usable by all users. If it requires interactions that some users are unable to perform like really difficult captcha or links that are too small for users to click through properly, your site fails the accessibility test.
• Understandable - People need to comprehend the information and how the site works. This includes cleaning up your navigation menus, footer widgets, and your overall site layout to always have one focus.
• Robust - As technology changes, people should still be able to access the content. The site should stay accessible. If your site fails after an update to the browser, it falls short on the robustness scale.

While most people believe accessibility is only about content layout, you also need your hosting company to handle the added load of accessibility settings — read-aloud audio files, additional color settings, high-contrast settings, and others.

Laws and Standards for Website Accessibility

Web accessibility is not just a matter of good design: it's a legal requirement in many jurisdictions.

For example, in the United States, the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act of 1973 require that websites be accessible to people with disabilities.

In the European Union, the Web Accessibility Directive requires that public sector websites and mobile apps be accessible.

The World Wide Web Consortium (W3C) has developed a set of guidelines known as the Web Content Accessibility Guidelines (WCAG), which are widely accepted as the standard for web accessibility.

The current version, WCAG 2.1, includes guidelines for making web content more accessible to people with a wide range of disabilities. These include visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities.

Benefits of Improving WordPress Accessibility

Making your WordPress site accessible opens your site up to more people.

People with disabilities, older users, and anyone on a phone or tablet will have an easier time browsing your site. So you grow your audience who otherwise would have found it difficult to use your site.

Most changes that make a site accessible, are also good for SEO.

For example, using descriptive headings and alt text for images help search engines understand your content better. And the easier you make it for search engines to understand what’s on a page, the better your site ranks.

And with accessibility laws in place, if you do not meet the requirements, you open yourself up to lawsuits.

Built-in Accessibility Features in WordPress

WordPress is committed to making its platform as inclusive as possible. WordPress, by default, addresses accessibility in two ways:

1. by following web design standards and best practices
2. by continuously seeking improvements to address specific concerns as web technologies evolve.

1. Screen Reader Support

Screen readers are software programs that allow visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer or braille display.

WordPress supports screen readers by allowing users to add alternative text (alt text) to images.

2. Keyboard Navigation

An accessible WordPress theme can be fully navigated with a keyboard, including all the links, menus, forms, and buttons. It also has a 'skip-to-content' link, which allows users to bypass navigation and other elements at the top of the page and go straight to the main content. More on this later.

Some HTML elements can receive keyboard focus by default. These include interactive elements like links (<a>), form controls (<input>, <button>, etc.), and a few others. The tabindex attribute can be used to make an element focusable and to control its position in the keyboard navigation order.

Here's how it works:

• tabindex="0": The element is included in the keyboard navigation order based on its position in the document. It can be focused on both the keyboard and the script.
• tabindex="-1": The element can be focused by the script but is not included in the keyboard navigation order.
• tabindex="1" (or any positive number): The element is included in the keyboard navigation order before any elements with a lower (or no) tabindex. This can be used to override the default navigation order, but it's generally discouraged because it can make navigation confusing for users.

3. Color Contrast Options

Good color contrast makes your content more readable for everyone, including people with visual impairments or color vision deficiencies. A color wheel can help you skip the process of learning color psychology and pick the right colors that contrast each other.

Why Use Accessible Themes?

An accessible theme allows you to create a site that meets accessibility standards, such as WCAG 2.0 AA compliance, while still looking great and providing a good user experience.

Quick Tips for Selecting Accessible Themes

• A well-designed theme will help ensure that all features are usable by anyone, regardless of their level of sight or mobility.
• People with impaired vision also need to be able to adjust the font size of your site in order to read it clearly.
• High-contrast colors, such as black and white, can make it easier for people with impaired vision to read and understand the content on your site.
• Look for themes that are keyboard-friendly. Many people with disabilities rely on keyboards as their primary means of navigating websites.
• WCAG 2.0 AA compliance is an important factor when it comes to web accessibility.
• WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) are special HTML tags that help people with disabilities to easily navigate websites.
• You can do this by using an accessibility testing tool, such as the WAVE Web Accessibility Evaluation Tool.

The 5 Best Accessible Themes for WordPress

Here are some WordPress themes that are accessibility-ready:

1. Astra
2. OceanWP
3. Neve
4. GeneratePress
5. Blocksy

To find more such themes, you can go to the WordPress themes page and filter by accessibility ready.

The theme is just the starting point. You can further enhance its accessibility by customizing it.

This includes adjusting the colors for better contrast, using the Heading block to add headings and subheadings in a logical order, adding alt text to images, and ensuring that the theme can be fully navigated with a keyboard.

Most Important Accessibility Plugins for Any WordPress Site

You’ve picked a theme and are ready to take the next step. Plugins help you ensure you’ve covered all sides of accessibility. Let’s look at some of the most important plugins you must install and set up for your WordPress site.

1. WP Accessibility

When you need to ensure your site has no unexpected accessibility blockers, you pick this plugin. It adds a number of helpful accessibility features with a minimum amount of setup or expert knowledge.

Key features:

• Skip Links: Adds skip links with user-defined targets.
• Language And Text Direction: Adds language and text direction attributes to your HTML attribute if missing.
• Keyboard Focus: Adds an outline to the keyboard focus state for focusable elements.
• Long Description to Images: Uses the image’s “Description” field to add long descriptions.
• Labels: Adds labels to standard WordPress form fields (search, comments).
• Post Titles to “Read More” Links: It replaces the vague “read more” links with the title of the post to help screen readers announce what article the link goes to.
• Tabindex: Removes tabindex from elements that are focusable.
• User-Scalable: Removes user-scalable=no to allow resizing. This helps vision-impaired people to zoom in to the site to read text.
• Diagnostic CSS: Shows CSS-detectable problems in the visual editor or on the front end of the site.

2. One Click Accessibility

One Click Accessibility is a WordPress plugin that helps you take a step closer to creating a more accessible site for people across the spectrum.

Some of the key features of this plugin include:

• Font Resizing: Allows users to increase or decrease the font size for better readability.
• Highlight Links: Highlights the hyperlinks on the website to make them more noticeable.
• Grayscale And High Contrast: Provides options to change the website's color scheme to grayscale or high contrast, which can be helpful for visually impaired users.
• Keyboard Navigation: This enables users to navigate the website using the keyboard without additional configuration.

3. WP ADA Compliance Check Basic

WP ADA Compliance Check Basic evaluates content for web accessibility issues anywhere on your website and provides easy-to-follow instructions to fix them.

Key features:

• Comprehensive Error Checks: The plugin includes 81 individual error checks, far more than comparable solutions.
• Easy to Use: The plugin integrates seamlessly into your workflow, evaluating your website for web accessibility issues when content is published.
• Reports: Accessibility reports provide references and easy-to-follow instructions.
• Compatibility: Works with any website editor, including Gutenberg, Elementor, Beaver Builder, ClassicPress, and Divi.

4. Accessibility by UserWay

A premium plugin powered by AI, Accessibility by UserWay scans your website and offers advice on improving accessibility. It creates a simpler and more accessible browsing experience for your users while increasing compliance with WCAG 2.1, ATAG 2.0, European EN 301 549, ADA, & Section 508 requirements.

Key features:

• Compliance: Moves your site towards ADA and WCAG 2.1 compliance.
• Protection: Saves you from accessibility-related lawsuits by making your site accessible as per legal requirements.
• SEO Improvement: Boosts your SEO by making your site more inclusive and accessible to everyone.

Let’s talk about the importance of accessibility in terms of images.

The Importance of Accessible Images

Images enhance user experience but can hinder visually impaired users. Therefore, it's important to optimize images for accessibility.

Adding Alt Text

Alt text is a description of an image read by screen readers for visually impaired users. In WordPress, you can add alt text in the Image block settings when inserting an image.

Captioning Images and Videos

Captions provide a text version of audio content in videos, beneficial for deaf or hard-of-hearing users. WordPress allows easy addition of captions to images and videos in the block settings.

Providing Audio Descriptions and Transcripts

Audio descriptions verbally describe visual elements in videos, aiding visually impaired users. Transcripts are text versions of audio content, essential for deaf or hard of hearing users. You can use an audio transcriber like Temi or Otter to speed up the process.

Designing Accessible Navigation and Menus

Accessible navigation allows all users to easily find and access the content they need. When navigation is not accessible, it can create barriers that prevent people from using a website effectively.

For instance, a visually impaired user might struggle to navigate a website that relies heavily on visual cues. Similarly, a user with motor disabilities might find it difficult to use a website that requires precise mouse movements.

Best Practices for Accessible Menus

When designing accessible menus, it's important to follow certain best practices:

• Clear and Simple Navigation: Avoid complex dropdown menus that can be difficult to navigate with a keyboard or screen reader.
• Use of ARIA Roles: Accessible Rich Internet Applications (ARIA) roles help assistive technologies understand the purpose of different elements on a page. For instance, the 'navigation' role can be used to identify a section of a page that provides navigation links.
• Keyboard Accessibility: Ensure that all menu items can be accessed using the keyboard alone. This is important for users who cannot use a mouse or touch screen.
• Visible Focus Indicator: A visible focus indicator helps users know which element is currently selected or active. This is especially important for keyboard users.
• Link Text: The text of your links should be descriptive and make sense out of context. Avoid vague anchor text like "click here".
• Consistent Navigation: Keep your navigation consistent across all pages. This helps users know where to find things and what to expect.

Breadcrumb Navigation

Breadcrumb navigation is a chain of links, usually displayed at the top of a page, that shows the path you've taken to arrive at the current page.

Breadcrumbs are useful for users to understand their location within the site's hierarchy, and they can also help users navigate back to previous pages.

Skip Links and Focus Indicators

Skip links allow users to go directly to the main content of a page. This is particularly useful for keyboard and screen reader users, who would otherwise have to tab through every link in the navigation every time they visit a new page.

Focus indicators, on the other hand, are visual cues that show which element on a page currently has keyboard focus. They're essential for keyboard users to know where they are on a page and what action they can take next.

Creating Accessible Forms

Some key form accessibility considerations include using form field labels to describe the purpose of all fields, indicating required fields, providing autocomplete options when relevant, and ensuring all text color combinations within the form have a sufficient contrast ratio.

Three popular WordPress form plugins that prioritize accessibility are:

• Gravity Forms: This plugin has made significant accessibility improvements, including offering full WCAG 2.1 AA compliance out of the box.
• Formidable Forms: Formidable Forms is a highly customizable and user-friendly plugin that allows you to add proper support for accessibility without overcomplicating the setup.
• Contact Form 7: This free and open-source plugin doesn't advertise its accessibility features, but owing to its customizability and flexibility, you can build fully accessible forms with a little bit of code.

Testing and Auditing Accessibility in WordPress

After you implement the different accessibility measures, how do you ensure they’re working well? You need tools to test the accessibility of a website.

Automated Accessibility Testing Tools

Automated accessibility testing helps ensure that your WordPress site is accessible to all users. Here are some of the top automated accessibility testing tools that can be integrated into your existing testing suite:

• WAVE Accessibility Checker WAVE helps you identify many accessibility and Web Content Accessibility Guideline (WCAG) errors.
• Tenon.io: Tenon.io is an API that can add accessibility tests to pretty much any automation framework you might already be using. Tenon was also designed to test against WCAG.
• Automated Accessibility Testing Tools (AATT): Developed by PayPal, AATT is a browser-based accessibility testing tool that integrates with automation frameworks like PhantomJS, SeLion, and NemoJS.

Manual Testing Techniques

While automated testing can give you technical details, manual testing shows you accessibility issues from a user’s perspective. Ask your testing team to browse different pages of your website and identify glitches or issues that may hamper website accessibility.

Once you’ve thoroughly researched within your team, it’s time to take the website out into the real world. You need a group of people with different disabilities to browse your site and identify all the issues they notice.

Creating Accessible Content in WordPress

Creating accessible content in WordPress involves several key aspects, including writing accessible headings and subheadings, formatting text for readability, using proper link text and descriptions, and making tables accessible. Let's delve into each of these aspects.

Writing Accessible Headings and Subheadings

Headings and subheadings play a crucial role in structuring your content and making it accessible. They provide a hierarchy that helps users, especially those using screen readers, understand the organization of the page. Here are some tips for writing accessible headings and subheadings:

• Use Headings In A Logical Order: Start with H1 for the main heading, followed by H2 for subheadings, H3 for sub-subheadings, and so on. Avoid skipping heading levels (for example, don't jump from H2 to H4).
• Make Headings Descriptive: Headings should give an idea of the content that follows. Avoid vague headings like "Section 1" or "Part A".
• Limit the Use of H1: There should only be one H1 heading per page, typically used for the page title.

Formatting Text for Readability

The way you format your text can significantly impact its readability. Here are some tips to improve formatting:

• Use Short Paragraphs: Long blocks of text can be overwhelming and difficult to read. Break your content into short paragraphs of 2-3 sentences each.
• Use Bullet Points And Numbered Lists: These can make your content easier to scan and understand, especially for complex information or step-by-step instructions.
• Use Bold And Italics Sparingly: These can be used to emphasize certain points, but overuse can make your content difficult to read.

Using Proper Link Text and Descriptions

The text you use for your links can affect the accessibility of your content. Here are some tips for using proper link text and descriptions:

• Use Descriptive Link Text: The link text should give an idea of where the link will lead. Avoid vague link text like "click here" or "read more".
• Avoid Using URLs As Link Text: URLs can be long and confusing when read out by screen readers. Follow the first tip.
• Provide Context For Links: If the link text isn't self-explanatory, you can provide additional context in the surrounding text.

Making Tables Accessible

Tables can be a great way to present complex information, but they can also be challenging for screen reader users if not properly formatted. Here are some tips for making your tables accessible:

• Use A Simple Structure: Avoid merged cells or nested tables.
• Use Table Headers: Table headers provide context for the data in the table.
• Provide a Caption: Add a caption to provide a summary of the table.

Implementing a Responsive Design for Accessibility

Responsive design ensures that your website's content and layout adapt to various screen sizes and orientations. So no matter what device a user visits your website from, they get a similarly great experience.

Techniques like setting the max-width property of images and HTML elements to 100% in CSS, using the picture element or the srcset attribute in the img element can help make images responsive.

Most new WordPress themes are responsive by default and you do not have to make any manual adjustments to your site.

The Impact of Accessibility on Website Performance

Accessibility is about simplicity and inclusivity. It's intertwined with SEO as both aim to make content accessible to all users.

An accessible website is more compliant with ADA & WCAG standards. Google's 2022 Page Experience Update factored in user experience metrics like LCP, FID, CLS, and other core web vitals into its search algorithm.

WordPress Accessibility Resources and Communities

There are numerous resources and communities dedicated to WordPress accessibility. These platforms provide valuable information, support, and training to help you make your WordPress site more accessible.

• Official WordPress Accessibility Resources: The WordPress Codex provides a wealth of information on accessibility, including guidelines, techniques, and best practices.
• Online Communities and Forums for Accessibility: Websites like Digital A11Y and Equalize Digital host accessibility meetups and communities where you can connect with other professionals, share knowledge, and learn from experts.
• Accessibility Training and Events: Websites like Section 508 and Interaction Design Foundation offer accessibility training courses. You can also attend accessibility events and conferences like the Design Accessibility Summit to stay updated with the latest trends and developments.
• Accessibility Blogs and Articles: Blogs like Usability Geek, Usability.gov, W3.org, and many others cover accessibility in detail and help you keep up with the changes in the field.

Embracing Accessibility for a More Inclusive Digital World

Making your website accessible opens doors to more people. It's not as hard as it seems and is absolutely worth it. Accessible sites are easier for everyone to use, get better search rankings, and are legally compliant too.

The key things are: learn accessibility basics, bake them into your website design, and keep testing and improving your website as new technologies are introduced.