是否有关于何时选择 aria-descriptionby 而不是 aria-labelledby 的指导? [英] Is there any guidance on when to choose aria-describedby instead of aria-labelledby?

问题描述

是否有关于何时选择 aria-describedby 而不是 aria-labelledby 的指导?

阅读关于这两个属性的 MDN 指南，我觉得它们相似且可以互换.两者似乎都表明它们可用于输入标签和其他内容，但许多合规工具似乎不喜欢输入标签上的 aria-describeby.我讨厌盲目地应用某个特定的属性，因为某个工具说我应该这样做，而且我更愿意知道一些具体的时间和原因

以下是 MDN 上关于两个 aria 属性的条目:

aria-labelledby 属性

aria-描述的属性

解决方案

它们确实非常相似，只有一个关键区别.

aria-labelledby

aria-labelledby 将覆盖任何现有标签，包括任何语义派生标签.

例如，如果您有一个 并使用 aria-labelledby，则按钮文本将被您列为标签的第一项覆盖.>

在以下示例中，如果您使用 Tab 键切换到按钮(使用鼠标悬停将在某些屏幕阅读器中读取按钮文本)，它将读取第一个标签"；然后是更多信息"而不是不会阅读此文本".

此文字不会被读取</button><p id="lbl1">第一个标签</p><p id="lbl2">更多信息</p>

aria-描述的

另一方面，

aria-描述的 会将链接的信息作为附加信息读取.它将在按钮语义派生信息之后读取此信息.

因此在下面的示例中，它将读取此文本现在将被读取"、第一个标签"和第一个标签".然后是更多信息".您需要再次聚焦按钮(而不是鼠标悬停)才能看到这种行为.

<button aria-describeby="lbl1 lbl2">现在将阅读此文本</button><p id="lbl1">第一个标签</p><p id="lbl2">更多信息</p>

限制

警告 - 支持aria-labelledby 和 aria-scribedby 真的没有你想象的那么好.

如果信息真的很重要(即元素没有它就没有意义)，那么您应该改用视觉隐藏文本.

我有一个 Stack Overflow 回答关于您应该用于视觉隐藏文本的类，而不是大多数库中内置的 sr-only 类.

请注意，在某些情况下您不能使用它(即在 s 中，但对于基本信息 这是唯一 100% 支持的方法(一直回到 IE6)

.visually-hidden {边框:0；填充:0；边距:0；位置:绝对！重要；高度:1px；宽度:1px；溢出:隐藏；剪辑:矩形(1px 1px 1px 1px)；/* IE6, IE7 - 0 高度剪辑，位于可见 1px 框的右下角 */剪辑:矩形(1px，1px，1px，1px)；/* 可能已弃用，但我们需要支持旧版浏览器 */剪辑路径:插入(50％)；/*现代浏览器，剪辑路径从每个角落向内工作*/空白:nowrap；/* 添加一行以阻止单词混在一起(因为它们进入单独的行并且一些屏幕阅读器不理解换行符为空格 */}

<button>此文本现在将被读取<span class="visually-hidden">，第一个标签</span><span class="visually-hidden">,更多信息</span></button>

Is there any guidance on when to choose aria-describedby instead of aria-labelledby?

Reading the MDN guidance on the two attributes, I get the feeling they are similar and interchangeable. Both seem to suggest that they can be used for input labels and other content but many compliance tools do not seem to like aria-describeby on input tags. I hate applying a particular attribute blindly just because a tool says I should and I would prefer to know something concrete about the when and why

Here are the entries on MDN regarding the two aria attributes in question:

aria-labelledby attribute

aria-describedby attribute

解决方案

They are indeed very similar, there is one key distinction.

aria-labelledby

aria-labelledby will overwrite any existing labelling including any semantically derived label.

For example if you had a <button> and used aria-labelledby the button text would be overwritten by the first item you listed as the label.

In the following example if you tab to the button (using the mouse over will read the button text in some screen readers) it will read "first label" then "Further information" instead of "this text will not be read".

<button aria-labelledby="lbl1 lbl2">This text will not be read</button>
<p id="lbl1">first label</p>
<p id="lbl2">Further information</p>

aria-describedby

aria-describedby on the other hand will read the linked information as additional information. It will read this after the button semantically derived information.

So in the below example it will read "This text will now be read", "first label" then "Further information". Yet again you need to focus the button (not mouse over) to see this behaviour.

<button aria-describedby="lbl1 lbl2">This text will now be read</button>
<p id="lbl1">first label</p>
<p id="lbl2">Further information</p>

Limitations

Warning - support for aria-labelledby and aria-describedby is really not as good as you might think.

If information is truly important (i.e. the element will not make sense without it) then you should revert to using visually hidden text instead.

I have a Stack Overflow answer on the class you should use for visually hidden text instead of the built in sr-only class in most libraries.

Please note there are certain times you cannot use this (i.e. within a <select>s <option>, but for essential information this is the only 100% supported way to do it (all the way back to IE6)

.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 */
}

<button>This text will now be read <span class="visually-hidden">,first label</span> <span class="visually-hidden">,Further information</span></button>

这篇关于是否有关于何时选择 aria-descriptionby 而不是 aria-labelledby 的指导?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

登录 关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆