NVDA not reading aria-label in span - what is the alternative?

Question

I am fairly new to accessibility issues and I am trying to have the aria-label read in NVDA.

This is my HTML:

    <div class="myClass">
          <input type="checkbox" name="mycheckbox" id="toggle" onclick="togglelongText()"aria-label="tldr">
          <label for="toggle" aria-label="tldr"><span class="active" aria-label="tldr">tl;dr</span>
          <span class="toggleshape"></span><span class="inactive" aria-hidden="true">tl;dr</span></label>
    </div>

The label cannot be read on NVDA on Windows and I have found out that it is not consistently succesful if the element is inside div or span:

https://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_an_invisible_label

What are the alternatives? Can you help?

Thanks,

Regards,

P.

EDIT:

I have done some re-work and I managed to have the aria label only partially working as it now reads "tl;dr". This has been tested on Windows 7 with Chrome 54, IE 11 and Firefox 49, all presenting the same issue. Here the reworked code:

<div class="myClass">
    <input type="checkbox" tabindex="0" name="mycheckbox" id="toggle" onclick="toggleLongText()" 
     aria-label="TL;DR switch">
    <label for="toggle" aria-label="TL;DR switch"><span class="active" tabindex="0" 
     aria-label="TL;DR switch">tl;dr</span><span class="toggleshape"></span>
     <span class="inactive">tl;dr</span></label>
</div>

Can you help?

Chrome, but no different on IE or Firefox - thanks for your reply. — panza, Dec 23 '16 at 17:42

FullStackdev · Answer 1 · 2017-01-24T09:31:10.040

4

Try using title attribute.

Or you can use aria-labelledby="mytexttoberead" as an attribute

<span class="hidemefromUsers" id="mytexttoberead">This text will be read</span>

add a css for the class "hidemefromUsers" so it wont be visible to the end users, only the screen reader will be aware of its existence.

add this in your css

    .hidemefromUsers {
         position: absolute;
         left: -99em;
         height: 0;
     }

edited Jan 24 '17 at 09:31

answered Dec 28 '16 at 12:06

FullStackdev

99
1
10

Thank you. What the hidemefromUsers would look like? Where do you include it? – panza Jan 23 '17 at 09:03
The main issue is that I do not seem to be able to engage/activate the button/toggle when tabbing or spacing – panza Jan 23 '17 at 10:18

score 1 · Answer 2 · answered May 06 '21 at 10:22

1

aria-label, aria-labelledby, and aria-describedby do not work consistently with all HTML elements. Short answer: they should be used on interactive elements. Longer answer by Léonie Watson here.

answered May 06 '21 at 10:22

mrtnmgs

1,402
14
26

score 0 · Answer 3 · answered Apr 19 '23 at 08:52

By my testing NVDA absolutely does not read title and arial-label attributes on hover. Solution is to use "invisible" text which works for tags A and BUTTON...

<style>
button { padding: 0; border: none; }
.blue { background: blue; display: block; width: 32px; height: 32px; cursor: pointer; }
.orange { background: orange; display: block; width: 32px; height: 32px; cursor: pointer; }
.hidden { font-size: 1000%; color: transparent; display: block; height: 100%; width: 100%; overflow: hidden; }
</style>

<a href="" class="blue" onclick="return false;"><span class="hidden">BLUE</span></a>

<button class="orange"><span class="hidden">ORANGE</span></button>

NVDA not reading aria-label in span - what is the alternative?

3 Answers3