Sure Guide for Improving Your WP Site Accessibility
This article compiles some best practices to optimize a WordPress theme/site for accessibility. There may not be reliable solutions in the form of plugins for everything, which is why some of the following parts of your website will have to be optimized manually.
Navigation and Controls
Make your site keyboard operable for people with motor-skill or sight related disabilities, and users of alternate input devices.
Provide visual keyboard focus, especially in highlighting menus, form fields, buttons, and links. Every control must be reachable via keyboard.
a. Do NOT use display:none; and :hover for navigation menus. Use position: absolute; and :hover :focus instead and make them navigable through tab + arrow keys.
b. Ensure that the current location of the link in focus is clearly visible. Use background change, box outline, some sort of obvious state change to indicate the focus.
c. Buttons and links must interact with native keyboard and screen reader accessibility APIs through <button>, <input>, or <a> elements.
<button class="menu-toggle"><span class="glyphicon glyphicon-pencil"></span>Edit</button>
d. Let the focus move logically/sequentially and without random jumps.
e. Make skip links available.
WordPress plugins like Accessible Dropdown Menus and Accessibility Access Keys to make sure your site can be operated with a keyboard.
Forms require additional effort to be optimized for user-experience, and a few of them are accessibility-friendly.
Apply some of the known form-design best-practices to make forms accessible to users of keyboards, alternate input devices, and screen-readers.
a. Appropriately, clearly labeled and tagged fields
b. Perceivable error response
c. AJAX responses must be clear to screen readers
Example: Visible label on a search box
<label for='s'><?php _e( 'Search', 'textdomain' ); ?></label> <input type='text' name='s' id='s' value=''>
Note that WordPress default comment forms already pass accessibility criteria.
The content and templates need proper formatting and structure to make webpages less cumbersome.
Use Semantic Structure so that users of screen readers and voice recognition, along with search bots, can have an easier time accessing the page.
a. Theme templates must use HTML heading structure for content purpose
b. Sub-sections should be defined with heading elements (wrapping post/page/widget titles in headings)
c. Follow hierarchy: Use H1 once, and then progress to H2, H3… H6 without skipping levels on a single page.
d. If you must highlight something within the paragraph, use HTML tags for
bold (<b>), italic (<i>), emphasis (<em>)
e. Code lists (ordered, unordered, nested, etc.) with special care.
WordPress makes it easy to write content with proper formatting, but ensure that your theme’s markup follows the proper structure too.
4. ARIA Landmark Roles
These landmarks help users with sight disabilities navigate across websites.
Assign ARIA Landmark roles strategically to content regions of a site so screen reader users can navigate to them.
a. Wrap content in at least one landmark role, any unwrapped content is deemed orphaned and inaccessible to screen readers.
b. Understand roles and their usage:
# role=”banner” == header
# role=”main” == main site content
# role=”complementary” == sidebar
# role=”contentinfo” == footer
# role=”search” == search bar
# role=”navigation” == navigation menu
c. Assign unique ARIA labels for reappearing roles like this:
<nav role="navigation" aria-label="Primary Navigation"> <nav role="navigation" aria-label="Secondary Navigation">
WordPress recommends no more than 10 ARIA landmarks on any page to prevent confusion. Remove the labels from unnecessary regions or consolidate them together.
Make links accessible to screen readers.
Avoid using non-contextual text (example: “read more”, “click here”, etc.) or bare URLs for links.
1 2 3 4 5 6
the_content( sprintf( __( 'Continue reading%s', 'textdomain' ), '<span class="screen-reader-text"> '.get_the_title().'</span>' ) );
Note that the WordPress default “…read more” links after post excerpt fall under this category and should be optimized for accessibility as shown above or removed completely if the post name is present.
6. Color and contrast
Accessibility for users with sight impairments like color blindness
Setting default theme colors and contrasts as specified in WCAG guidelines.
a. Background-to-foreground color contrast for plain text should meet level AA contrast ratio 4.5:1 on WCAG 2.0 color luminosity.
b. Level AA also applicable to :focus and :hover.
Use plugins like WP User Stylesheet Switcher to avail a high-contrast alternative for visually impaired users.
7. Images and Media
The first thing to be optimized for accessibility to users with cognitive impairments is content.
Separating content-relevant images from decoration, ‘painting a picture’ for screen reader users through alt attribute on media content.
a. Include decorative images (backgrounds, border designs, etc.) using CSS only.
b. Add proper alt attributes for images (by theme author or the end user), transcripts for videos, etc.
c. If the font icons represent text, include alt text. If font icon is supplementing text, hide it from screen readers through aria-hidden
d. Do NOT startle users by autoplaying video/audio content. Auto forwarding carousels, sliders etc. are also bad practice.
WordPress lets you add alt tags to images on upload by default.
WordPress accessibility guidelines, which is followed by best WordPress Development Companies, also suggest you keep the following in mind, essentially they enhance the usability of your website for everyone.
• Do NOT use positive tabindex attributes (Negative/zero values are allowed in certain theme cases). Ignore tabindex=1 admin bar attribute.
• Do NOT include Accesskey attribute
• Do NOT create new windows/tabs
You can use plugins WP Accessibility (one of a kind till date) to help you easily manage some accessibility points mentioned in this post (and a few I must have left out).
Author Bio: Lucy Barret is a talented web developer with over 5 years experience. She is currently working for HireWPGeeks Ltd. as an PSD to WordPress conversion expert and has a team of expert developers to assist her in every project. She enjoys writing blogs and always on the hunt for opportunities to contribute at top blogs.