How to show a label only to Screen Readers - Web Accessiblity

Question

In HTML, I want to show a <label> placed with my textbox to show only for screen readers or voice browsers. what are the ways to achieve that with respect to WAG-ARIA guidelines and I would also like to know the vice versa scenario of hiding some text only from voice browsers ?

Kudva

Answer 1

The best way I have found is to make a class you can toggle that will use CSS to hide text visually. The code I've used is:

    .hidden
{position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}

As for hiding text only from screen readers, what sort of situation would be requiring that?

Corked

Hi mookamafoob thanks for your answer +1d. This was an interview question asked on accessibility and I could not answer :) – Kudva

gotohale's answer is very similar to how Bootstrap does it (they use a class called ".sr-only"). The situation where you'd do this is if you omitted the labels for layout purposes. You'd probably have them as placeholders inside the text inputs, but screen readers wouldn't see that placeholder text as labels. You'd need to define actual labels and hide them. – Mandeville

Answer 2

To do this just use some CSS to position it offscreen. This will hide the label visually, unless they disable stylesheets. You don't really need ARIA here, unless you are trying to something more fancy than you are saying.

who on earth disable stylesheets?

I cannot give a percentage, but I disable them periodically due to a number of things. I had to do it this morning to fill out a form because their CSS and JS was wonky.

I would also like to know the vice versa scenario of hiding some text only from voice browsers ?

I really dont know what you mean by this. I'll take a shot in the dark, and say you are talking about people who use Dragon NaturallySpeaking. Hiding labels actually detracts from user experience. For screen readers, JAWS, NVDA, VoiceOver, it does the following: Oh hey I am in a textbox, is there a label with a for attribute with my ID? Yes there is, then announce the text in the label. Dragon works almost in the opposite way. It recogizes that the text is a label, and it matches up, the form element gets focus when the person says the word(s) in the label, such as First Name.

Looking at the other answer, if they are interpreting this question correctly as: "How do [or can] hide parts of a page from a screen reader?" The answer is yes you can by using the aria-hidden attribute. I answered a question about aria-hidden the other day, the links within that may provide insight.

Chiliad

Hi Ryan thanks for your answer +1d. This was an interview question asked on accessibility and I could not answer :) – Kudva

I suggest you add that to the body of the question. – Chiliad

Answer 3

In Chrome currently also something like this works:

<h1 aria-hidden="false" style="display: none;">Heading only for Screen Readers</h1>
<h1 aria-hidden="false" style="visibility: hidden;">Second Heading only for Screen Readers</h1>
<h1 aria-hidden="true">Heading only for Screen</h1>

where the first and second headings are read by screen readers.

Also see my answer here: https://mcmap.net/q/267833/-in-html-how-can-i-have-text-that-is-only-accessible-for-screen-readers-i-e-for-blind-people

Rothmuller

Answer 4

I have been trying to find a solution and wrote something like this:

   .hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
   }

What do you think?

Shrievalty

Answer 5

The top answer is the correct way.

*class/tag* { 
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

it should be known that this is the recommended code from Webaim, an organization dedicated to web accessibility for everyone.

Anagoge