原文如下:
Form elements must have labels | Axe Rules | Deque University | Deque Systems
编程式的关联标签和窗体控件。
下面以推荐程度从高到低依次排列,使用label元素->使用for和id属性显示关联,就这样。
label标签的包裹 or 不包裹
<label for="firstname">First name:</label> <input type="text" id="firstname">
<label>First name: <input type="text"></label>
(这个不是很懂)
If the input is already labeled visually some other way, such as through a magnifying glass icon on a search submit button, it may be acceptable to use
aria-label
to create an invisible text label for screen readers to read.
好像是如果标签已经定义过,就采用这个属性隐式的表示。
<input type="text" aria-label="Search">
另一种方法(有时在添加 < label > 标签会破坏功能或样式,或者当多个标签应用于同一输入时使用)是使用 aria-labelledby 代替:
<div id="firstname">First name:</div> <input type="text" aria-labelledby="firstname">
<!--visual labels may be elsewhere in the content, such as in table headers-->
<div id="temperature">Temperature:</div>
<div id="high">High:</div>
<div id="low">Low:</div>
<!-- the inputs -->
<input type="text" aria-labelledby="temperature low">
<input type="text" aria-labelledby="temperature high">
最后可以使用placeholder属性提供可访问名称。
<input type="text" placeholder="Search">
看明白了,是为了让用户能更好的理解按钮、输入等的功能,而且也是为了残障人士的使用体验。
例外:按钮和隐藏输入是特殊的存在,没有必须标签的要求
感动