CODEWITHSUNDEEP
screen-readersnvda
panza
panza

Reputation: 1431

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

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?

Upvotes: 5

Views: 18221

Answers (3)

mikep
mikep

Reputation: 7448

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>

Upvotes: 0

mrtnmgs
mrtnmgs

Reputation: 1552

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.

Upvotes: 1

FullStackdev
FullStackdev

Reputation: 99

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;
     }

Upvotes: 4

Related Questions