Nucleus Research recently conducted a survey of websites spanning a variety of industries and found that approximately 70 percent of sites are inaccessible to persons with disabilities (1). This includes people who are blind or have low vision, deaf or hard of hearing, or have a cognitive disability, to name a few. With WordPress estimated to power over 35 percent of websites worldwide (2), one can assume that at least some portion of this 70 percent of inaccessible websites are WordPress-powered. This means WordPress has a significant impact on the overall state of web accessibility.
WordPress is actually very accessible out of the box. While the front-end is perfectly capable of being accessible, downstream development activities – including selected themes, plug-ins, ongoing content updates and more – make WordPress highly vulnerable to accessibility regressions. So let’s explore some tips for building and maintaining a WordPress site that’s as accessible as possible:
Use an Accessible Theme & Test it: WordPress themes control how your website looks. Unless specifically stated otherwise, you should never assume that any given theme is accessible. Luckily, the WordPress accessibility team has a list of 92 free themes (3) in the WordPress repository that have been vetted and tested for accessibility. Premium themes typically put more attention to accessibility compared to free themes. Unfortunately, even with premium themes, there are no checks and balances to ensure a theme that is advertised as “accessible” or as complying with WCAG guidelines actually does so.
With any theme (free, premium or a custom theme you develop yourself), the process needs to be more than just “install-and-go.” You should do your own testing and not just take the provider’s word for it. There are several best practices to consider, including:
- Ensuring adequate color contrast (making it easier to distinguish text and interface elements, for people with visual disabilities).
- Keyboard navigation (making sure those with motor disabilities can navigate with a keyboard alone).
- Screen-reader navigation (ensuring people who use screen readers as Assistive Technologies can easily access and navigate to the site’s essential content).
Poor design decisions can render an accessible theme inaccessible. For example, avoid using color alone to convey information, such as links only being identifiable by color. Additionally, inaccessible plug-ins can also affect the accessibility of your site.
Be Extra Careful of Plug-Ins: Plug-ins are one of the most compelling reasons to use WordPress. Currently, there are more than 55,000 free plug-ins in the WordPress repository and thousands of paid plug-ins as well. Each plug-in gives WordPress functionality it didn’t previously have. With a few quick clicks, you can add new features to your website, such as contact forms, ecommerce functionality, project portfolios, photo galleries and social networks.
While powerful, plug-ins integrated into an accessible base theme can add content or manipulate the code of your theme thereby possibly introducing accessibility issues. In addition to concerns that are applicable to all plugins that add content – such as heading structure, semantic HTML markup and text alternatives, there are some common types of plug-ins that warrant deeper scrutiny:
- Interactive Plug-Ins: Any plug-in that creates “interactive” elements such as carousels, sliders, dropdowns, menus, pop-ups and tabs are ripe for the types of accessibility issues that are common in code of that type. You need to test the interactivity to ensure concerns such as focus management, device handling and dynamic content announcement are being done correctly.
- Form Plug-Ins: Like interactive features, forms require special attention to ensure assistive technology can properly describe, navigate, and interact with forms and form fields. Otherwise, users with disabilities will have difficulty using these forms and completing the desired transaction. Forms often make up the core of some of the most important business logic and, if inaccessible, can lead to situations where people with disabilities are blocked from using a site.
- Accessibility Plug-Ins: Until now, we’ve only talked about plug-ins that could negatively impact your site’s accessibility. What about plug-ins that claim to improve accessibility? There are nearly 100 plug-ins tagged under “accessibility” in the WordPress repository, and each of these plug-ins promises to either improve the accessibility of WordPress itself, monitor accessibility, or remediate accessibility issues for popular plug-ins and themes.
Don’t take these promises at face value and beware of any plug-in that claims or implies that it will completely fix a site to help meet accessibility guidelines. No single plug-in is able to achieve that goal alone. Some plugins might be able to fix many accessibility problems in the base theme while not being able to address plugins at all, or perhaps being disabled by other plugins, Translation and multilingual support is also a common limitation for auto-fixing plugins that you will need to validate for your use cases.
The most popular tool available for testing WordPress sites actually isn’t a WordPress plugin at all. You can run free automated accessibility checks using the axe browser extension which is free for Chrome, Edge and Firefox.
Other Factors to Consider: Using an accessible theme and plug-in doesn’t mean your website will be (and stay) accessible. The content itself needs to be accessible as well. Ultimately, this comes down to making smart design decisions and making sure everyone contributing content to the site understands their responsibility in making accessible content. Given the pace of site changes, if your content creators aren’t on board and well educated on the basics, even a well-designed site can quickly slide backwards from an accessibility perspective.
All content should adhere to accessibility best practices, including those described in the “Themes” section above. When creating content, consider these guidelines:
- Text alternatives for non-text content, such as images – Apply highly-descriptive alt-text to images, so someone using a screen reader can understand what information an image is conveying. Say you show a graphic of unemployment numbers year over year. Your alt text shouldn’t just say, “graphic of unemployment numbers year over year,” rather: “graphic showing five percent decline in unemployment from 2018 to 2019.” This can be done right in the WordPress editor.
- Highly descriptive language for links: Ensuring that links are not ambiguous is also important for people using screen readers. For example, if a link’s text is only “read more,” it will be unclear what the link is about or where it will take the user when clicked. A better alternative is to provide more descriptive link text, such as “Read more about our services.”
- Captioning – For all video clips and audio files, provide transcripts or summaries either on the same page or in an easily-accessible, linked location. As a rule of thumb, any time you’re adding content other than text, you need to ensure there is an alternative format allowing someone who can’t see or hear to still consume it.
Conclusion: Failure to ensure an accessible site can be both costly by fixing issues retroactively as well as legally risky. Digital accessibility lawsuits have steadily increased in recent years, according to research from Seyfarth Shaw LLP, with a 42 percent increase recorded between 2017 and 2019.
Web accessibility isn’t a simple topic. But the good news is WordPress is well suited for creating an extremely accessible front-end experience. You can provide an accessible website experience on your WordPress site by paying close attention to themes and plug-ins, maintaining a consistent flow of accessible content, applying established best practices and– perhaps most importantly of all – by never assuming anything is accessible unless you have tested it yourself. Even better, pay folks with disabilities to do the testing with you.
Dylan Barrell is Deque‘s CTO and leads product development initiatives. He works to help to build a barrier-free web by making it really easy for developers, quality assurance engineers and content writers to create accessible applications and content. Dylan has an MBA from the University of Michigan and a BS from the University of the Witwatersrand. @dylanbarrell