htmlaccessibilityscreen-readers

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

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 ?

Solution

  • 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?