WCAG AA Compliance:select元素没有可访问性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>

全部的
AB
AE
AK
艾尔

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

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

---

I为下拉列表中的每个选项和选择元素指定了一个值。那么为什么我仍然会遇到这个错误呢？

您真的需要

optgroup

？仅当您希望将选项分组到子集中时才需要，但您只有一个

也许您在这里只显示了一个，但代码中有多个？但是如果你没有它，这个错误信息很可能会消失

如果您确实需要

optgroup

s，您可以查看以下几点：

• 根据建议，向

  optgroup

  s添加标签
• 遵循列表框模式之一，如建议的“可折叠下拉列表框”

---

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

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

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

• 名称：此输入的名称，即用户提供的信息。在这种情况下，它是“进入状态”。
  • 为此使用

    aria标签

    是可以的，但它只会帮助屏幕阅读器用户。我建议将其替换为可见的
    ，以便所有用户都能理解
• 角色：它是什么类型的输入。这是一个下拉选择器。
  • 使用
    元素就足够了。删除

    role=“listbox”

    属性-此处不需要它。（角色属性主要用于在JS中编写自定义控件。）
• 值：这是HTML\u CodeSniffer发出警告的部分。它表示输入的当前值，以便用户了解他们选择的内容。
  • 对于HTML
    ，这意味着向
    元素添加

    选定的
    属性

  • 如果初始值未定义，则可以。这就是为什么它被归类为警告，而不是错误
  • 在这种情况下，由于有一个“all”选项，当页面第一次显示给用户时，将该选项标记为

    selected

    。这将使警告消失

---

我不知道为什么这里有

contenteditable

属性。您很可能也可以删除它。

关于

的建议很好，但您的回答没有解决这个问题，这是关于自动WCAG检查器的消息。将它们发送给ARIA创作实践也没有什么帮助，因为它们很快就可以成功地使用纯HTML。第一个链接指向一种纯（无ARIA）HTML方法，使用带有适当标签的optgroup（对WCAG合规性至关重要），尽管-是的-它没有解决问题以及您的答案。（我没有意识到这是CodeSniffer输出。很好的回答！）当你的问题是关于错误或警告消息时，记得说你使用了哪种工具。@Brennayoung-感谢你清理了问题的分解标记。