随着社会进步和科技发展，无障碍模式已经成为一种重要的需求，更多的人们期望能够在使用各种数字化产品时享受到同等的权利和便利。无障碍模式即是指使用一种能够让任何人都能轻松、便利地使用数字化设备和产品的设计方案，而前端工程师们在实现这些需求时扮演着至关重要的角色。
在本文中，我们将探讨如何基于 React 和 Next.js 创建无障碍模式的应用。如果你是一位前端工程师，希望了解如何提高你的应用的可访问性（Accessibility，简称 A11y），这篇文章为你提供了深入的学习资源和逐步指导。
为什么是 React 和 Next.js？
React 和 Next.js 已经成为目前最为流行的前端框架，不少开发者们也开始将 React 和 Next.js 应用在了他们的工作中。这主要有以下几个原因：
React 构建了一套 virtual DOM 的机制，大大简化了操作 DOM 的难度和成本，并让前端开发者能够更加专注于实现业务逻辑，同时 React 的生产力也被广泛认可。
Next.js 具备了开箱即用的 Server-Side-Rendering(SSR)、模块化开发以及较完善的自动化工具生态，使得我们可以在保持高效性的同时灵活修改应用状态。
React 和 Next.js 这两个框架让前端工程师们可以更加灵活、方便，同时也为我们在实现无障碍模式时提供了较完善的支持和保证。
开始前：理解无障碍需要
在开始之前，我们需要先理解什么是无障碍。广义上，无障碍是指让任何人都能轻松、便利地使用数字化设备和产品的设计方案和理念；狭义上，无障碍是指在遵循相关标准规范的情况下，以一定的技术手段和设计思路，让相应的页面或应用适应视力、听力、运动能力等受限人群的使用需求。
因此，我们实现无障碍的第一步，是明确目标受众群体，以及他们的使用需求，例如视觉障碍人士、听力障碍人士、肢体运动障碍人士等。
在无障碍设计中，我们需要面对的主要困难是让用户获取重要信息所需要的全面性、准确性和实时性。为此，我们需要尽可能简化我们的设计和交互，使得用户能够更加流畅地获取信息、触达元素，并遵从 WCAG 的相关权威指导进行实现和规范。
下面，我们将介绍一些基于 React 和 Next.js 的实现策略和出发点。
实现策略与建议
使用语义化 HTML
使用语义化的 HTML 不仅可以方便我们更好地理解页面结构，同时也可以帮助无障碍用户阅读页面元素，同时让屏幕阅读器的搜索引擎更容易识别网页内容并呈现给用户。例如:
------ ----- ---- -------
-------- ------ -
------ -
------
-----------------
---------
---------------
----
----
-- ---------------------------------------
-----
----
-- ------------------------------------------------
-----
-----
----------
-------
-
-在上面的代码示例中，我们使用了常见的主从HTML结构，遵循了常规语义，在页面上可以体现出多个section、表格标注、重要文章等相关内容，使得用户可以快速收集到文章信息。
标注元素的状态和描述信息
对于某些无障碍用户，我们需要对页面中的元素状态进行广泛标注，并使用标注信息来描述一些复杂的交互状态。
在 React 结构中，我们可以利用 aria-* 属性来向元素添加有关其状态和描述信息，例如：
------ ------ - -------- - ---- -------
-------- ----------- -
----- ------------ -------------- - -------------
----- -------------- ---------------- - -------------
----- -------- ------------------- -
-- ----
-- -------------------------------
------------------------
-- -------------- --- -- -
-----------------
-
-
------ -
-----
------ -----------------------------------------
------
-----------
-----------------
----------------------
------------------
----------- -- ------------------------------
----------------------------------- -- -----------------
---------------------------------------- -- ----------------
--
------- ---------------------------------------
---- ---------------------------
--------------------
- ----------------------------
- ------------------
------
------
-
-上面的代码示例中，我们添加了两个 aria-* 属性，并通过他们向输入框和搜索结果的状态做了一个全面描述，从而能够在多样化和遍布性的设备和交互模式下，提供给用户更全面的交互体验。
提供适合不同人群的交互方式
无障碍不等于简单粗暴，更多的时候，我们需要考虑的是不同用户的应用场景和交互需求，以及能够提供给他们最好的交互选择方法。
在基于 React 和 Next.js 构建应用程序时，我们要尽可能多地考虑到这些差异。例如，在页面的滚动、键盘操作、焦点切换和交互事件等方面进行改进或优化，以尽可能地增加用户的平等权利。
例如，在接下来的代码示例中，当用户通过 Tab 键或鼠标单击将焦点移动到屏幕上的列表项时，我们将突出显示该项目，增加了交互友好性和优秀性：
------ ------ - -------- - ---- -------
-------- ---------- ------ ----------- -------- -- -
------ -
---
--------
---------------- ---------- - ------ - --------------
----------- ---------- - ------ - --------
--
------------------
------------ -- -------------
-
-------
-----
-
-
-------- ------ -
----- ------------------- --------------------- - -------------
------ -
----
---------
------------
----------------------------- --- --
------------ -- ------------------------
--
---------
------------
----------------------------- --- --
------------ -- ------------------------
--
---------
------------
----------------------------- --- --
------------ -- ------------------------
--
---------
------------
----------------------------- --- --
------------ -- ------------------------
--
-----
-
-在上面的代码示例中，我们增加了 tabIndex 属性和具有视觉障碍性的 aria-selected 属性，保证我们的列表具有良好的交互性，可以为不同人群提供灵活的交互方式。
结论
无障碍不仅是一种设计理念，也是一种必不可少的基础设施，它是广泛的领域，涉及程序设计、人机交互、流程治理、视觉设计等多个领域，在设计和开发无障碍应用程序中，前端工程师们可以通过 HTML 属性、语义化 HTML、键盘导航等方式来实现。
通过本文介绍的方式，您可以更好地理解 React 和 Next.js 开发框架之间的关系，更好地设计和开发无障碍模式的应用，并以更好的方式接触到无障碍模式的个人和企业应用。为您和您的项目增加更多的价值和支持。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670e30b75f55128102600471