0

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

在此处输入图像描述

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

问题：

我的问题更多来自可访问性的角度。允许辅助技术正确阅读（叙述者）此控件。我正在使用role="listbox"文本框和role='listitem'每个复选框，我理解错误的方式，因为listitem应该作为直接子级添加到listbox. 但就我而言，这是不可能的。

有什么方法可以连接textboxandcheckbox 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>
4

1 回答 1

1

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

codepen .io /anon/pen/eboEVB

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

几个注意点：

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

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

于 2019-01-16T17:41:58.463 回答