CODEWITHSUNDEEP
htmlcssaccessibilitywai-ariascreen-readers
Kode_12
Kode_12

Reputation: 4798

Having trouble with setting a div to be readable by a screenreader

Problem: I have a div that is nested inside a span tag with the role of button, whenever the span button is focused, what I want to have happen is the screen reader 'read' the text in the nested div --> p tag when the span receives focus 

<span role="button" tabindex = 0>
    <div id= "nestedDiv" aria-hidden ="false" tabindex = 0>
           <p tabindex =0> Read this text </p>
     </div>
</span>

I tried different screenreaders and different browsers, same issue, it doesn't read the div, it just skips over to the next readable element.

Upvotes: 1

Views: 4464

Answers (1)

Skerrvy
Skerrvy

Reputation: 912

I tried this in NVDA + firefox and it reads "read this text. button" when I tab to the span. Which browser are you having trouble in?
You could try adding an ID to the paragraph such as <p id="foo"> and add aria-labelledby="foo" to the <span>.
However:
Karl Brown's comment is 100% accurate - it's best to use semantic markup. Does the span do something? If so, it should be a button. Does it bring you to a different page? If so, it should be an anchor.
Also, why so much tabindex? It takes three tabs to get outside of this element, which is not good. If you use proper semantics you wont need tabindex and you wont need any aria attributes.

Upvotes: 4

Related Questions