构建可访问的 React 应用程序-js教程-PHP中文网

Building Accessible React Applications

在当今的数字环境中，可访问性不仅仅是一个流行词，而是一种必需品。构建可访问的 Web 应用程序可确保所有用户（包括残障人士）都可以有效地与您的内容进行交互。 React 是用于构建用户界面的最流行的 JavaScript 库之一，它提供了多种工具和最佳实践来帮助开发人员创建可访问的应用程序。本文探讨了构建可访问的 React 应用程序的关键策略和技术。

1. 了解网络可访问性

网络可访问性是指设计和开发可供各种残障人士（包括视觉、听觉、运动和认知障碍）使用的网站和应用程序。网页内容可访问性指南 (WCAG) 提供了开发人员应遵循的一组标准，以确保所有用户都可以访问其内容。

2. 使用语义 HTML

任何可访问的 Web 应用程序的基础都是语义 HTML。

、

在 React 中，您应该始终努力使用语义元素而不是通用的

和标签。例如，用于可点击的操作，而不是使用 onClick 事件。

<span class="k">return <>
    <div onClick={handleClick}>Click me</div>

    {/* More accessible */}
    <button onClick={handleClick}>Click me</button>
</>

登录后复制

3. 正确管理注意力

正确的焦点管理对于键盘导航和屏幕阅读器用户至关重要。 React 提供了多种管理焦点的方法，例如 autoFocus 属性和用于手动设置焦点的 useRef hook。

import { useRef, useEffect } from 'react';

function AccessibleForm() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus(); // Set focus when component mounts
  }, []);

  return <input ref={inputRef} type="text" />;
}

登录后复制

确保在导航期间将焦点移动到适当的元素，尤其是在实现模式对话框、动态内容或路线更改时。

4. 使用 ARIA 属性

ARIA（可访问的富互联网应用程序）属性可以增强非语义 HTML 元素的可访问性。 React 支持所有 ARIA 属性，允许您在不改变视觉设计的情况下提高可访问性。

例如，使用 role="alert" 向屏幕阅读器宣布重要消息，或使用 aria-live="polite" 更新实时区域。

function Alert({ message }) {
  return <div role="alert">{message}</div>;
}

登录后复制

但是，ARIA 不应该用作语义 HTML 的替代品。它最适合用来填补原生元素无法提供必要的辅助功能的空白。

5. 无障碍表格

表单是 Web 应用程序的关键部分，使它们易于访问至关重要。确保每个表单控件都有相应的标签。标签元素应使用 htmlFor 属性与其控件显式关联，或者您可以将控件嵌套在标签中。

<label htmlFor="username">Username:</label>
<input id="username" type="text" />

登录后复制

使用 aria-scribedby 获取与表单控件相关的附加上下文或说明。

<input id="email" type="email" aria-describedby="emailHelp" />
<small id="emailHelp">We'll never share your email.</small>

登录后复制

6. 处理动态内容

React 应用程序通常涉及动态内容更新。确保所有用户都可以访问这些更新非常重要。使用 aria-live 区域来宣布不会自动聚焦的更改，例如加载指示器或通知区域的更新。

<div aria-live="polite">
  {isLoading ? 'Loading...' : 'Content loaded'}
</div>

登录后复制

对于更复杂的状态管理，请考虑与 Redux 或 Context API 等工具集成，以有效地管理和传达状态更改。

7. 辅助功能测试

测试是确保可访问性的重要组成部分。使用 axe-core、Lighthouse 或 React 测试库等工具来自动进行可访问性检查。这些工具可以识别常见的可访问性问题，例如标签丢失、颜色对比度问题和 ARIA 使用不当。

此外，使用键盘导航和屏幕阅读器（例如 NVDA、JAWS 或 VoiceOver）手动测试您的应用程序。这可以帮助您发现自动化工具可能遗漏的问题。

8.色彩对比与视觉设计

确保您的配色方案符合 WCAG 颜色对比度标准。使用颜色对比度检查器或无障碍颜色等工具来验证您的文本在背景下是否可读。

在 React 中，您可以通过实现 CSS 变量或使用像 styled-components 这样的库来动态调整颜色对比度。

const Button = styled.button`
  background-color: var(--primary-color);
  color: var(--text-color);
  &:hover {
    background-color: var(--primary-hover);
  }
`;

登录后复制

9. 无障碍路由

使用 React Router 或其他路由库时，请确保在路由更改时适当地管理焦点。这可以通过在导航事件后将焦点设置到主要内容区域来实现。

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function useFocusOnRouteChange() {
  const location = useLocation();

  useEffect(() => {
    document.getElementById('main-content').focus();
  }, [location]);
}

登录后复制

这可确保屏幕阅读器用户了解上下文更改，并可以轻松导航新内容。

10. 文档和协作

最后，构建可访问的应用程序需要团队的努力。确保所有团队成员，包括设计人员、开发人员和 QA 测试人员，都了解可访问性最佳实践。记录您的可访问性标准并将其包含在代码审查中以确保持续合规。

如何测试 React 可访问性

在检查和测试 React 应用程序中的可访问性时，可以使用推荐的工具。

在文本编辑器中，您可以安装 eslint-plugin-jsx-a11y 等 linter，以在编写 React 应用程序的 JSX 组件时捕获任何可访问性问题。
在开发后期，浏览器中的开发者控制台与 WAVE Web 可访问性评估工具或 ax DevTools 项目相结合可以帮助诊断和修复任何问题。
您还可以使用屏幕阅读器（例如 NVDA 和 JAWS 屏幕阅读器）分阶段手动测试您的应用程序。

注意：本质上，通过使用 linter 尽早发现可访问性问题，并使用浏览器中的开发控制台和 ax DevTools 验证已修复的可访问性问题，以实现更快、更高效的调试过程。