[英]My screen reader is not reading content inside the div tag with role button
<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.但我希望它读取打开按钮 go 到文件。 How I can achieve this?我怎样才能做到这一点? Thanks in advance.提前致谢。
aria-label
overrides all text that might be contained in child DOM nodes. aria-label
覆盖所有可能包含在子 DOM 节点中的文本。 See https://www.w3.org/TR/using-aria/#label-support , in particular the third last bullet point:请参阅https://www.w3.org/TR/using-aria/#label-support ,特别是倒数第三个要点:
Don't use aria-label or aria-labelledby on a span or div unless its given a role.不要在 span 或 div 上使用 aria-label 或 aria-labelledby ,除非它被赋予了角色。 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 .当 aria-label 或 aria-labelledby 处于交互式角色(例如链接或按钮)或 img 角色时,它们会覆盖 div 或 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.如果你真的想在角色之前“打开”阅读,“按钮”,然后在之后阅读“转到文件”,你说的是你的元素有一个“描述”,但我怀疑强制阅读顺序会导致名称问题中的 WCAG 2.5.3 Label ,我将稍后解释。
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>
).将aria-describedby
添加到按钮并引用<span>
的 ID(并将 ID 添加到<span>
)。
Most screen readers will read the label of the element first, then the role, then the description, but that's not guaranteed.大多数屏幕阅读器会先阅读元素的 label,然后是角色,然后是描述,但这并不能保证。 You'd have to test with NVDA, JAWS, and Voiceover (on the Mac and iOS).您必须使用 NVDA、JAWS 和 Voiceover(在 Mac 和 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".现在,WCAG 2.5.3 的问题是您现在有一个按钮,显示“转到文件”作为按钮的 label,但按钮的名称(可访问名称)是“打开”。 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.这意味着语音界面用户(例如 Dragon Naturally speak)必须说“单击打开”才能打开按钮,但按钮上的任何位置都不会显示“打开”字样。 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 ".用户将看到的只是按钮上的“转到文件”,因此他们会认为他们可以说“单击go 文件”。 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.您可能希望在按钮的可访问名称中同时使用“打开”和“转到文件”而不使用描述,但这意味着您会听到“打开,go 到文件,按钮”,这不是您的顺序最初要求。
This May Help这可能会有所帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.