使用英语阅读

通过


ARIA 标签错误

文本

元素的类型为 inputbuttonimage-buttonlandmark ,但没有辅助名称。

类型

错误

说明

此错误适用于:

  • 表单输入字段:
    • HTML 标记 — input[type= “text|password|checkbox|radio|file|email|tel|color|date|datetime|datetime|datetime-local|time|week|month|number|range|search|url”]selectdatalisttextarea
    • WAI-ARIA 角色 - 复选框组合框列表框单选框单选按钮文本框滑块旋转按钮
  • 图像/图像按钮/按钮
    • HTML 标记 - imginput[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 >