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). ( 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.