标签值方案的可访问性

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"从屏幕阅读器中隐藏原始 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>

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

99%的情况下，您不应该操纵屏幕阅读器如何阅读带有标签，隐藏文本等的内容。

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

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

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

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

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

强烈建议作者将div 元素视为最后的手段，因为当没有其他元素合适时。使用更合适的元素而不是div 元素可以为读者带来更好的可访问性，并为作者带来更容易的可维护性。

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