时间戳

首页 > 解决方案 > WCAG AA 合规性：选择元素没有可访问性 API 可用的值

select - WCAG AA 合规性：选择元素没有可访问性 API 可用的值

问题描述

我在 html 中有这段代码。

<select
    class="news-form-control custom-select"
    name="filterState" id="filterState" 
    role="listbox"
    contenteditable="true"
    aria-label="Enter state"
    aria-required="true">

    <optgroup>
        <option value="ALL">ALL</option>
        <option value="AB">AB</option>
        <option value="AE">AE</option>
        <option value="AK">AK</option>
        <option value="AL">AL</option>
    </optgroup>

</select>

自动 WCAG 2.0 AA 级合规性审核会产生以下错误：

“此选择元素没有可访问 API 可用的值。”

我已经为下拉列表中的每个选项和选择元素赋予了一个值。那么为什么我仍然会收到此错误？

标签： selectaccessibilityoptionwcag

解决方案

此消息来自 HTML_CodeSniffer 规则（可以单独使用，也可以在其他工具（例如pa11y ）中使用）。您可以通过将 HTML 代码粘贴到HTML_CodeSniffer 主页上的工具中来查看报告。

首先要注意的是，它被报告为警告，而不是您的问题所说的错误。这不是彻底的 WCAG 失败，但它可以改进，所以让我们看看如何做到这一点。

该警告与 WCAG 成功标准 4.1.2“名称、角色、值”有关。这是为了确保辅助技术（例如屏幕阅读器）具有所需的所有信息，以便用户可以正确理解此控件：

  • 名称：此输入的名称，即用户提供的信息。在这种情况下，它是“进入状态”。
    • 使用aria-label它是可以的，但它只对屏幕阅读器用户有帮助。我建议将其替换为 visible <label for="filterState">，以便所有用户都能理解。
  • 作用：是什么类型的输入。这是一个下拉选择器。
    • 使用一个<select>元素就足够了。删除该role="listbox"属性 - 这里不需要它。（角色属性主要用于在 JS 中编写自定义控件。）
  • 值：这是 HTML_CodeSniffer 发出警告的部分。它表示输入的当前值，以便用户了解他们选择了什么。
    • 对于 HTML <select>，这意味着向元素添加selected属性。<option>
    • 如果初始值未定义也没关系。这就是为什么它被归类为警告，而不是错误。
    • 在这种情况下，由于有一个“全部”选项，因此将该选项标记为selected页面首次显示给用户时会很有帮助。这将使警告消失。

我不知道你为什么在contenteditable这里有这个属性。您也很可能将其删除。

推荐阅读