自定义元素和可访问性

Question

我想使用当前的Web组件规范实现一个列表框小部件.此外,生成的列表框应符合ARIA标准.实例化列表框小部件应该如下所示:

<x-listbox>
    <x-option>Option 1</x-option>
    <x-option>Option 2</x-option>
</x-listbox>

出于清洁和封装的目的,其他所有内容都应该以阴影dom呈现.为了实现这个小部件,两个自定义元素,<x-listbox>并<x-option>进行登记.影子dom的顶级元素<x-listbox>是一个<div>带有可访问性role=listbox和aria-activedescendent属性的<x-listbox>元素(我不希望元素上有这些属性,因为它们是实现细节.)

为了aria-activedescendent工作,需要选项元素的ID.将id直接放在<x-option>元素上将不会有两个原因:首先,它会污染使用列表框小部件的文档的id命名空间.其次,更重要的是,id不能跨越阴影边界(这是阴影dom的一个目的),因此选项的id必须<div>与aria-activedescendent属性一样生成在相同的阴影dom中.

对此的解决方案是将每个<x-option>被渲染为阴影dom内部的内容<x-listbox>与另一个<div>(属于该阴影dom),其上可以放置id.

我的问题是:这是正确的方法,如何使用自定义元素和阴影dom web apis实现这一点？

Answer 1

您可能应该通过创建一个select元素（使用 JavaScript）来更好地实现这一点。这应该确保屏幕阅读器正确地将其识别为从列表中选择一个或多个值的输入。

在您的元素下方添加select如下元素<x-listbox>：

<select class="only-screenreader">
   <option>Option 1</option>
   <option>Option 2</option>
</select>

然后添加aria-hidden="true"到您的自定义<x-listbox>元素。

最后应用 CSS 使屏幕阅读器选择元素不可见。

.only-screenreader {
   position:absolute;
   left:-10000px;
   top:auto;
   width:1px;
   height:1px;
   overflow:hidden;
}

这是我的方法，但也许有更好的方法。