代码之家 › 专栏 › 技术社区 › Cyberpks

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

assistive-technology accessibility html

0

Cyberpks · 技术社区 · 7 年前

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

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

问题:

我的问题更多的是从可访问性的角度。允许辅助技术正确读取(讲述人)此控件。我正在使用 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>

1 回复 | 直到 7 年前

1

QuentinC 7 年前

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

代码笔。io/anon/pen/eboEVB

这只是一个相当不完整的例子。一定要从中获得灵感,但不要照样复制粘贴。

注意以下几点:

正如您提到的,role=listitem的项必须是role=listbox元素的子项。这是一项义务,也就是说,如果您想获得正确且可访问的代码,您别无选择,只能将文本框保留为apar。
如果将role=listitem设置为复选框,它将覆盖默认的隐式role=复选框。其结果是,屏幕阅读器将不再将它们视为复选框,因此将继续读取它们的标签,但不再读取它们的状态(已选中或未选中)。必须将role=listitem设置为没有默认隐式角色的另一个元素,例如示例中使用的div
请注意,焦点是如何分配给复选框而不是列表项的。这样,我们可以免费获得正常的键盘处理(即空格键切换),以及屏幕阅读器的默认行为和复选框(即公告标签和状态+帮助,如“按空格键更改状态”)
建议您为每个项目设置属性aria posinset和aria size,否则屏幕阅读器可能无法看到您的列表框
在所有项目中设置tabindex=-1,但当前选定的项目除外,该项目必须具有tabindex=0。通常情况下,在列表框中,键盘用户不需要在每个项目上进行制表,而是在项目进入列表框后使用箭头键从一个项目转到另一个项目。这个例子是不完整的,它将很好地支持主页,结束,页面向上和页面向下以及。
不要忘记保持列表框的aria子体属性与选择更改同步。这一点很重要,因为屏幕阅读器使用它来判断当前选择的项目

编辑:我无法发布我的HTML+js代码,请帮助! 我正试图发布一个指向codepen的链接,但被拒绝了。代码很长,但无论如何,如果我将其缩进4个空格(使用Ctrl+K),它仍然会被解释,而不仅仅是显示。