ARIA 标签错误
元素的类型为 input、 button、 image-button 或 landmark ,但没有辅助名称。
错误
此错误适用于:
- 表单输入字段:
- HTML 标记 — input[type= “text|password|checkbox|radio|file|email|tel|color|date|datetime|datetime|datetime-local|time|week|month|number|range|search|url”], select、 datalist 和 textarea。
- WAI-ARIA 角色 - 复选框、 组合框、 列表框、 单选框、 单选按钮、 文本框、 树、 滑块和 旋转按钮。
- 图像/图像按钮/按钮
- HTML 标记 - img、 input[type=“image|button”]和 按钮。
- WAI-ARIA 角色 - img 和 按钮。
- 特征点
- WAI-ARIA 角色 - 区域、横幅、补充、contentinfo、表单、main、导航和搜索。
备注
即使对于默认基于内部 HTML 内容设置辅助名称的元素,AccChecker 也会显示此错误, (查看上述示例中的 横幅 元素) 。 对于这些情况,可以禁止显示此错误。
所有语义上重要的 UI 元素(如表单字段 (例如 输入、 选择、 文本区域) 、图像、按钮和陆标 (表示逻辑区域) 的标记)都必须具有辅助名称,以便屏幕阅读器能够正确读出它们。
若要修复此错误,请采用下列方法之一设置辅助名称, (按首选项) 顺序列出。
- 窗体字段:使用 标签 标记并将 for 属性设置为目标字段的 ID 值。
- 图像/图像按钮:设置 alt 属性。
- 按钮:设置按钮描述文字文本。
- 对于任何元素:
- aria-labelledby 属性:设置为包含可访问名称字符串的元素的 ID 值。
- aria-label 属性:设置为辅助名称字符串。
- title 属性:设置为辅助名称字符串 (同时创建 工具提示) 。
<!-- For landmark tags, set the accessible name by using the aria-labelledby
attribute to reference the visible headers. -->
<h1 id="formHeader">Application Form</h1>
<form aria-labelledby="formHeader">
<!-- For input fields, use the LABEL tag with the for attribute. -->
<label for="fullName">Full Name</label>
<input id="fullName" type="text" />
<!-- If there is no visible text that can be referenced, set the accessible
name by using aria-label or title attributes. -->
<input type="file" aria-label="Your photo"/>
<!-- For images, use the alt attribute. -->
<img src="…" alt="Uploaded photo" />
<!-- For buttons, caption text is also used as the accessible name. -->
<button onclick="processForm()">Send</button>
<!-- For image buttons, use the alt attribute to define the accessible name. -->
<input type="image" src="images/moreinfo.png" alt="Show more info"/>
<!-- For elements with inner text this error can be suppressed because the
accessible name is set by default. -->
<div role="banner">Accessible name set by default</div>
</form >