Sure Guide for Improving Your WP Site Accessibility

This article compiles some best practices to optimize a WP site 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.

Wordpress accessibility

Navigation and Controls

Make your site keyboard operable for people with motor-skill or sight related disabilities, and users of alternate input devices.

Aim:

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.

Example:

1
<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.

2. Forms

Forms require additional effort to be optimized for user-experience, and a few of them are accessibility-friendly.

Aim:

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

1
2
<label for='s'>&lt?php _e( 'Search', 'textdomain' ); ?></label> 
<input type='text' name='s' id='s' value=''>

Note that WordPress default comment forms already pass accessibility criteria.

3. Formatting

The content and templates need proper formatting and structure to make webpages less cumbersome.

Aim:

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

1
 bold (<b>), italic (<i>), emphasis (<em>)

etc.
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.

Aim:

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:

1
2
<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.

5. Links

Make links accessible to screen readers.

Aim:

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

Aim:

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.

Aim:

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.

Key points

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.

Recently Published

»

What Really Makes a Website User-Friendly

Whether it’s for business or personal use, having a website online ...

»

5 Features of Virtual Private Server that put you in complete Control of Your Website

For a decade now, virtual private server has been a preferred hosting ...

»

8 Ways the Right Ecommerce Platform Makes Your Business Perform Better

Starting your own ecommerce store is an exciting experience, but ...

»

The SSL certificates and why are they essential for sites

What are SSL and its purpose? SSL is a modern technology that is ...

»

Entering Into M-Commerce as a Small Business

According to a December 2016 Business Insider article, the U.S. ...

»

How to Convert More Traffic Quickly and Easily

If you’ve got a blog that gets plenty of traffic but ...

»

Strengthen Workplace Productivity with Live Chat Software

Live chat has become an important part of every company’s customer ...

»

How More Powerful Smartphones Are Making Websites Load Faster

Smartphone speeds keep accelerating. Last October, Qualcomm joined ...

»

The Most Effective Method To Present A Logo Plan

The Most well-known creators’ battles are and how they are ...