The Screen Reader Text Class: 5 Real Life Applications

One of my first exposures to accessibility in WordPress is the screen reader text class. When I was learning by tinkering around existing themes – it became a familiar sight. Now, the screen reader text class is an effortless addition to my daily development, and it makes a huge difference. First we’ll go over briefly what this class is and how it can help make sites more accessible. Then I’ll review 5 real life applications of the screen reader text class in the wild. I hope that by reviewing these cases, it can become part of your every day workflow as well.
What is the screen reader text class?
To be clear, this class can be called anything. This class is almost always named “screen-reader-text” in WordPress themes. In Bootstrap, as another example, it’s equivalent class is called “sr-only”. Regardless of what the class is named, it is a set of styles that can be applied anywhere.
This class hides things that you don’t want to display visually, while keeping them “visible” for screen readers. It does so without resorting to using the “display: none” syntax in CSS. The problem with setting the display to
Source: https://managewp.org/articles/18288/the-screen-reader-text-class-5-real-life-applications

source https://williechiu40.wordpress.com/2019/01/13/the-screen-reader-text-class-5-real-life-applications/