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:
PerceivableContent must be available to all — no matter what user agent is employed or what senses the user lacks.
OperableUsers must be able to move around and operate the final site effectively — irrespective of whether they use a mouse or not.
UnderstandableThe 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.
RobustContent 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.
HeadingsThis 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 twenty
H1headings 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.
ImagesWhen possible, decorative images should be included using CSS. Where images are being added to your template markup, ensure that they incorporate an appropriate
altattribute. Decorative images within a theme might include:
- A banner or header image used alongside header text
- Images accompanying navigation text links
- A banner or header image that replaces header text
- Images used in place of text for navigation
- decorative images (null alt)
- Non-decorative images (appropriate alt – with at least 1 example)
alttext decision tree to check whether images are using the
Title AttributesDo not rely on the
titleattribute 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.
ReadabilitySometimes, 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.
ColorApproximately 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.
Things to Avoid
Spawning New Windows or TabsSpawning 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.
tabindexattribute (with the exception of negative
tabindexin 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.