在标签和输入上带有 for 和 aria-describedby 的双向 ARIA

Question

典型的输入/标签对：

<label for="Foo">Hello</label>
<input id="Foo" type="text" ... />

for

表示标签与特定输入相关联。

我见过这样做的：

<label for="Foo" id="FooLabel">Hello</label>
<input id="Foo" aria-describedby="FooLabel" type="text" ... />

aria-describedby

表示输入与特定标签相关联。所以有双向关联。

那是多余的，还是有某种帮助？

Answer 1

完全没用

通过标签上的 for 属性和输入上的 aria-labelledby 属性在字段和标签之间建立双向关联是没有用的。

由于ARIA的第一条规则是能不用就不要用，所以标签上的for属性是首选。 aria-label 和 aria-labelledby 属性应该用于无法使用简单的传统标签的情况。

现在，aria-description 和 aria-describedby 与 aria-label 和 aria-labelledby 并不完全相同。 虽然屏幕阅读器在任何情况下都会阅读标签，但描述通常只会按需阅读，并且应该用于提供有关在该字段中输入的内容的额外指示。通常，它可能是精度，如日期格式、密码要求等。

在您的示例中，描述完全没有用，因为它再次引用了标签。因此，当描述被调用时，屏幕阅读器将重复标签，而不需要任何额外的精度。

Answer 2

交互式元素，例如

<input>

，具有易于访问的名称和易于访问的描述。 Accessible Name and Description Computation 1.1中定义了如何计算名称/描述。它本质上是在元素的哪些部分用于生成名称或描述时使用优先级列表。如果您碰巧为名称或描述指定了多个来源，例如

aria-label

和

<label>

元素，那么优先级列表会显示哪一个将被接受（

aria-label

在这种情况下，步骤 2C，比较到

<label>

，步骤2D）。

当您导航到交互元素时，大多数屏幕阅读器会宣布：

• 元素的可访问名称，
• 元素的作用（例如按钮或链接或文本输入），
• 元素的值或状态（如果适用），
• 和元素的描述。

所以在你的例子中，你有一个可访问的名称（

<label>

）和一个可访问的描述（

aria-describedby

）和both将被宣布。由于两者的文本相同，您会听到重复的文本：

“你好，编辑，你好”

第一个“你好”是标签（或可访问的名称），第二个“你好”是描述。

现在，许多屏幕阅读器应用启发式方法，如果可访问的名称和可访问的描述是相同的文本，那么它不会读出描述。但是一些屏幕阅读器会同时宣布两者。