网络辅助功能:html 本机下拉菜单 - 点击回车打开菜单项
web accessibility : html native dropdown - open menu items on enter click
在 select 上单击输入,默认情况下会根据可访问性标准提交 on.As 表单,如果焦点在 select 元素上,则在输入单击时应打开列表 items.I想知道是否可以使用符合可访问性标准
的原生 select 元素制作可访问的下拉列表
<div class="custom-dropdown">
<select id="cities" name="select">
<option value="1">Delhi</option>
<option value="2">Mumbai</option>
</select>``
</div>
我已阻止默认提交行为。
$('.custom-dropdown').keydown(function (event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
我试过 keyup 事件来触发点击事件,但它不起作用
$('#cities').keyup(function (e) {
if (e.keyCode == 13) {
$("#cities").trigger("click");
}
});
我很确定唯一会自动提交表单的元素是提交按钮。
<input type="submit" value="foo">
或
<button>foo</button>
(<button>
元素的默认 type
是 "submit")
<select>
没有定义为提交表单。当您按 enter 时,您确定焦点在
您还应该查看“4.10.18.6. Form submission”
的规范
您的担忧是基于示例,而不是规范:
The example listbox on this page implements the following keyboard interface
如果您参考 Keyboard Interaction for the Listbox Design Pattern,则未提及 Enter 键。
该示例使用 Enter,因为列表框的触发器是一个按钮。
此外,根据 First rule of ARIA use
,ARIA 规则一般适用于无法使用标准元素的情况
If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
换句话说,当您不实现自己的控件时,您不应该关心这些规则。
在 select 上单击输入,默认情况下会根据可访问性标准提交 on.As 表单,如果焦点在 select 元素上,则在输入单击时应打开列表 items.I想知道是否可以使用符合可访问性标准
的原生 select 元素制作可访问的下拉列表<div class="custom-dropdown">
<select id="cities" name="select">
<option value="1">Delhi</option>
<option value="2">Mumbai</option>
</select>``
</div>
我已阻止默认提交行为。
$('.custom-dropdown').keydown(function (event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
我试过 keyup 事件来触发点击事件,但它不起作用
$('#cities').keyup(function (e) {
if (e.keyCode == 13) {
$("#cities").trigger("click");
}
});
我很确定唯一会自动提交表单的元素是提交按钮。
<input type="submit" value="foo">
或
<button>foo</button>
(<button>
元素的默认 type
是 "submit")
<select>
没有定义为提交表单。当您按 enter 时,您确定焦点在
您还应该查看“4.10.18.6. Form submission”
的规范您的担忧是基于示例,而不是规范:
The example listbox on this page implements the following keyboard interface
如果您参考 Keyboard Interaction for the Listbox Design Pattern,则未提及 Enter 键。
该示例使用 Enter,因为列表框的触发器是一个按钮。
此外,根据 First rule of ARIA use
,ARIA 规则一般适用于无法使用标准元素的情况If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
换句话说,当您不实现自己的控件时,您不应该关心这些规则。