确保下拉选择框具有键盘访问权限以修复斧头违规（WCAG）-js答案

【问题标题】：Ensuring a drop-down selection box has keyboard access to fix axe violation(WCAG) - js确保下拉选择框具有键盘访问权限以修复斧头违规（WCAG）-js
【发布时间】：2020-02-06 17:17:18
【问题描述】：

所以在我的网页上运行Axe（Web 可访问性工具）会产生违规：

具有可滚动内容的元素应该可以通过键盘访问 https://dequeuniversity.com/rules/axe/3.3/scrollable-region-focusable?application=AxeChrome

链接指出，为了修复它，元素应该具有可聚焦的内容或应该是可聚焦的。我可以通过 Tab 导航到它，但是我无法按 Enter 键展开下拉菜单。（按向上键展开）

我该如何解决这个问题，以便我的下拉列表可以通过按 Enter 键来展开/触发（假设这是修复此错误的方法？）

我的js代码：

self.filterFields.forEach(x => {
                var titleDep = $('th[data-field="' + x + '"]');
                if (titleDep.find('select').length === 0 && self.foreignKeyData[x]) {
                    titleDep.append('<select aria-label="Filter ' + x + ' to show" multiple data-live-search="true" data-actions-box="true" tabindex="0" data-size="10"></select>');
                }
            });

            self.stringFilters.forEach(x => {
                var titleDep = $('th[data-field="' + x + '"]');
                if (titleDep.find('select').length === 0 && self.stringFilterValues[x]) {
                    titleDep.append('<select aria-label="Filter ' + x + ' to show" multiple data-live-search="true" data-actions-box="true" tabindex="0" data-size="10"></select>');     
                }
            });

我已经尝试通过添加来修复它

                titleDep.find('input').attr({ "tabindex": "0" });
                titleDep.find('input').attr({ "tabindex": 0 });

以及 focusable="true" 和 autofocus 到 append 语句中，但这也不起作用。

但是，这似乎并没有让我更接近解决方案。任何帮助将不胜感激。

干杯

【问题讨论】：

它只是一个普通的<select> 元素还是有某种插件可以改变它（例如流行的 Select2 插件）？可能有一个事件监听器修改了默认行为。

标签： javascript jquery accessibility keyboard-shortcuts wcag

【解决方案1】：

ax 给你的错误是因为 select 元素上有一个 -92 的 tabindex。所以你想知道那是从哪里来的。 <select> 元素默认情况下应该是可选项卡的，无需添加显式选项卡索引。根据定义，任何带有负 tabindex 的东西都不能通过键盘访问。请参阅https://stackoverflow.com/a/32912224/3010362 以获得关于 tabindex 如何工作的很好的讨论。我无法从您提供的内容中判断出哪些其他代码可能正在修改 tabindex。

【讨论】：