在设计应用程序时，为了让所有用户都能够访问、浏览和使用它们，我们需要考虑到无障碍性（Accessibility）。无障碍 API 是一种用于开发无障碍应用程序的 API，它允许开发人员控制应用中焦点的顺序，以确保用户可以轻松地浏览和访问所有的内容。
什么是焦点？
焦点是用户在应用程序中所在的位置。可以通过键盘或者屏幕阅读器来控制焦点位置。在网页中，焦点通常表现为一个虚线矩形框。
原理
无障碍 API 允许开发人员操作焦点顺序，以确保用户可以顺利访问网页上的所有内容。通常，焦点顺序遵循页面元素在代码中出现的顺序，但是，我们也可以使用无障碍 API 来改变焦点顺序。
如何使用无障碍 API 控制焦点顺序
HTML 元素有一个“tabindex”属性，它允许开发人员更改焦点顺序。该属性的值为一个数字，它表明了元素在焦点顺序中的位置。元素的“tabindex”值越小，它在焦点顺序中的位置就越靠前。
下面是一个焦点顺序的示例：
<button tabindex="1">Button 1</button> <button tabindex="2">Button 2</button> <button tabindex="3">Button 3</button>
在上面的示例中，第一个 button 的“tabindex”值为 1，第二个 button 的“tabindex”值为 2，第三个 button 的“tabindex”值为 3。因此，当用户按下 Tab 键时，第一个 button 将是焦点的第一个位置，第二个 button 将是焦点的第二个位置，第三个 button 将是焦点的第三个位置。
示例代码
下面是一些示例代码，展示如何使用无障碍 API 控制焦点顺序。
通过 tabindex 控制焦点顺序
-- -------------------- ---- ------- ---- ---- --- ------- ------------------- ---------- ------- ------------------- ---------- ------- ------------------- ---------- ---- --- --- ------------ - -------- --- ----- ----- -
使用 JavaScript 控制焦点顺序
-- -------------------- ---- -------
---- ---- ---
-----
------- ---------------- ----------
------- ---------------- ----------
------- ---------------- ----------
------
---- ---------- ---
----- ---- - --------------------------------
----- ---- - --------------------------------
----- ---- - --------------------------------
-------------------------------- -------- --- -
-- ---------- --- - -- ---------- --- ------ -
-------------------
-------------
-
---
-------------------------------- -------- --- -
-- ---------- --- - -- ---------- --- ------ -
-------------------
-------------
- ---- -- ---------- --- - -- ---------- --- ----- -
-------------------
-------------
-
---
-------------------------------- -------- --- -
-- ---------- --- - -- ---------- --- ----- -
-------------------
-------------
-
---
在上面的示例代码中，我们使用了“keydown”事件和 JavaScript 来控制焦点顺序。当用户按下 Tab 键时，我们改变了焦点的位置，以确保用户可以顺利访问所有内容。
总结
无障碍 API 是一种用于创建无障碍应用程序的强大工具。它允许开发人员控制焦点顺序，以确保所有用户都能够方便地浏览和使用应用程序。在设计应用程序时，请务必遵循无障碍性原则，为所有用户提供可访问性的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a1bdc0add4f0e0ff9c1e27