将 div 设置为可由屏幕阅读器读取时遇到问题答案

【问题标题】：Having trouble with setting a div to be readable by a screenreader将 div 设置为可由屏幕阅读器读取时遇到问题
【发布时间】：2016-04-14 21:52:07
【问题描述】：

问题：我有一个嵌套在具有按钮角色的跨度标记内的 div，每当跨度按钮聚焦时，我想要发生的是屏幕阅读器“读取”嵌套 div 中的文本 - > 当 span 获得焦点时的 p 标签

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

我尝试了不同的屏幕阅读器和不同的浏览器，同样的问题，它不读取 div，它只是跳到下一个可读元素。

【问题讨论】：

使用 span 作为按钮的目的是什么？用户是否打算采取行动？如果是这样，那么锚点、按钮或输入可能是更好的语义选择，可以让用户执行该操作。
“我有一个嵌套在 span 标签内的 div”——好的，所以你没有 HTML。这是个问题。

标签： html css accessibility wai-aria screen-readers

【解决方案1】：

我在 NVDA + firefox 中尝试过这个，当我切换到跨度时，它显示为“阅读此文本。按钮”。您在哪个浏览器中遇到问题？
您可以尝试在段落中添加 ID，例如 <p id="foo">，然后将 aria-labelledby="foo" 添加到 <span>。
但是：
Karl Brown 的评论是 100% 准确的 - 最好使用语义标记。跨度有什么作用吗？如果是这样，它应该是一个按钮。它是否将您带到不同的页面？如果是这样，它应该是一个锚。
另外，为什么有这么多的tabindex？需要三个选项卡才能脱离此元素，这并不好。如果您使用正确的语义，您将不需要 tabindex 并且不需要任何 aria 属性。

【讨论】：

谢谢，我正在学习 508 合规性，所以请原谅新手对主题的了解。代码库已经定义好了，所以我正在学习如何在旅途中注入无障碍标准。
有时您会遇到蹩脚的代码，尝试使其更易于访问真是太好了！我建议仅在 <span role="button"> 元素上使用 tabindex=0。当我使用 NVDA/Firefox 对其进行测试时，它会将其识别为一个按钮并阅读段落中的文本。如果您发现它不适用于其他屏幕阅读器，则 aria-labelledby 方法可能是理想的，但最好还是删除额外的 tabindex 属性，因为它目前无法访问。除非需要，否则最好不要使用 tabindex 或 aria 属性。
谢谢！这是我的现实，但从熟悉可访问性的人那里获得洞察力总是值得赞赏的，特别是因为与许多开发人员将时间投入到编码 aka 框架的“有趣”方面的偏好相比，它是一个非常稀缺的群体。