标签值场景的可访问性

Question

我想知道制作标签的正确方法是什么，以及让用户可以访问标签的价值。例如，我有一个部分显示了用户的以下详细信息

名字约翰
姓史密斯

在 HTML 我可以用两列来表示这个。如下所示

<div class='row'>
  <div class="col">First Name</div>
  <div class="col">John</div>
</div>
<div class='row'>
  <div class="col">Last Name</div>
  <div class="col">Smith</div>
</div>

但是当我这样做时，屏幕会一个一个地读取它们。而不是告诉 *First Name John *（一起读）它读作

名字

约翰

（只有在我使用键盘上的向下箭头后才能阅读）我认为这是不对的。（我使用箭头键读出了名字 John Smith。它没有同时读出 First Name 和 John Smith）

<div class='row'>
  <div class="col" id='first-name'>First Name</div>
  <div class="col" aria-labelledby='first-name'>John</div>
</div>
<div class='row'>
  <div class="col" id='last-name'>Last Name</div>
  <div class="col" aria-labelledby='last-name'>Smith</div>
</div>

读起来还是一样

您能否建议实现此目的的正确方法是什么，让所有人都能访问？

Answer 1

单独 <div> 中包含的任何文本都将被视为新段落，因此会引入停顿。

此外，您不能将 aria-label 放在 <div> 上并获得一致的结果（您可以给它一个 role 使其工作，但是没有 role 我能想到的适合这个）。

实现目标的最简单方法是使用 aria-hidden="true" 从屏幕 reader 中隐藏原始 2 列，然后添加一段视觉上隐藏的文本，其中包含完整文本 <p class="visually-hidden">First Name, John</p>.

我在下面放了一个示例，它应该按预期运行。

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<div class='row'>
  <div class="col" aria-hidden="true">First Name</div>
  <div class="col" aria-hidden="true">John</div>
  <p class="visually-hidden">First Name, John</p>
</div>
<div class='row'>
  <div class="col" aria-hidden="true">Last Name</div>
  <div class="col" aria-hidden="true">Smith</div>
  <p class="visually-hidden">Last Name, Smith</p>
</div>

警告 - 您确定要干扰屏幕 reader？

99% 的时间你不应该操纵屏幕 reader 阅读带有标签、隐藏文本等的内容

我实际上认为原来的行为是正确的（但这是基于断章取义的信息）。

您有单独的列，因此按顺序阅读每一列很有意义。

然而，在没有看到应用程序、上下文等的情况下，除了猜测之外不可能做任何其他事情，所以我对这个例子给出了怀疑的好处。

我会在实施我的解决方案之前仔细考虑，因为分别读取每个 div 是预期的行为，它们以正确的顺序读取，所以我认为在 99% 的情况下这不会有问题.

您还应该考虑 div 是否应该包含语义正确的段落（我会说是的，即使这确实需要一些样式来删除边距等，但这是次要的一点）。

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

取自https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element

标签值场景的可访问性

Accessibility for label value scenarios

wai-aria

web-accessibility

警告 - 您确定要干扰屏幕 reader？