-3

I'm trying to understand the accessibility styles from the theme, but they seem pretty overkill to me. Can someone please explain to me the reason for each line or group of lines so I can decide what is needed for my usage.

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  -wrap: normal !important;
  /* Many screen reader and browser combinations announce broken 
  words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}
Mikey Binns
  • 17
  • 4
  • screen rendering is not for you, it's for screen readers, the website needs to be able to serve all kind of audience. So it is not something a normal user can see but if you press "tab key" to brows the internet you'll be able to see the text inside the class screen rendering. It's more for accessibility than anything else. – Taj Khan Feb 13 '19 at 05:09

2 Answers2

1

The .screen-reader-text class is for adding non-visual text (you can't see it) but the text is still in the DOM so that screen readers can access it. You use it to add extra text for screen readers. For example, if you had something like this:

<p>we sell cool stuff</p>
<a href="some url">read more</a>

The sighted user knows that "read more" refers to reading more about cool stuff. But a screen reader user, if they tab to the link, or if they bring up a dialog that shows all the links on the page, they'll just hear "read more". They'll be thinking, "read more about what?".

You can fix that by adding non-visual text such as:

<p>we sell cool stuff</p>
<a href="some url">read more <span class="screen-reader-text">about cool stuff</span></a>

Now when the screen reader moves to the link, they'll hear "read more about cool stuff" but you won't see "about cool stuff" anywhere on the page.

Lots of third party libraries have a class such as this. For example, What is sr-only in Bootstrap 3?

As far as what each individual CSS property does, you can look that up. All of those properties are needed to get the "hidden" text to work across all browsers (firefox, ie, chrome, safari), screen readers (jaws, nvda, voiceover, talkback), and os's (pc, mac, ios, android). If you leave one of the properties out, it might work on the platform you're testing on but could break with a different combination.

slugolicious
  • 8,671
  • 1
  • 20
  • 30
0

.screen-reader-text applies to object you want to hide visually from screen but still render with a screen reader.

The different lines are different means of hiding the text while still making it readable by a screenreader.

The .screen-reader-text:focus will reverse the precedent style in order to make visible any object which has been focused with the screenreader, when the element is focused with the keyboard.

However, hiding text for screenreaders has to be considered a bad habit as screenreader users may also be sighted users (aphasic, paralytic, people with low vision) and those people may use a mouse or eye tracking devices, ...

Adam
  • 15,932
  • 27
  • 48