无障碍开发实践之对焦点机制的重大实现

无障碍开发应该是所有 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