自定义下拉按钮的可访问性答案

【问题标题】：Accessibility for custom dropdown button自定义下拉按钮的可访问性
【发布时间】：2017-09-14 11:03:26
【问题描述】：

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

<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>

【问题讨论】：

标签： javascript html accessibility wcag wcag2.0

【解决方案1】：

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

为元素赋予listbox 角色
在不同的选择中赋予 option 角色
管理键盘可访问性的不同元素的焦点
将aria-activedescendant 用于当前焦点元素
对当前选定元素使用aria-selected

WCAG 在页面Listbox examples 中有完整的工作示例，但该页面仍在开发中。

【讨论】：

【解决方案2】：

将焦点放在 div 上将是一个问题。 tabindex 不是可应用于 HTML

它必须有一些元素链接a、textarea、按钮、输入、对象、选择。

所以，我们以类似于

的方式实现

fiddle in this question

我们把文本框放在一个div里面

【讨论】：

【解决方案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 值。

【讨论】：