NVDA + Firefox not reading content properly

Question

So I have this code:

<div style="top: 143.4px; left: 345.85px; display: block;" class="w size-200" tabindex="1" id="sitetour-wrapper">
    <span id="sitetour-pointer"></span>
    <div class="content-wrapper">
        <span id="sitetour-header" class="sitetour-header">Test Text</span>
        <div id="sitetour-content">
            Why this is not being read 
            <div id="demo-bb" class="demo-bg">
                    <div></div>
            </div>
        </div>
    </div>
    <div id="sitetour-footer">
        <button style="display: block;" type="button" title="back" id="sitetour-back-btn" class="back-btn btn-link">Back</button>
        <button style="display: none;" type="button" title="next" id="sitetour-next-btn" class="submit-btn">Next</button>
        <button type="button" title="close" class="btn-link cancel-btn" id="sitetour-close-btn">Close</button>
    </div>
</div>

And I want it so that when I focus on #sitetour-header the screen reader will read the contents of the text accordingly.... but this code doesn't read it properly when using NVDA + Firefox...what did I do wrong?

Skerrvy Skerrvy · Accepted Answer · 2016-03-15T17:26:30

I've tried to reproduce this issue in codepen, jsfiddle and using static html and all three are reading the text using firefox and NVDA. If the text is not being read, it's likely due to interference from other aspects of the page. If you're able to say how it's not being read properly that could also help figure out what's going on.

NVDA + Firefox not reading content properly

1 Answers