标签值方案的可访问性

Question

我对制作标签的正确方法有什么疑问，它对于用户可访问的价值也有疑问。例如，我有一个部分显示了用户的以下详细信息

1. 约翰名字
2. 史密斯姓

在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>

但是当我这样做时，屏幕会逐一读取它们。而不是告诉*名字约翰*（一起读），它读为

名字

John

（（只有在我使用键盘上的向下箭头后才能阅读）我认为这是不对的。 （我已经使用箭头键读出了约翰·史密斯的名字。它没有一起读名字和约翰·史密斯）

<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"从屏幕阅读器中隐藏原始的两列，然后在<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>

警告-您确定要干扰屏幕阅读器吗？

99％的时间，您不应该操纵屏幕阅读器阅读带有标签，隐藏文本等内容的方式。

我实际上认为原始行为是正确的（但这是基于上下文之外的信息）。

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

但是没有看到应用程序，上下文等。除了猜测外不可能做其他任何事情，所以我给这个例子带来了疑问的好处。

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

您还应该考虑div是否应包含在语义上正确的段落。