Question

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

一旦用户将焦点放在文本框上（带有紫色边框的文本框，则下面的框将可见，其中在检查项目时，将其附加到上面的文本框。

问题：

我的问题更多是从“辅助功能”角度来看。为了使辅助技术能够正确阅读（讲述人）此控件。我在文本框中使用了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

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

codepen .io / anon / pen / eboEVB

这只是一个非常不完整的示例。一定要从中激发灵感，但不要照原样复制粘贴。

注意事项：

正如您已经有效提到的那样，具有role = listitem的项目必须是具有role = listbox的元素的子项。这是一项义务，这意味着如果您想拥有正确且可访问的代码，则别无选择，只能保持文本框不变。
如果将role = listitem设置为复选框，它将覆盖默认的隐式role = checkbox。结果是屏幕阅读器将不再将其视为复选框，因此将继续读取其标签，但不再读取其状态（选中或未选中）。您必须将role = listitem设置为另一个没有默认隐式角色的元素，例如示例中使用的divs。
请注意如何将焦点放在复选框而不是列表项上。通过这种方式，我们免费获得正常的键盘处理（即空格键切换），以及屏幕阅读器具有默认行为的复选框（即宣布标签和状态+帮助，例如“按空格键更改状态”）
建议您为每个项目设置aria-posinset和aria-size属性，否则屏幕阅读器可能不会这样显示您的列表框
在除当前所选项目（必须具有tabindex = 0）之外的所有项目中设置tabindex = -1。通常，在列表框中，键盘用户不会在每个项目上进行制表，而是使用箭头键将它们从列表中移到另一个。该示例是不完整的，很好地支持home，end，page up和page down。
不要忘记使列表框的aria-descendant属性与选择更改保持同步。这很重要，因为屏幕阅读器会使用它来告知当前选中的项目

编辑：我无法发布我的HTML + js代码，请提供帮助！我正在尝试发布指向Codepen的链接，但该链接被拒绝。该代码很长，但是无论如何，如果我将其缩进4个空格（使用Ctrl + K），它仍然会被解释而不是仅仅显示。

从role =“ listbox”中添加role =“ listitem”

1 个答案: