Question

我是ARIA的新手，我在将两个div（都是文本）合并为一个读数时遇到了麻烦。布局是一个类似于iOS的表，在一行中有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应该读出：＆＃34;出生日期1/01/1970＆＃34;。

Answer 1

首先让我说你真的不需要这样做。屏幕阅读器用户习惯于处理这样的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>

WAI-ARIA HTML。如何强制将2个div作为一个读出？

1 个答案: