<div role="button" aria-label="Open" tabindex="0">
<span title="open file">go to file</span>
</div>
My screen reader is reading open button. But I want it to read open button go to file. How I can achieve this? Thanks in advance.
CodePudding user response：
aria-label overrides all text that might be contained in child DOM nodes. See https://www.w3.org/TR/using-aria/#label-support, in particular the third last bullet point:
Don't use aria-label or aria-labelledby on a span or div unless its given a role. When aria-label or aria-labelledby are on interactive roles (such as a link or button) or an img role, they override the contents of the div or span. Other roles besides Landmarks (discussed above) are ignored.
If you literally want "open" read before the role, "button", and then have "go to file" read afterwards, you're talking about having a "description" for your element, but I suspect forcing that reading order will cause a WCAG 2.5.3 Label in Name issue, which I'll explain shortly.
But first, here's how you would get that order:
<div role="button" aria-label="Open" tabindex="0" aria-describedby="newid">
<span title="open file" id="newid">go to file</span>
</div>
Add aria-describedby to the button and reference the ID for the <span> (and add an ID to the <span>).
Most screen readers will read the label of the element first, then the role, then the description, but that's not guaranteed. You'd have to test with NVDA, JAWS, and Voiceover (on the Mac and iOS).
Now, the problem with WCAG 2.5.3 is that you now have a button that displays "go to file" as the label of the button but the name (accessible name) of the button is "open". This means that a speech interface user (such as Dragon Naturally Speaking) will have to say "click open" in order to select the button but the word "open" is not displayed anywhere on the button. All the user will see is "go to file" on the button so they're going to think they can say "click go to file". But since "go to file" is the description of the button and not the name, it won't work.
So you can do what you're originally asking for but it makes a pretty severe accessibility issue.
You might want both "open" and "go to file" in the accessible name of the button and not use a description, but that means you'll hear "open, go to file, button", which is not the order that you originally requested.
CodePudding user response：