Supporting Screen Reader Text

Six years ago, r11312-core introduced .screen-reader-text as a canonical class name for text targeted to screen readers for all of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. Not only for wp-admin, but also for the front-end through get_search_form(). Up until now, it was not part of the list of core classes that every theme is required to support, but that will change soon.

Not only does core already use it to identify content on the front-end to be visually hidden, but the AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) team also needs to be able to rely on the existence of this class to improve the screen reader experience outside of wp-admin.

The change should not be too drastic, given that the class has been around for years, a lot of the new HTML5 features also use it, and many modern themes support it already. Twenty Eleven and Twenty Twelve, the only default themes without complete support, were recently retrofitted with class and style definitions as well.

If you’re a theme author, this would be a great time to review your themes and update them with styles for .screen-reader-text, to ensure forward compatibility! As a reference, the Codex was updated with example styles that will make your theme fit for a more accessible future.

#accessibility

Three Easy tips for Accessible Theming

Let’s start with a question: what is accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/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 CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. 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 HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. 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 W3CW3C The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.https://www.w3.org/. 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 SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/., 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