Sure Guide for Improving Your WP Site Accessibility

Example:

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

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

 bold (), italic (), emphasis () 

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:

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.

 the_content( sprintf( __( 'Continue reading%s', 'textdomain' ), ' '.get_the_title().'' 
        ) 
);

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