A WordPress theme should generate pages everyone can use, including those who cannot see or use a mouse.
To create an accessible theme, you need to have knowledge of web standards for HTML, CSS, and JavaScript.
You also need to be aware of best practices for web accessibility and have basic knowledge of the Web Content Accessibility Guidelines, WCAG.
To succeed in making your theme accessible, accessibility should be considered from the start of your project as part of your project specification. By making the right decisions from the beginning, you can avoid making last-minute adjustments that can be costly, time-consuming, and of low quality.
The Accessibility Team have documented many of the best practices and resources for development, design, and content in their handbook. In the handbook, you can also learn about testing for accessibility.
The Themes Team has two sets of accessibility requirements for themes submitted to the WordPress.org theme directory:
The accessibility-ready requirements are based on WCAG but adapted for WordPress themes.
The four principles of web accessibility
Although web accessibility can be a complex subject, it boils down to only four principles. The content must be:
Perceivable
Content must be available to all. It should not depend on a specific device or browser or require a specific physical sense, such as sight or sound.
Operable
Users must be able to move around and operate the final site effectively, whether they’re using a keyboard, a mouse, or assistive technology.
Understandable
The content should be presented in a manner that supports understanding, including supporting the construction of a mental model of the site for screen reader users. Similarly, the site’s operation (navigation menus, links, forms, etc.) should be easily understandable. Building a theme that incorporates known user behaviors (such as underlining links within the main content area) helps in this respect.
Robust
Content must be equally available across a wide range of user agents. Disabled users may employ a range of hardware and software solutions (commonly referred to as “assistive technology”) to allow them to access the Web—including screen reading & voice recognition software, braille readers, and switches (single input devices).
A theme designed with these four principles in mind eases the creation of an accessible website.
Perceivable and understandable
Color and color contrast
Having a high enough color contrast between background and foreground colors makes content easier to read. Theme authors must ensure that all background/foreground color contrasts for plain content text are within the level AA contrast ratio (4.5:1) specified in the Web Content Accessibility Guidelines (WCAG) 2.0 for color luminosity.
- Color may not be the only way to identify controls, links in text content, or error messages.
- If there is no text decoration on linked text, there must be a 3:1 color contrast between the link text color and the surrounding non-link text color, in addition to the other color contrast requirements.
There are separate requirements for links in content (links surrounded by other text) and links that are grouped together in navigation menus. Groups of links do not need to be underlined if it is obvious from the context that they are links.
Best practices for the use of color
Accessibility-ready requirements for contrast
Resizable text
Users have many means to resize text, including browser settings. All content and functionality must remain available if the user resizes the text up to 200% of the original size.
- Resizing text must not trigger multi-dimensional scrolling
- Enlarged texts must not cause overflows or overlaps
To avoid these issues, it is recommended to: