Three Easy tips for Accessible Theming

Let’s start with a question: what is accessibility, and why do we care? On the web, accessibility is the practice of making a web site usable by people with disabilities. That includes a lot of people – people with visual disabilities, hearing disabilities, and mobile impairments effecting their use of tools like a mouse. Solving many of these problems is really very simple, but can make an enormous difference to the experience people with disabilities have on the web. The WordPress Accessibility team is working with the Theme Review team to provide better resources for theme authors, so we can help you build themes that improve the experience of users with all forms of disabilities.

We’re starting off simple – with three simple tips you can build into your themes from the start.

Make it work with a keyboard

Many users are dependent on keyboards or keyboard-like tools to navigate websites. This includes users with visual disabilities using a screen reader, with mobility impairments effecting their hands or upper body, or who are at risk for repetitive stress injuries. Making keyboard navigation accessible is generally a simple task: it means making sure that all links, form inputs, and controls on the page are able to receive focus and that a user can see what item currently has focus.

This usually means that there are two primary concerns: is a :focus state defined that’s visually apparent, and is there a way to activate hidden items (like links in dropdown menus) so that they are made visible for keyboard access.

It’s important to mention that all browsers define a :focus state by default – but many CSS resets and frameworks remove it, leaving it up to the author to make sure it’s available.

How do you test for this?

Go to your website and start tabbing around. Start with your cursor in the address bar and press tab to move forward, Shift+tab to move back. What do you see? What do you miss?

Create event triggers as accessible controls

If you’ve turned any element into a trigger for an action, then it’s a control. But if it’s not a natively actionable element – like a button, a, or another form input, then that control has limited accessibility. Native elements can always receive keyboard focus, have well-defined actions on keypress, and report their current states to accessibility tools. With a custom control, built on another element (like a div or span), it’s your responsibility to add all of that functionality in your HTML and JS.

If you’re trying to decide whether to use a button or a a, you should ask yourself one question: does this button perform an action, or point to a resource? The line between these two can be blurred: opening a modal box that’s hidden on the same page can be considered either an action or a target, but other cases are more crystal clear. In general, buttons should perform actions and links should point to resources — but from a practical perspective, either will work.

Roger Johansson put together a great test case showing the difference in how different modes of button work by keyboard – is your button keyboard clickable?

Use your keyboard and try it out – the difference matters!

Share your content with everyone using images.

Featured images, icon fonts, ornaments and backgrounds. Images are a huge part of how we make web sites beautiful. While WordPress themes can’t control much about what users put in, they incorporate images in many different ways.

However an image is incorporated in a theme, the important question to ask is what that image means. Some images always need to have supporting text – if the image is a link, there needs to be text to show the target, exactly like what you would have written if there wasn’t an image.

If the image contains or represents text, then you need to make that text available.

Some images should never have supporting text – if an icon font is used to ornament a text link, then that link should already tell the user what to do. The icon shouldn’t be read out, since at best it would be redundant information.

Some images are less cut and dried; for those images, the W3C provides an alt text decision tree to help you make a decision.

Here’s an example of a linked image:


<a href="http://example.com" title="Home Page"><img src="home.jpg" alt="A picture of a house" /></a>

What does a screen reader tell you when it finds this linked image? Well, using pretty standard configurations, it’ll read “Link: A picture of a house”. The alt attribute is the primary label for a linked image. What about the title attribute? It’s ignored completely.

Is that information helpful? Or is it be preferable to find out where that link will take you? Just having an alt attribute doesn’t cut it; having meaningful text does.

Why Accessibility

Accessibility is about making sure that information is available to your audience — whether your audience can see the page or not. Visitors need to be able to navigate the site even if they can’t use a mouse or see the screen. With a few quick and easy steps, every theme can provide that access. If you take these extra steps in your theme, you’re increasing the potential audience for every site that uses your theme.

If you want to know more about making themes accessible, chat with the WordPress Accessibility team in the #accessibility chat room in Slack, or visit us at Make WordPress: Accessibility.

Three steps to better accessibility

  1. Make all your links, buttons, and form fields have visible focus from a keyboard.
  2. Always use a link or a button element when adding a control
  3. When you use an image, make it add meaning for everybody who needs it.

#accessibility