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

8e2ybdfx  于 2023-03-06  发布在  Bootstrap
关注(0)|答案(2)|浏览(220)

典型的输入/标签对:

<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表示输入与特定标签相关联,因此存在双向关联。
这是多余的,还是有帮助的?

mwecs4sa

mwecs4sa1#

完全没用。
通过label上的for属性和input上的aria-labelledby属性在字段和标签之间建立双向关联是没有用的。
因为ARIA的第一条规则是如果你可以不使用它就不要使用它,所以标签上的for属性是首选的。当不可能使用简单的传统标签时,应该使用aria-label和aria-labelledby属性。
现在,aria-description和aria-describedby与aria-label和aria-labelledby并不完全相同。虽然屏幕阅读器在任何情况下都会读取标签,但描述通常只在需要时读取,并且应该用于给予在字段中输入什么的附加指示。通常,它可以是日期格式、密码要求等精度。
在您的示例中,描述完全无用,因为它再次引用了标签。因此,当调用描述时,屏幕阅读器将重复标签,而没有任何额外的精度。

oxcyiej7

oxcyiej72#

交互元素(如<input>)既有可访问名称,也有可访问说明。名称/说明的计算方式在可访问名称和说明计算1.1中定义。它本质上使用优先级列表来确定元素的哪些部分用于生成名称或说明。例如,如果您碰巧为名称或说明指定了多个源,aria-label<label>元素,则优先级列表向您显示将遵循哪一个(在本例中为aria-label,步骤2C,与<label>进行比较,步骤2D)。
当您导航到交互式元素时,大多数屏幕阅读器都会提示:

  • 元素的可访问名称,
  • 元素的角色(诸如按钮或链接或文本输入),
  • 元素的值或状态(如果适用),
  • 和元素的描述。

因此,在示例中,您同时拥有一个可访问的名称(<label>一个可访问的描述(aria-describedby)和both,由于两者的文本相同,您将听到重复的文本:
“你好,编辑,你好”
第一个“Hello”是标签(或可访问名称),第二个“Hello”是描述。
现在,许多屏幕阅读器应用启发式算法,如果无障碍名称和无障碍描述是相同的文本,那么它不会宣布描述,但有些屏幕阅读器会同时宣布两者。

相关问题