Title: Supporting Screen Reader Text Author: Konstantin Obenland Published: January 26, 2015 --- [ ](https://profiles.wordpress.org/obenland/) [Konstantin Obenland](https://profiles.wordpress.org/obenland/) 5:48 am _on_ January 26, 2015 Tags: [accessibility ( 2 )](https://make.wordpress.org/themes/tags/accessibility/) # Supporting Screen Reader Text Six years ago, [r11312-core](https://core.trac.wordpress.org/changeset/11312) 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](https://core.trac.wordpress.org/changeset/31268) 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](https://codex.wordpress.org/CSS#WordPress_Generated_Classes) that will make your theme fit for a more accessible future. [#accessibility](https://make.wordpress.org/themes/tags/accessibility/) ### Share this: * [ Threads ](https://make.wordpress.org/themes/2015/01/26/supporting-screen-reader-text/?share=threads) * [ Mastodon ](https://make.wordpress.org/themes/2015/01/26/supporting-screen-reader-text/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/themes/2015/01/26/supporting-screen-reader-text/?share=bluesky) * [ Facebook ](https://make.wordpress.org/themes/2015/01/26/supporting-screen-reader-text/?share=facebook) * [ X ](https://make.wordpress.org/themes/2015/01/26/supporting-screen-reader-text/?share=x) * [ LinkedIn ](https://make.wordpress.org/themes/2015/01/26/supporting-screen-reader-text/?share=linkedin) * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fthemes%2F2015%2F01%2F26%2Fsupporting-screen-reader-text%2F%23respond&locale=en_US) 1. ![](https://secure.gravatar.com/avatar/a15532e2de67c56ac93ed4e3a26c5b139bf8450f788262910590cd2991b7874c? s=32&d=mm&r=g) 2. [Jose Castaneda](https://profiles.wordpress.org/jcastaneda/) 6:37 am _on_ January 26, 2015 3. That’s awesome news! Thank [@obenland](https://profiles.wordpress.org/obenland/) for posting this. 🙂 4. ![](https://secure.gravatar.com/avatar/b344540246e5a222052bc20b960c16090088bb741a546ac5638678a3757be3cf? s=32&d=mm&r=g) 5. [Volker E.](https://profiles.wordpress.org/volker_e-1/) 7:07 am _on_ January 26, 2015 6. Great to see a push towards a11yAccessibility 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) in custom themes! Keep up the good work. 7. ![](https://secure.gravatar.com/avatar/9e6583bcbe4831c87f40523ded6be4ca1ad48833133bd542c4672d4ca4e54081? s=32&d=mm&r=g) 8. [Gary Jones](https://profiles.wordpress.org/garyj/) 1:50 pm _on_ January 26, 2015 9. For reference: [https://core.trac.wordpress.org/ticket/29699](https://core.trac.wordpress.org/ticket/29699) 10. Moving forwards, this is great, but it leaves a big backwards-incompatibility hole that hasn’t been addressed: 11. > 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 12. That’s the hole. 13. That single use of the class in the front-end is in a function that can be, and has been, legitimately filtered by themes outside of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.( i.e. they aren’t using it) and is therefore missing in the style sheets of potentially millions of sites created in the last six years. Twenty Twelve is a little over two years old, and yet that didn’t have complete support for it, even “given that the class has been around for years”. Twenty Eleven is three and a half years old, and that didn’t have any support for that class name. 14. It’s now being used in the new pagination functions in 4.1, and that’s awesome, but using it to retrofit accessibility into existing front-end outputs will cause sites to visually change, just from having a WP core update. 15. The referenced ticket suggests a way that site owners can use to opt-in to these visual changes on their site. It’s a single line of code that any theme tweaker can copy and paste in. As well as core, it would also let pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost- based plugin from a third-party. authors confidently add accessibility enhancements without breaking sites, however small the difference. Not supporting that is a missed opportunity for improving accessibility across the community. 16. ![](https://secure.gravatar.com/avatar/4fd344e387cd0febbb417ee2a2bef7db6b40c8f7ecf4265fb41dcef8e9fa8c4b? s=32&d=mm&r=g) 17. [Joe Dolson](https://profiles.wordpress.org/joedolson/) 5:12 pm _on_ January 26, 2015 18. Thanks Konstantin! That’s great. 19. ![](https://secure.gravatar.com/avatar/b7dbc76934c3ca484e3b4caa7e9784918451a304fbc19bcd8ae77739cf414ec1? s=32&d=mm&r=g) 20. [Rian Rietveld](https://profiles.wordpress.org/rianrietveld/) 6:59 pm _on_ January 26, 2015 21. I think it’s a good idea, forcing/education theme developers to add the screen- reader-text to their theme, since the option of an add_support was rejected. Otherwise it will never happen. 22. ![](https://secure.gravatar.com/avatar/4fd344e387cd0febbb417ee2a2bef7db6b40c8f7ecf4265fb41dcef8e9fa8c4b? s=32&d=mm&r=g) 23. [Joe Dolson](https://profiles.wordpress.org/joedolson/) 8:11 pm _on_ January 26, 2015 24. I have no issue with potentially breaking existing web sites. The changes will be quite minor – but this opens the door for us to make critical future changes. We need to be able to have that flexibility. 25. Technically, 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 doesn’t need the class to exist in order to improve accessibility. It needs to exist so that the accessibility improvements we implement have minimal impact on the front-end of sites – what we change will improve accessibility whether the end user or developer implements the class or not. 26. A couple of comments to note – first, it appears that the ‘clip’ property has been deprecated. The replacement for it (clip-path) doesn’t have enough browser support to be usable yet, but we should probably have a note of some kind to indicate that. 27. Second, I don’t think that the codex example should include :hover and :active styling – :hover in specific can result in some pretty weird behavior, so I think it would be best to focus only on the :focus styles. 28. ![](https://secure.gravatar.com/avatar/323cf209e19dd825678e9ccc51bc3f745f96571f1c68af26ae7955c1fa9ad1f2? s=32&d=mm&r=g) 29. [Aaron Jorbin](https://profiles.wordpress.org/jorbin/) 8:18 pm _on_ February 9, 2015 30. As of [[31388]](https://core.trac.wordpress.org/changeset/31388) coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. now uses `.screen-reader-text` in text that is output in themes using the default strings in comments_popup_link . 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 has put together a post on [hiding text for screen readers](https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/) that includes sample code to use in your themes. 31. * ![](https://secure.gravatar.com/avatar/a15532e2de67c56ac93ed4e3a26c5b139bf8450f788262910590cd2991b7874c? s=32&d=mm&r=g) * [Jose Castaneda](https://profiles.wordpress.org/jcastaneda/) 10:34 pm _on_ February 9, 2015 * Awesome! I didn’t know about that. Thanks for sharing that bit of info. 🙂 ### Leave a Reply 󠀁[Cancel reply](https://make.wordpress.org/themes/2015/01/26/supporting-screen-reader-text/?output_format=md#respond)󠁿 You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fthemes%2F2015%2F01%2F26%2Fsupporting-screen-reader-text%2F&locale=en_US) to post a comment. This site uses Akismet to reduce spam. [Learn how your comment data is processed.](https://akismet.com/privacy/) # Post navigation [← Explaining and giving examples to requirements We’ve got…](https://make.wordpress.org/themes/2015/01/21/explaining-and-giving-examples-to-requirements-weve-got/) [Weekly chat agenda We’ve got two things to… →](https://make.wordpress.org/themes/2015/01/26/weekly-chat-agenda-weve-got-two-things-to/)