The Accessibility for WordPress Themes

A WordPress theme should generate pages that everyone can use — including those who cannot see or use a mouse. The default WordPress theme generates content in a fairly accessible manner but, if you are a theme developer, you need to maintain these accessibility standards in your own theme. Although web accessibility can be a complex subject, it boils down to only four principles — that content must be:

Perceivable

Content must be available to all — no matter what user agent is employed or what senses the user lacks.

Operable

Users must be able to move around and operate the final site effectively — irrespective of whether they use a mouse or not.

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 behaviours (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 that is designed with these four principles in mind should facilitate the creation of an accessible web site.

Headings

This shouldn’t need saying but headings are more than just big, bold, text. They are an essential way of breaking content down into logical sub-sections and may be relied upon by screen reader users. The JAWS screen reader (for example) can automatically create a list of headings from any given page. This allows its users to “scan” the page content in a similar way that a sighted person might scroll quickly down a page.

So it is important that heading tags are used logically rather than for any presentational or search engine optimisation (SEO) effect. A page containing twentyH1 headings might make for good, theoretical, SEO but it pretty much destroys the actual intended use of heading tags — to break a complex page down into sub-sections.

Obviously, the use of heading markup will vary from template to template but do try to keep the intended usage of headings in mind when building your theme’s files. One way to check your heading structure is to examine a page using the “View Document Outline” tool in Firefox’s Web Developer Toolbar under its Information menu.

Images

When possible, decorative images should be included using CSS. Where images are being added to your template markup, ensure that they incorporate an appropriatealt attribute. Decorative images within a theme might include:

• A banner or header image used alongside header text
• Images accompanying navigation text links

Non-decorative images within a theme might include:

• A banner or header image that replaces header text
• Images used in place of text for navigation

Alt text

• decorative images (null alt)
• Non-decorative images (appropriate alt – with at least 1 example)

To test whether your images within your template markup are informative or purely decorative, use a a simple alt text decision tree to check whether images are using the alt attribute appropriately.

Title Attributes

Do not rely on the title attribute to convey information. This attribute may not be available to all users (e.g. voice recognition (VR) software users). If information is important enough to be added, it’s important enough to be added as clear text so that everyone can see it.

Readability

Sometimes, the simplest thing you can do is to create a more readable page. Reading from a screen is much harder than reading a printed page. Crowded text, lots of images and too much information makes a page very difficult to read. Some general accessible design tips include:

• White space is your friend. Use it as a tool to reduce distraction.
• The CSS line-height property can increase the readability of paragraph text.
• The CSS letter-spacing property can increase the readability of headings and larger text.
• Position navigation elements in logical places and do not allow them to intrude into a page’s main content area.
• Make sure all fonts are large enough to be readable.
• If you are using custom fonts, embed them in your theme so that you are not relying on a 3rd party site for font delivery. If you really do need a 3rd party site for fonts, check that the text is still readable if the fonts are not available.

Color

Approximately 10% of all internet users have problems seeing colors, especially those suffering from color blindness.

The commonest form of color blindness affects the red/green spectrum. An affected user may perceive red, orange, yellow, and green as a single color with the rest of the color spectrum being perceived as blue, gradually changing to purple. In rarer forms of the condition, blue and pink colours may predominate or the sufferer may not be able to perceive any colors at all — with all colors reduced to shades of grey.

Whenever possible, use a color blindness simulator to check your design palette and avoid using color alone to distinguish important elements.

jQuery & JavaScript

You can still use jQuery in an accessible theme. Just don’t rely on it for any primary functionality. Test by viewing the theme’s output whilst JavaScript is disabled within the browser. Does the site still function effectively?

When implementing jQuery slideshows etc. check that they can be navigated by keyboard alone.

Using ARIA does offer some benefits in terms of future-proofing but, again, should not be relied upon at the present time. It is also with noting that incorporating ARIA attributes will cause markup validation failures, but it is more valuable to use ARIA than to aim for 100% validation.

In all things script-related, aim for progressive enhancement and graceful degradation.

Things to Avoid

Spawning New Windows or Tabs

Spawning new windows breaks the browser ‘Back’ button leaving some sighted keyboard navigator stranded without any means of returning to the original page. For that reason, please avoid links and other elements that open a new window or tab. If you really, really, have to spawn a new window or tab, place a warning in clear text (preferably as part of the link or control text) so that users can make an informed choice.

Tabindexing

The tabindex attribute (with the exception of negative tabindex in specific circumstances) is to be avoided at all costs. As a theme developer, you are not the best person to determine where any one person wants to move to next on a site. Only the user can make that decision, so do not try to hijack their browser. As long as the natural tab order within a page is logical and can be easily perceived, most users are perfectly capable of sorting out their own navigational needs — thank you very much.

Accesskeys

Again — a nice idea in theory — but in reality, often a complete disaster when implemented. Apart from the fact that users have no information as to which shortcuts do what on a site, using anything other than numeric keys risks hijacking shortcut keys within the user’s own browsing software.