使用屏幕阅读器文本的优点

Question

I have seen some web templates that have html tags named Screen Reader Text like bellow:

<label for="name" class="screen-reader-text">Name:</label>

And its CSS will be:

.screen-reader-text {
    position: absolute;
    top: -999em;
    left:-999em;
}

But nothing is showed in my PC browser. What is it? Regards.

Answer 1

Visual browsers will hide that content since the CSS essentially places it off of the screen. Screen readers will ignore that CSS and read the content normally. Basically, this site is attempting to make the page visually appealing while making is accessible to visually impaired users.

Answer 2

The tag here is the label tag. The element is defined as belonging to the class screen-reader-text . There is no magic in the name. It is just an assigned name, and could be foobar too. The style sheet defines that an element in that class be positioned outside the browser window.

This is bad practice, since label markup and labels of controls are useful to all users, not just users of speech browsers, which ignore the attempts to place something off screen.

There could be special reasons for the coding, but they cannot be guessed from the information given.