随着互联网的普及，人们越来越依赖网络获取信息和服务。但是，对于一些残疾人士来说，使用网络并不是一件很容易的事情。例如，对于视力障碍者来说，他们必须使用屏幕阅读器才能获取网页上的信息。在这种情况下，无障碍导航就变得尤为重要。
无障碍导航是指为了满足残疾人士的需求，在网站或应用程序中添加特定的功能，使之能够更好地适应残疾人士的使用需求。在这篇文章中，我们将介绍如何使用 JS 实现无障碍导航，让您的网站更加友好，方便视力障碍者使用。
了解无障碍导航的原理
在进行无障碍导航之前，首先需要了解屏幕阅读器的工作原理。屏幕阅读器是一种能够将网页内容转换为声音或文字输出的软件，它利用 aria-labelledby 和 aria-label 等属性来读取元素内容。
因此，在实现无障碍导航时，我们需要为每个页面元素都添加正确的 aria-label 或 aria-labelledby 属性，以便屏幕阅读器能读取元素内容。
实现无障碍导航的方法
增加 Skip Links
在很多网站中，导航栏通常都位于页面的顶部位置。如果用户使用屏幕阅读器，它需要从页面的顶部一直读到导航栏，这对于用户来说是不友好的。为了解决这个问题，我们可以在每个页面添加 Skip Links。
Skip Links 是指页面中一个隐藏的链接，它能够让用户直接跳过到页面的主要内容，从而减少不必要的阅读。你可以使用如下的代码添加 Skip Links：
<a href="#main" class="skip-link">Skip to content</a>
然后在页面顶部添加下面的代码：
<a href="#" class="skip-to-nav">Skip to navigation</a>
最后，在页面的主体内容之前添加一个 ID 为 main 的 div 标签，这个标签即为主要内容的容器。
接下来，我们需要使用 JavaScript 为 Skip Links 添加事件监听。在用户点击 Skip Links 时，它将会让屏幕阅读器跳过到当前页面中的特定部分。下面是一个例子：
-- -------------------- ---- -------
-- -- ------------- --------------
--- --------- - ---------------------------------------
----------------------------------- --------------- -
-----------------------
--- --- - ------------------------------
------------
---
-- -- ----------- --------------
--- --------- - ----------------------------------------
------------------------------------ -
---------------------------------- --------------- -
-----------------------
--- ----------- - --------------------------------
--------------------
---
---在代码中，我们首先为 skip-to-nav 和 skip-link 按钮添加了点击事件监听。当用户点击 Skip Links 时，我们将焦点设置到对应的元素上。在这个例子中，我们将焦点设置在导航栏和主内容上。
增加键盘操作
对于不带鼠标的用户来说，键盘操作是非常重要的。在无障碍导航中添加键盘操作，可以帮助用户更加方便地浏览网页。通过键盘快捷键，用户可以跳转到页面上的不同部分，而无需使用鼠标。
例如，我们可以为导航栏添加键盘快捷键，使得用户能够使用 Tab 键轻松地在导航栏上进行移动，同时又不会被困在其他元素中。下面是一个例子：
-- -------------------- ---- -------
--- -------- - ------------------------------ ---------
--- ------------ - --------------------------- ---------------------
-- -- ----- - ------ - ---- ------
---------------------------------- -
----------------------------------- --------------- -
-- -------------- --- - -- ---------------- -
-- -------- --- ------------- -
-----------------------
--- -------- - -------------------------------------
-----------------
-
- ---- -- -------------- --- - -- --------------- -
-- -------- --- ------------- -
-----------------------
--- ----------- - --------------------------- --------------------
--------------------
-
-
---
---在代码中，我们将所有带有 href 属性的元素作为导航链接，为它们添加键盘事件监听。当用户按下 Tab 键时，我们检查元素是否是第一个或最后一个链接，如果是，我们将焦点转移到相应的元素上。
增加 ARIA 属性
在实现无障碍导航时，添加 ARIA 属性也是很重要的。ARIA 属性是一组用于描述网页元素及其功能的属性，可以让屏幕阅读器更好地读取网页内容。
例如，我们可以为导航栏的链接添加 aria-haspopup 属性，提示屏幕阅读器该链接有展开下拉菜单的功能。下面是一个例子：
-- -------------------- ---- -------
-----
----
----
-- -----------------
-----
----
-- -------- ---------------------------------
----
------ ---------------- ----------
------ ---------------- ----------
------ ---------------- ----------
-----
-----
------ -------------- -----------
------ ---------------- -----------
-----
------在代码中，我们在带有下拉菜单的导航链接上添加了 aria-haspopup 属性，用于提示屏幕阅读器该链接拥有下拉菜单功能。
增加描述信息
无障碍导航的另一个重要部分是描述信息。描述信息是一组用于说明网页内容的文本，用于帮助屏幕阅读器更好地描述网页。
例如，我们可以为网页中的图片添加 alt 属性，用于描述图片的内容。下面是一个例子：
<img src="image.jpg" alt="这是一张猫咪的图片">
在代码中，我们为图片添加了 alt 属性，用于描述图片的内容。
总结
无障碍导航可以帮助残疾人士更好地使用网站，但它并不仅仅是一个“好心”的举动。在很多国家，无障碍导航已经成为法律规定的标准之一。因此，作为前端开发人员，我们应该致力于为我们的用户创造更好的体验，包括一些外界看似较小的细节。
在本文中，我们介绍了如何使用 JS 实现无障碍导航。首先，我们学习了屏幕阅读器的工作原理，并了解了无障碍导航的重要性。然后，我们介绍了 Skip Links、键盘操作、ARIA 属性以及描述信息等无障碍导航的基本原则，并提供了一些示例代码，帮助您更快地应用这些知识到您的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646caca3968c7c53b0b9d6d0