NVDA not reading tl;dr when in span elements (Windows)

  • Hi all,
    I have been scratching my head for a while and cannot NVDA (Windows) to read the tl;dr label by using aria-label in the span. 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>

    It works fine on Mac with Voice Over, but I got stuck on Windows and despite the fact I have tried a few things (e.g. aria-labelledby, etc), I stumbled upon major issues with aria-label in div and span element:

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

    Has anyone come across this on WordPress? How did you resolve it? Really keen to hear what are the alternative approaches for this to work with NVDA.

    Thank you so much,

    N.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Just looking at the code, it isn’t valid HTML to have attributes without being separated by code so can you make sure that’s fixed first?
    E.g. :

    
 onclick="togglelongText()" aria-label="tldr">
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m probably looking at the wrong code but might as well make this suggestion now; the ‘aria-label’ attribute should not be used on input fields if label elements can be used. If you are not (and cannot) using a label element then use the ‘aria-label’ attribute on the input field, but don’t use both.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you implement the above suggestions? Then we can debug the issue properly.

    Thread Starter nagomitaro

    (@nagomitaro)

    Thank you so much for your reply, it is very appreciated. I made a few changes to the used example (addressed that good point you raised too) and managed to make NVDA read “TL;DR”, but interestingly I am missing the “switch”. Here is the modified 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>

    I am now using tabindex=0 to make the label focused and after a few attempts noticed that by removing aria-hidden=”true”, at least it read some of the word (still excluding ‘switch’). This is a bit of progress, but cannot figure out why it is missing out that word. Any idea? Can you please post an example of you were suggesting above (when you mentioned that I should not have label and aria-label in the same input element).

    Thank you,

    N.

    • This reply was modified 8 years, 3 months ago by nagomitaro.
    • This reply was modified 8 years, 3 months ago by nagomitaro.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘NVDA not reading tl;dr when in span elements (Windows)’ is closed to new replies.