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