0

I am trying to get the NVDA screen reader in IE11 and firefox to read out a label description for a custom control made of divs and spans but at the moment the screen reader is reading out the content of the div or span you have moused over or if you tabbed onto it.

It says 'A' or 'Text size' on their own instead of reading out 'Change text size' Ive also tried using described-by, removing/moving aria-hidden without success.

<label id="lblTextSizer" for="textsizer" style="visibility: hidden;display:none;">Change text size</label>
                <div class="tool" style="padding-top: 4px;" role="group" aria-labelledby="lblTextSizer">
                    <div id="textsizer" style="font-size: medium; font-weight: bold;" aria-hidden="true" tabindex=0>
                        <span style="font-size: 16px" aria-hidden="true">A</span><span style="font-size: 12px" aria-hidden="true">A</span> <span aria-hidden="true">Text size</span>
                    </div>
                </div>
John Cogan
  • 1,034
  • 4
  • 16
  • 39
  • i presume as this is a custom control it could be completely redesigned from an HTML perspective as at the moment this is overly complicated and can be simplified massively. If not how is this intended to function as the whole thing is focusable I am guessing it is a click to toggle control? The issue with the current implementation not reading out the `aria-labelledby` is using `display: none` on the label, you should use [visually hidden text](https://stackoverflow.com/a/62109988/2702894) as this is till accessible by a screen reader, `display: none` is not accessible by a screen reader. – GrahamTheDev Jan 25 '21 at 16:26
  • @GrahamRitchie Yea its used to toggle the size between three values. I'll try redesign it, cheers – John Cogan Jan 26 '21 at 09:01

0 Answers0