在现代 web 应用程序开发中，许多开发者都注重用户体验的质量，而其中一个重要组成部分就是可访问性和无障碍设计。可访问性是指让我们的应用程序可以被残障用户和老年人平等使用，无障碍设计则是指通过设计和实现让用户能够无障碍地访问我们的应用程序。在 React 开发中，我们可以使用一些技术来实现可访问性和无障碍设计。在本文中，我们将详细讲解 React 中可访问性和无障碍设计的原理、技术和注意事项，并提供一些示例代码来帮助读者深入理解。
React中的无障碍设计概述
React 中的无障碍设计主要包括以下几个方面：
1. 对焦管理
页面中有大量的交互式元素，如表单、按钮、链接等。在残障用户或老年人使用页面时，他们通常需要借助键盘或鼠标来浏览和交互。本文中，我们将通过焦点管理技术来帮助他们在页面中更容易地定位和交互。
1.1. 键盘支持
当用户使用键盘交互时，应该为他们提供多种途径来获取焦点。通常，用户可以使用 tab 键或者 shift + tab 键，来在页面元素之间切换获取焦点，通过 espaço 键或 enter 键来触发按钮或链接。在 React 中，我们可以使用 tabindex 属性来控制页面元素的焦点顺序，同时为焦点设置 onKeyXxx 事件属性来对键盘事件进行监听和处理。
1.2. 可见反馈
为残障用户和老年人提供可见反馈是至关重要的，确保他们可以轻松地识别页面状态并快速定位。例如，我们可以使用 CSS 来提高鼠标悬停的元素的可见性，使用字母缩写来显示面向对象的状态，如以下：
-- -------------------- ---- -------
------------ -
---------------- ----------
------ --------
-
------------- -
---------------- ----------
------ --------
-<button aria-label="Search">
<i className="fa fa-search" aria-hidden="true"></i>
</button>在这里我们还可以使用 aria-label 属性来为元素添加文本描述，从而帮助残障用户和老年人快速地理解元素。
2. 语义化 HTML
在开发过程中，我们应该尽可能地使用语义化的 HTML 标记，它可以使我们的组件更易于理解，并在缺少样式时保持有意义。以下是一些有关语义化 HTML 标记的例子：
语义化的 HTML 标题：使用 h1 - h6 标签
语义化的 HTML 列表：使用 ul / ol 和 li 标签
语义化的 HTML 表格：使用 table / thead / tbody / tr / th / td 标签
语义化的 HTML 表单：使用 input / label / fieldset / legend / button / textarea / select / option 标签
语义化的 HTML 标记可以帮助屏幕读取器和搜索引擎了解您的页面的结构，因此您的网站可以更好地为残障用户和老年人服务。
3. ARIA 支持
ARIA 是一组属性和角色，用于扩展 HTML 标记，以帮助实现可访问性和无障碍设计。以下是我们应该使用 ARIA 的一些场景：
- 对于不同于标准文本的文本输入：
<input type="text" aria-label="Enter your name here" />
- 对于缺少表示性的图标
<button aria-label="Search">
<i className="fa fa-search" aria-hidden="true"></i>
</button>- 对于依赖了可视效果的元素
<span aria-hidden="true">X</span>
- 对于错误和成功状态的提示
<input type="text" aria-invalid="true" aria-describedby="error-message" />
<div id="error-message" aria-live="assertive">
Please enter a valid email address
</div>React中的代码实践
有了上面的基础知识，我们可以使用一些技术来实现我们的 React 组件，并帮助残障用户和老年人更好地使用我们的应用程序。
1. 对焦管理
1.1. 焦点管理
对于那些需要焦点管理的组件，我们可以使用“可点击组件”（clickable component）的概念，它包含以下几个主要要素：tabIndex、onFocus、onBlur、onKeyDown 和 onMouseDown。通过这些内容，我们可以确保元素在获取焦点时能够正确地工作，并将其可见范围内。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- -------------
----- ------ ------- --------- -
------ --------- - -
-------- --------------------------
--------- -----------------
--------- --------------------------
--
------ ------------ - -
--------- --
--
------- - ----- -- -
-- --------------------- -- ------------------- -
--------------------------
-
--
--------- - ----- -- -
-- --------------------- -- --------- --- ------- -- ------------------- -
--------------------------
-
--
-------- -
----- - --------- -------- - - -----------
------ -
-------
-------------
------------------------------
----------------------------- - -- - ---------
----------------------------
--------------------------
--------------------------
------------------------------------
----------------------
-
----------
---------
--
-
-1.2. 焦点输出
在一些组件中，我们可以对应添加可见反馈。例如，对于需要输入框的表单，我们可以在输入框为空时突出显示，以提示用户填写信息：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- -------------
------ ------- ----- ---------- ------- --------- -
------ --------- - -
------ -----------------
------ -----------------
------------ -----------------
-------------- --------------------------
--
------ ------------ - -
------ ---
------ ---
------------ ---
--
----- - -
-------- ------
--
----------- - -- -- -
--------------- -------- ---- ---
--
---------- - -- -- -
--------------- -------- ----- ---
--
------------ - ----- -- -
-- -------------------------- -
---------------------------------------------
-
--
-------- -
----- - ------- - - -----------
----- - ------ ------ ----------- - - -----------
------ -
----
-------------------------------- - - -------- - -----
----- - - --------- - --
---
-
------
-----------
-------------
-------------------------
--------------------------
------------------------
----------------------------
--
----------------------
------
--
-
-2. \语义化 HTML
对于包含列表的组件，我们应该使用 ul / ol 和 li 标记来标记。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------- ----- ---- ------- --------- -
-------- -
----- - ----- - - -----------
------ -
----
----------------- ------ -- -
--- -----------------------
---
-----
--
-
-3. ARIA 支持
对于一些图像或图表类型的组件，我们可以通过通过 aria-label 标记来描述：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------- ----- ----- ------- --------- -
-------- -
----- - ---- - - -----------
------ -
---- ---------- -------------------
------------- -- -- -
---- ------- -------- ------- --------------- -- --
---
------
--
-
-总结
在 React 中，我们可以通过焦点管理、语义化 HTML 和 ARIA 支持来帮助残障用户和老年人更容易地访问我们的应用程序。通过使用这些技术，我们不仅可以提高用户体验的质量，并为我们的网站赢得更多流量。在开发过程中，我们应该尽可能地使用这些技术，并不断改进我们的代码方案，以提高我们的应用程序的可访问性和无障碍性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65190e0595b1f8cacd14bcf7