Question

我在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可用的值。”

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

Answer 1

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

首先要注意的是，它被报告为警告，而不是您的问题所说的错误。这不是完全的WCAG故障，但是可以改善，因此让我们看一下如何做到这一点。

该警告与WCAG成功标准4.1.2“ Name, Role, Value”有关。这是关于确保辅助技术（例如屏幕阅读器）具有所需的所有信息，以便用户可以正确理解此控件：

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

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

Answer 2

您真的需要adapter = new PageAdapter(getSupportFragmentManager(),tabLayout.getTabGravity());吗？仅在要将选项分组为子集时才有必要，但是只有一个。

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

如果您真的需要optgroup，请注意以下几点：

按照建议将标签添加到optgroup here。
遵循列表框模式之一，例如建议的“可折叠下拉列表框” here。

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

2 个答案: