您好,我需要为我的自定义下拉按钮添加键盘导航和辅助功能。你有什么想法?我想过使用 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>
最佳答案
Mozilla 基金会描述了一种用于自定义列表框元素的技术:Using the listbox role这意味着多重考虑:
- 赋予元素
listbox
Angular 色 - 赋予
option
不同选择的 Angular 色 - 管理键盘辅助功能的不同元素的焦点
- 对当前焦点元素使用
aria-activedescendant
- 对当前选中的元素使用
aria-selected
WCAG 在页面 Listbox examples 中有完整的工作示例但此页面仍在开发中。
关于javascript - 自定义下拉按钮的辅助功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46217398/