1

在选择输入单击时，默认情况下会提交表单。根据可访问性标准，如果焦点在输入单击时的选择元素上，它应该打开列表项。我想知道是否可以使用符合要求的本机选择元素制作可访问的下拉列表可访问性标准

<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");
      }
    });
4

2 回答 2

1

我很确定唯一会自动提交表单的元素是提交按钮。

<input type="submit" value="foo">

或者

<button>foo</button>

（元素的默认type值为“提交”）<button>

<select>未定义为提交表单。当您按下 时，您确定您的焦点在 <select> 上enter吗？

您还应该查看“ 4.10.18.6. 表单提交”的规范

于 2019-02-19T19:07:37.057 回答
0

您的关注基于示例，而不是规范：

本页示例列表框实现如下键盘接口

如果您参考Listbox Design Pattern 的键盘交互，则没有提到Enter键。

该示例使用Enter，因为列表框的触发器是一个按钮。

此外，根据 ARIA 使用的第一条规则，一般来说，ARIA 规则适用于您不能使用标准元素的情况

如果您可以使用原生 HTML 元素 [HTML51] 或已内置所需语义和行为的属性，而不是重新利用元素并添加 ARIA 角色、状态或属性以使其可访问，那么就这样做。

换句话说，当您不实施自己的控件时，您不应该关心这些规则。

于 2019-03-19T19:42:16.317 回答