aria-labelledby not being read by NVDA Chrome

Question

When user uses screen reader, I want H2 element to be read out from hidden text stored in span element. This does not work with NVDA and Chrome/FF browsers. When I roll over the h2 element, it just reads "This is header" instead of "This is Test"

<div >    
    <span id="hdnlbl" class="visuallyhidden">This is Test</span>
    <h2 aria-labelledby="hdnlbl">This is header</h2>
</div>

here is live example https://jsfiddle.net/pwzeus/8jb1mxdm/13/

EDIT

Requirement is that it has to work on mouse over. How do I make that work ?

Answer 1

by the class I understood that your span is hidden- aria-labelledby will be read only when the element(the span in the example) isn't hidden
(we use it for errors when the error is hidden the error isn't read for the input and when the error is visible it will be read for the input)
good luck
shelli
accessibility expert