CODEWITHSUNDEEP
htmlaccessibilitywai-ariascreen-readers
bunny
bunny

Reputation: 2027

Have screen reader pronounce all texts in the div

I have a div defined as below. I want the every text in the div is pronounsed as user tab into this div. In this case, when user tabs into the outer div, screen reader reads item.X and item.Y (item is a variable).

<div tabindex="0">
    <div>{{item.X}}</div>
    <div>{{item.Y}}</div>
 </div>

I tried to give this div a role="link", and it reads everything, but this div is not a link so I don't think it is the right approach. 

<div tabindex="0" role="link">
    <div>{{item.X}}</div>
    <div>{{item.Y}}</div>
 </div>

I also attempted to do the below, but it seems aria-label does not work with Angular Interpolation.

<div tabindex="0" role="link" aria-label="{{item.X}}">
    <div>{{item.X}}</div>
    <div>{{item.Y}}</div>
 </div>

What is the right way to achive my goal?

Upvotes: 0

Views: 9052

Answers (1)

slugolicious
slugolicious

Reputation: 17435

It's tough to give a complete answer without seeing your real code in context. I assume the sample code is just a simplification but I'll point out the issues in the sample.

Firstly, you have a <div tabindex="0">, which allows the keyboard focus to move to that element but that element doesn't appear to do anything. It's not an interactive element. There's a warning in the html spec for tabindex.

authors should only make elements focusable if they act as interactive controls or widgets

If your <div> does do something (perhaps you have a click handler in javascript), then you'd still have a problem because your <div> does not have any semantic meaning. A screen reader will not know the purpose of the <div>. That's when role comes into play. If you designed your own link instead of using an <a> element, and your custom link was composed of <div> elements, that's when you'd have role="link" on your <div>. The purpose of the role isn't to force all the text to be read. The purpose is to convey to assistive technology (such as a screen reader) what the purpose of that object is.

As far as using aria-label, again, it depends on the semantic meaning of your element. The aria-label is typically ignored on non-semantic elements, such as <div> or <span>. See the W3 spec for "Practical Support: aria-label, aria-labelledby and aria-describedby"

In particular, the third last bullet says:

Don't use aria-label or aria-labelledby on a span or div unless its given a role.

But again, don't give a random role to your <div> just to force the label to be read.

Essentially, you are looking for the "accessible name" to be read. The accessible name calculation is well defined.

See step 2.F and 2.F.ii regarding "name from content" and looping through child elements in the DOM. But this again depends on the role.

So, in your situation, without knowing the purpose of your <div>, it's hard to give specific advice.

Upvotes: 1

Related Questions