我正在改进web应用程序的可访问性。
我想遍历所有可能的表/可聚焦元素
我注意到jQuery有自己的伪选择器，:tabbable，但这不是本地的。
我从来没有使用过jQuery，我不急于开始。
我还注意到在这两篇博文中:
- 2017-07-17:如何在DOM中获得第一个和最后一个可聚焦元素
- 2020-01-29:获得键盘可聚焦元素
(类似的)解决方案如下:
const keyboardfocusableElements = document.querySelectorAll(
'a[href], button, input, textarea, select, details, [tabindex]'
);
我想我们也许可以再增加一些项目:
-
audio -
button -
canvas -
details -
iframe -
input -
select -
summary -
textarea -
video -
[accesskey] -
[contenteditable] -
[href] -
[tabindex]
虽然可能一些这些元素只有当它们包含tabindex属性时才成为可制表/可聚焦的…?
坚持上面的列表(现在)，留给我们如下:
const tabbableElements = document.querySelectorAll(
'audio, button, canvas, details, iframe, input, select, summary, textarea, video, [accesskey], [contenteditable], [href], [tabindex]'
);
这并不可怕，但你会认为可能有一些更优雅的东西。
是否有一种更简洁的方法来抓取所有潜在的表/可聚焦元素在文件里?
类似CSS 4级伪选择器?(我没有找到任何类似的东西…)
我突然想到我应该转到jQuery看看他们在做什么:
-
:tabbable -
:focusable
jQuery 州:
以下类型的元素如果不是可聚焦的
disabled:<input>、<select>、<textarea>、<button>等<object>。如果锚具有href或tabindex，则锚是可聚焦的属性。<area>元素是可聚焦的，如果它们位于命名的Map，有一个href属性，并且有一个使用地图。所有其他元素都是基于它们的tabindex进行聚焦的属性和可见性。
因此，我要采用的方法是找到满足上述条件的所有元素-以及我可能选择添加的任何其他条件-并手动确保每个元素都具有显式的tabindex属性。
那么我可以使用:
document.querySelectorAll('[tabindex]');
选择所有可能可制表/可聚焦的元素。
我仍然对其他方法持开放态度，但是，尽管只是半自动化的，这似乎是目前我能想到的最实用的方法。