我有一个选择输入，它有分层选项组。我不能使用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关于使用group角色:
在组的DOM子树之外的组成员需要有明确的关系分配给他们，以便参与到组中。
所以，显然，应该有可能有这样的组，但我不确定如何拥有那些"显式关系"。
我想我可以标记父母aria-owns每个孩子，但我不确定如果这是最好的方式去。
另外，虽然我也认为选项文本的表示不足以让屏幕阅读器用户理解其中一些选项是类别(特别是因为在我的实际用例中，这些不是那么明显的"类别")。是否建议用替代aria-label(例如aria-label="Category: Mammals")标记类别标题以使其更明确?
我的方法可能是实际使用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的语义值，同时允许选择整个类别。
值得注意的是:我非常慎重地将类别名称包含在"任意/全部"中。选项，因为有时缺乏对optgroup的可访问性支持。因此，在类别名称中显式是一个安全的选择。