Question

您好我需要为我的自定义下拉按钮添加键盘导航和辅助功能。你有什么想法？我想过使用咏叹调？

<div class="dropdown-select">
  <input type="hidden" name="select_offer" class="dropdown-select--value" />
  <button class="dropdown-select--btn"> Lorem ipsum
    <span class="sr-only">(rozwiń listę)</span>
  </button>
  <ul class="opl-dropdown-select--list">
    <li>
      <a href="#" data-option="value1">Lorem ipsum</a>
    </li>
    <li>
      <a href="#" data-option="value2">Lorem ipsum</a>
    </li>
    <li>
      <a href="#" data-option="value3">Lorem ipsum</a>
    </li>
  </ul>
</div>

Answer 1

Mozilla Foundation已经描述了一种自定义列表框元素的技术：Using the listbox role，这意味着需要考虑多个因素：

将listbox角色赋予元素
在不同的选择中赋予option角色
管理键盘辅助功能的不同元素的焦点
使用aria-activedescendant作为当前关注元素
将aria-selected用于当前所选元素

WCAG在页面Listbox examples中有完整的工作示例，但此页面仍处于开发阶段。

Answer 2

设置对div的关注将是一个问题。 tabindex不是可以应用于HTML中的div的有效属性＆lt; 5.

它必须有一些元素链接a，textarea，button，input，object，select。

因此，我们以类似于

的方式实施

fiddle in this question

我们将文本框放在div

中

Answer 3

以下是我如何做到这一点：

<div class="dropdown-select" role="menubar">
  <input type="hidden" name="select_offer" class="dropdown-select--value" />
  <button id="custom-dropdown" class="dropdown-select--btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lorem ipsum
    <span class="sr-only">(rozwiń listę)</span>
  </button>
  <ul class="opl-dropdown-select--list" aria-label="submenu" role="menu" aria-labelledby="custom-dropdown">
    <li role="menuitem">
      <a href="#" data-option="value1">Lorem ipsum</a>
    </li>
    <li role="menuitem">
      <a href="#" data-option="value2">Lorem ipsum</a>
    </li>
    <li role="menuitem">
      <a href="#" data-option="value3">Lorem ipsum</a>
    </li>
  </ul>
</div>

使用aria-expanded属性非常理想，但如果使用，则需要在元素展开和折叠时分别正确显示true / false值。

自定义下拉按钮的辅助功能

3 个答案: