围咏叹调 HTML。如何强制将 2 个 div 作为一个读出？

Question

我是 ARIA 的新手，我无法将两个 div（都是文本）合并到一个读数中。布局是 iOS，类似于 table，一行有 2 个文本标签。这个想法是将行作为一个整体读出，而不是一个一个地读出标签。我发现 aria-label 仅在设置了角色（如按钮）时才有效，但随后您会读出额外的单词。有人有想法吗？

HTML 示例：

<div id="block">
  <div id="foo" class="half" style="float:left">Date of birth</div>
  <div id="bar" class="half" style="float:right">1/01/1970</div>
</div>

标签 1 应读出："Date of birth 1/01/1970"。

Answer 1

首先让我说你真的不需要这样做。屏幕 reader 用户习惯于处理这样的 HTML 结构，可以轻松绕过它。

但是，如果您想这样做：

创建屏幕外样式。

.offscreen {
    border: 0;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    width: 1px;
    position: absolute;
}

然后使用 aria-hidden 隐藏视觉内容并添加屏幕外文本。

<div id="block">
  <div aria-hidden="true" id="foo" class="half" style="float:left">Date of birth</div>
  <div aria-hidden="true" id="bar" class="half" style="float:right">1/01/1970</div>
  <div class="offscreen">Date of birth: January 1, 1970</div>
</div>

围咏叹调 HTML。如何强制将 2 个 div 作为一个读出？

WAI-ARIA HTML. How to force 2 divs to be read out as one?

html

accessibility

wai-aria

voiceover