How to Incorporate Web Accessibility in Your WordPress Site
WordPress is the most popular website building platform. According to W3techs, 35.7% of all websites use WordPress, which brings it to a staggering 62.5% of the Content Management System (CMS) market share globally.
When creating a WP website, however, web accessibility is probably the last thing on your mind.
But, the WordPress Accessibility Coding Standards state that “All new or updated code released in WordPress must conform with the Web Content Accessibility Guidelines 2.0 at level AA.”
In other words, accessibility is a critical factor if you have a WP website.
Fortunately, making your WP website accessible is not impossible. But, before discussing how to do it, let’s understand what web accessibility constitutes.
A. The Four Pillars of Web Accessibility
The World Wide Web Consortium (W3C), which develops international standards for the web, has already come up with the following four principles of web accessibility:
- Perceivable: You need to present all the information and elements on your website in a way that everyone can perceive them.
- Operable: All your navigable and interactive elements must be operable by different users.
- Understandable: Everyone should be able to understand the information and user interface on your website.
- Robust: Various types of assistive technologies and users should be able to read the content on your website.
B. WordPress Web Accessibility Best Practices
Keeping the above principles in mind, you can take the following steps to make your WordPress site accessible to the disabled:
- Improve Text Accessibility
Everyone, including the visually impaired, should be able to read the text on your website. While you can use large-size fonts as default, providing resizable text will further increase readability. Visually impaired users can increase the font size as per their convenience using this feature.
Also, make sure to add text alternatives such as Alt Tags wherever necessary. WP Accessibility is one of the WordPress accessibility plugins that can help you add resizable text, color contrast, add post titles to read more links and provide suitable Alt Text.
- Structured Front and Back End
Each one of your webpages needs to have a well-structured front and back end. It not only increases the overall readability of your content but also makes it easier for assistive tools to convey the message to the disabled users. You can use HTML elements like semantic heading tags and meta-descriptions to improve the back end.
Make sure to use bulleted lists, short paragraphs, and well-organized and to-the-point content should help improve the front end. You should also use appropriate headlines and titles to define various content subsections. Avoid using flashy animations and GIFs as they are not accessibility-friendly.
Also, add Skip Links to make content navigation easier for screen reader users. This simple accessibility feature allows users to jump from one section of the content to the other without having to go through unnecessary material.
- Keyboard Navigation for Better Interaction
You also need to make sure that your website is keyboard navigable. It should include links and menus, especially drop-down menus. All users should be able to access elements like links, menus, buttons, and forms using Tab (forward) and Shift+Tab (backward).
You also need to use a visible focus indicator, which shows disabled users where they are on a webpage. WordPress themes may often reset the default focus style. Make sure to use a WordPress theme that doesn’t reset this feature. Divi accessibility theme can help you set up keyboard-friendly navigation with accessible drop-down menus and visual outlines for focusable elements.
- Add ARIA Landmarks
ARIA stands for Accessible Rich Internet Applications. With an ARIA landmark role, you can define different regions of a webpage, allowing assistive technology users to navigate your website with ease.
The most common ARIA landmark roles include a banner, main, complementary, content info, search, and navigation.
- Banner: Defines site heading such as logo, company name, or website title.
- Main: Defines the main content of the webpage.
- Complementary: Detects supporting content which is an essential part of the main content.
- Content info: Provides information about the parent documents such as footnotes, copyrights, and privacy statements.
- Search: Denotes the search form of on your site.
- Navigation: Marks navigational elements of a webpage.
The best advantage of using ARIA landmarks is that they can work with already semantic HTML5 elements. As a result, you can use them with HTML5 elements in existing WordPress themes.
- Interactive Elements: Color Contrast
For interactive elements such as CTAs and forms, always use high contrast colors as your text background. While WCAG 2.0 Level AA requires a contrast ratio of at least 4:5:1 for normal text and 3:1 for large text, the Level AAA requires a contrast ratio of at least 7:1 for normal text, and 4:5:1 for large text.
Usually, black text on white background offers the best color contrast. You can also use black text on a yellow background and vice versa. However, steer clear of combinations such as green text on a red background or red text on a green background.
Website accessibility also extends to other interactive elements, such as multimedia, on your website. Make sure none of the multimedia such as video, audio, sliders or carousels, have default autoplay option as it is a significant barrier for disabled users. Instead, all multimedia content should start playing only after user interaction.
In addition to video transcripts, audio descriptions, and captions, make sure to use accessible media players. You can use a plugin like Able Player, which allows you to add videos and audios enclosed in an accessible media player on any page of your WordPress site.
Making your WordPress website accessible will require you to change its design and development flow and can be done via a manual process with an advisor. An automatic web accessibility solutions require a small investment of time and resources will bring numerous benefits, including a positive brand image, wider market reach, better search ranking, and not to mention, increased sales.
If you still have doubts about how to make your WordPress site accessible, feel free to drop your queries in the comments.
Vishalsinh Mahida is Content Marketing Analyst at E2M inc, a San Diego Based Digital Agency that specializes in White Label Services for Website Design & Development and eCommerce SEO. He has previously assisted top brands like Axis Bank, Fox Star, IIFL, and more in implementing several customer engagement strategies. Connect with him at any time on LinkedIn!