html - A11y 用于带有 optional 组的选择输入

Question

我有一个选择输入，它具有分层选项组。我无法使用 optgroup因为组的标题应该是可选择的。例子:

<select>
  <option class="category">Mammals</option>
  <option class="child"> → Cats</option>
  <option class="child"> → Dogs</option>
  <option class="category">Birds</option>
  <option class="child"> → Parrots</option>
  <option class="child"> → Eagles</option>
</select>

以可访问的方式标记这些组的最佳方式是什么？我想使用 group角色，也许。但是，这通常用于子项可以是同一 DOM 子树的一部分时。
根据 MDN on using the group role :

Group members that are outside of the DOM subtree of the group need to have explicit relationships assigned to them in order to participate in the group.

所以，显然，应该可以有这样的团体，但我不确定如何拥有那些“明确的关系”。
我想我可以将父级标记为 aria-owns每个 child ，但我不确定这是否是最好的方法。
此外，虽然我也认为选项文本的呈现不足以让屏幕阅读器用户理解其中一些选项是类别(特别是因为在我的实际用例中，这些不是那么明显的“类别”)。是否建议使用替代 aria-label 标记类别标题？ (例如 aria-label="Category: Mammals" )使其更明确？

Answer 1

我的方法可能是实际使用 optgroup ，但包括一个额外的可选 option对于整个类别(无论是指类别中的任何动物、类别中的所有动物还是其他决定您将使用的标签)。

<select>
  <optgroup label="Mammals">
    <option class="category">Any/All Mammals</option>
    <option class="child">Cats</option>
    <option class="child">Dogs</option>
  </optgroup>
  <optgroup label="Birds">
    <option class="category">Any/All Birds</option>
    <option class="child">Parrots</option>
    <option class="child">Eagles</option>
  </optgroup>
</select>

这实现了optgroup的语义值同时允许选择整个类别。
值得注意的是:我在“任何/全部”选项中包含类别名称时非常慎重，因为 Accessibility Support因为有时缺少 optgroup。所以在类别名称中明确是一个安全的赌注。