使用“aria-labelledby"的目的在已经标记的输入元素上? [英] The purpose of using "aria-labelledby" on already labeled input elements?

查看:49
本文介绍了使用“aria-labelledby"的目的在已经标记的输入元素上?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

很多 ARIA 演示网站使用的代码如下:

Many ARIA demonstration websites use code such as:

<label for="name" id="label-name">Your Name</label>
<input id="name" aria-labelledby="label-name" type="text">


但是在这种情况下使用 aria-labelledby 属性的目的是什么?input 元素已经被使用 for 属性的 label 元素标记了,不是吗?


But what's the purpose of using aria-labelledby attribute in this case? The input element has already been labeled by the label element which is using for attribute, isn't it?

推荐答案

Mozilla 开发者页面.也许他们最好的示例是用于将弹出菜单与父菜单项相关联 - 这是页面中的示例 7:

There's some good examples of its use at Mozilla Developer pages. Perhaps the best of their examples is where it's used to associate a popup menu with the parent menu item - it's Example 7 in the page:

<div role="menubar">  
    <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>  
    <div role="menu" aria-labelledby="fileMenu">  
        <div role="menuitem">Open</div>  
        <div role="menuitem">Save</div>  
       <div role="menuitem">Save as ...</div>  
       ...  
    </div>  
    ...  

ARIA 属性往往在构建可访问的富 Internet 应用程序中发挥最大作用:只要您坚持使用标准语义 HTML - 使用带有标准标签的表单 - 在all:所以没有理由在 LABEL/INPUT 对上使用它.但是,如果您是从头开始构建丰富的 UI"(DIV 和其他通过 javascript 添加交互性的低级元素),那么让屏幕阅读器知道更高级别的意图是必不可少的.

ARIA attributes tends to be of greatest use in building Accessible Rich Internet Applications: so long as you're sticking with standard semantic HTML - using forms with standards labels - you shouldn't need it at all: so there's no reason to use it on a LABEL/INPUT pair. But if you're building "rich UI" from scratch (DIVs and other low level elements with javascript adding interactivity), then it's essential for letting a screenreader know what the higher-level intent is.

这篇关于使用“aria-labelledby"的目的在已经标记的输入元素上?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆