在role="listbox“中添加role="listitem”

Question

在更新网页时，我有一个控件，它基本上是一个多选择控件，如下所示。

​

​

一旦用户将焦点设置在textbox (带有紫色边框的文本框)上，下面的框就会可见，在选中这些项目时，同样的内容会附加到上面的文本框中。

问题：

我的问题更多的是从可访问性的角度。允许辅助技术正确阅读(叙述者)此控件。我将role="listbox"用于文本框，role='listitem'用于每个复选框，我对此理解错误，因为应该将listitem作为直接子元素添加到listbox。但就我而言，这是不可能的。

有什么方法可以把textbox和checkbox list连接起来，让叙述者把它们当作一个单独的控件吗？

<div class='multiselect_wrapper'>
     <input type="text" role='listbox' aria-multiselecttable='true' />
     <div class="chkList">
           <fieldset>
                <div>
                    <label role="listitem" for='chk1'>
                          <input type='checkbox' id='chk1'>Pizza
                    </label>
                    <label role="listitem" for='chk2'>
                          <input type='checkbox' id='chk2'>Lemonade
                    </label>
                    <label role="listitem" for='chk3'>
                          <input type='checkbox' id='chk3'>Fruit Salad
                    </label>
                </div>
           </fieldset>
     </div>
</div>

Answer 1

下面是一个非常简单的复选框列表的快速示例：

编码.io /anon/pen/eboEVB

这只是一个非常不完整的例子。要从它中激发灵感，但不要照搬它。

注意的几点：

• 正如您实际上所提到的，具有role=listitem的项必须是带有role=listbox的元素的子元素。这是一项义务，意味着如果您想要拥有正确和可访问的代码，您别无选择，只能保留文本框apar。
• 如果将role=listitem设置为复选框，它将覆盖默认的隐式role=checkbox。其结果是屏幕阅读器将不再将其视为复选框，因此将继续读取标签，而不再读取它们的状态(选中或未选中)。必须将role=listitem设置为不存在默认隐式角色的另一个元素，例如示例中使用的div。
• 注意焦点是如何给予复选框，而不是曲目。通过这种方式，我们获得了免费的正常键盘处理(即空格键切换)，以及默认的屏幕阅读器与复选框的行为(即宣布标签和状态+帮助，如“按空格键改变状态”)。
• 您被命令将属性aria-posinset和aria-size设置为每个项，否则屏幕阅读器可能看不到您的列表框。
• 在所有项中设置tabindex=-1，但当前选定的项除外，该项必须具有tabindex=0。通常在列表框中，键盘用户不会在每一项上标签，并且在列表框中使用箭头键从一个项目转到另一个项目。这个例子是不完整的，这将是很好的支持主页，结束，页面向上和页面向下。
• 不要忘记保持listbox的aria-后代属性与选择更改保持同步。这一点很重要，因为屏幕阅读器使用它来判断当前选择的项目。

编辑:我无法发布我的HTML+js代码，请帮助！我试图张贴一个链接到代码，但它被拒绝。代码相当长，但无论如何，如果我将代码缩进4个空格(使用Ctrl+K)，它仍然会被解释，而不是仅仅显示出来。