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 ?

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?

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.

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://stackoverflow.com/a/49940541/9219743

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?