Breaking News: Grepper is joining You.com. Read the official announcement!

screen reader only css sr-only

Atanas Atanasov answered on December 16, 2022 Popularity 8/10 Helpfulness 9/10

answer screen reader only css sr-only

screen reader only css sr-only

Comment

/* This class hides a text usually used in span element in order to make
it readable to screen-reading technologies to improve acessibility.

Example in a form element to fill in date of birth, you want to display D.O.B
but it might be ambiguous.

<form action="..." method="...">
    <label for="...">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
    <input type="date" name="..." id="..."
</form>

*/

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Popularity 8/10 Helpfulness 9/10 Language css

Source: stackoverflow.com

Tags: css reader screen

Link to this answer
Share Copy Link