ARIA：将 HTML 元素视为一个整体

Question

有什么方法可以告诉辅助工具将元素（例如：<div>）作为一个整体来处理，而不是将其拆分为子元素？

第一个例子

使用 iOS VoiceOver 和带有字段的 a ，它被分成两个不同的元素：

第二个例子

这些元素分为两部分，其中最佳解决方案是“122 点”和 "First position":

<div class="row">
    <div class="stat lg col-xs-6">
        <span>122</span>
        <i class="icon icon-prize" aria-hidden="true"></i>
        <h5>Points</h5>
    </div>
    <div class="stat lg col-xs-6">
        <span>1º</span>
        <i class="icon icon-prize" aria-hidden="true"></i>
        <h5>Position</h5>
    </div>
</div>

Answer 1

iOS 上的 VoiceOver 确实有时会拆分一个句子，尽管您的示例代码实际上工作正常。我将您的代码用作下面屏幕截图中的第一行，然后复制没有 <a> 标记的文本作为第二行。第二行被 VoiceOver 打断，但 <a> 标签没有。

<span class="label info">
   <a href="/round/next">
      Next round starts <strong>in 3 days</strong>
   </a>
</span>
<br>
Next round starts <strong>in 3 days</strong>

(注意：我为 VoiceOver 打开了增强轮廓，所以黑色轮廓可能比你以前看到的要粗。)

Answer 2

我发现使用 role="button" 元素被视为一个组并且它的 innerText 属性被读取，但被宣布为一个按钮。

ARIA：将 HTML 元素视为一个整体

ARIA: Treat HTML element as a whole

accessibility

wai-aria

screen-readers

第一个例子

第二个例子