html - 无法将 div 设置为屏幕阅读器可读

Question

问题:我有一个嵌套在具有按钮作用的 span 标签内的 div，每当 span 按钮聚焦时，我想要发生的是屏幕阅读器“读取”嵌套 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，它只是跳到下一个可读元素。

Answer 1

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