无障碍开发应该是所有 web 开发者应该考虑的一个重要领域，目标是使得网站能够让所有人都能访问。然而，在实现无障碍的 web 站点时，重大的一步就是确保焦点机制已经得到了正确的实现。
本文将阐述对焦点机制的基本了解，并探讨几种简单而有效的实现对焦点机制的技术。
焦点
焦点是浏览器在渲染 web 页面时通常会自动处理的元素之一。无障碍网站的目的是确保当用户使用键盘进行导航时，他们可以访问站点的所有部分。因此，我们需要确保对焦点控制的正确实现。
对焦点控制有助于特殊用户群体，如使用键盘而非鼠标浏览网站的视障人士。通过正确的对焦点控制，可以保证这些用户的操作体验，并提高整体网站的可用性。
焦点控制的实现
1. 默认行为
默认情况下，浏览器会以 Tab 键顺序来处理焦点。这是一种方便的方式，可以让用户在需要时轻松地访问站点中的所有元素。但是，对于无障碍设备使用者来说，这种默认行为可能并不总是适用的。
2. 自定义键序列
你可以使用 tabindex 属性来定义键序列。例如，通过使用 tabindex=”1”、tabindex=”2” 等等，你可以创建跳过站点中不需要根据结果进行操作的元素。这对于对焦点控制的进一步个性化实现很有用。
3. 然而……
然而，如果漏洞仍然存在，那么仍然会影响到那些使用键盘进行导航的视障人士。就像嵌套焦点控件一样，不良实践可能会不经意间导致焦点控制无效。
4. 第1步：实现键盘焦点
开发者可以在网站的所有元素中增加键盘焦点。这一步对于确保靠键盘进行导航的用户的网站可用性非常重要。
下面是一个使用 jQuery 的例子：
$('*').on('focus', function() {
$(this).addClass('focused');
});
$('*').on('blur', function() {
$(this).removeClass('focused');
});5. 第2步：定义 Tab 键顺序
通过使用 tabindex 属性，我们可以更明确地定义我们站点中键的顺序。但是，这种方法只有在用键盘浏览页面时才能正常工作。
-- -------------------- ---- ------- ---- ------------- ----- ----- ----- --- ----- ----------- ---------- ----- ------ ---- ------------- ------ -------- ----- --- -------- --------- ------ ---- ------------- ------- --------- ---- -- ----- --------- -------- ------
6. 第3步：禁用嵌套焦点控件
有些站点会使用嵌套焦点控件来增强其用户体验。这可能包括日期选择器、下拉菜单和模态窗口等。
然而，这可能会对无障碍设备使用者造成极大的负担。 如果开发者不能正确地管理对焦点的控制，那么他们就会有操作上的困难。
7. 第4步：特殊元素的焦点设置
对于一些特殊元素（如单选按钮和多选框）需要特殊的焦点设置。我们可以这样做：
<label> Checkbox <input type="checkbox" tabindex="4" /> </label>
结论
使用上述技巧可以帮助网站开发者增强站点的可用性和无障碍性，确保站点中的所有用户都可以轻松地访问和操作页面。
无障碍开发需要从开发的早期开始考虑，因为在现代的无障碍开发趋势中，确保网站的可用性变得越来越重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6721a4c92e7021665e0853d9