Notes
Notes /react/16-advanced/04-a11y-i18n-compliance

a11y, i18n 与合规：构建负责任的全球化应用

一句话结论：通过遵循 WCAG 标准实现可访问性 (a11y)，通过集成 i18n 框架支持国际化，并关注数据隐私与合规性要求，是构建一个能够服务于全球所有用户、值得信赖且负责任的 Web 应用的必要条件。

1. Web 可访问性 (Accessibility - a11y)

可访问性意味着确保你的应用可以被尽可能多的人使用，无论他们的能力如何，包括有视力、听力、运动或认知障碍的人士。这不仅是正确的做法，在许多国家和地区也是法律要求。

A. 核心原则 (WCAG)

Web 内容可访问性指南 (WCAG) 是全球公认的标准，它建立在四个核心原则之上 (POUR)：

  1. 可感知 (Perceivable)：信息和 UI 组件必须以用户可以感知的方式呈现。
    • 实践：为所有图片提供 alt 文本；为视频提供字幕；确保颜色对比度足够。
  2. 可操作 (Operable)：UI 组件和导航必须是可操作的。
    • 实践：所有功能都必须能通过键盘访问；避免创建“键盘陷阱”；为用户提供足够的时间来阅读和使用内容。
  3. 可理解 (Understandable)：信息和 UI 的操作必须是可理解的。
    • 实践：使用清晰、一致的导航；表单标签和错误信息必须明确。
  4. 鲁棒 (Robust)：内容必须足够健壮，能够被包括辅助技术在内的各种用户代理可靠地解释。
    • 实践：使用语义化的 HTML；遵循 WAI-ARIA 标准为动态组件添加正确的角色 (roles) 和属性。

B. React 中的 a11y 实践

  • 语义化 HTML：优先使用 <button>, <nav>, <main>, <header> 等原生语义化标签，而不是用 <div> 模拟一切。
  • 表单标签：始终使用 <label htmlFor="inputId"> 与表单控件关联。
  • Aria 属性：对于复杂的动态组件（如模态框、下拉菜单、标签页），使用 ARIA (Accessible Rich Internet Applications) 属性来描述其角色、状态和属性。
    • role="dialog"
    • aria-modal="true"
    • aria-hidden
    • aria-expanded
  • 焦点管理 (Focus Management)：在动态 UI 变化后（如打开模态框、页面导航），必须以编程方式管理焦点，确保键盘用户的体验是连贯的。
  • 自动化测试工具：
    • @axe-core/react: 在开发过程中实时检测 a11y 问题。
    • eslint-plugin-jsx-a11y: 在 ESLint 中集成 a11y 规则检查。
    • Storybook a11y addon: 在 Storybook 中交互式地测试组件的可访问性。

2. 国际化 (Internationalization - i18n)

国际化是设计和开发应用的过程，使其能够轻松地适应不同的语言、地区和文化，而无需进行工程上的更改。本地化 (Localization - l10n) 则是指为特定地区添加具体内容（如翻译文本、调整日期格式）的过程。

A. i18n 核心实践

  1. 文本外部化：将所有用户可见的文本字符串从代码中抽离出来，放到专门的语言资源文件（如 JSON 或 YAML）中。
    • 反模式: <h1>Hello, World!</h1>
    • 好模式: <h1>{t('home.title')}</h1>
  2. 使用 i18n 框架：不要自己造轮子。使用成熟的框架来处理语言切换、复数、插值等复杂问题。
    • react-i18next (基于 i18next): 功能最强大、最全面的 i18n 解决方案，支持命名空间、插件等高级功能。
    • formatjs (react-intl): 由雅虎（后为 Verizon）支持，遵循 ICU 消息格式标准，对复数、性别、日期、数字格式化的支持非常出色。
  3. 处理复数 (Plurals)：不同语言的复数规则不同。i18n 框架可以优雅地处理这个问题。
    // en.json
"itemCount": "{{count}} item",
"itemCount_plural": "{{count}} items"
  4. 日期、时间和数字格式化：不同地区有不同的格式。使用浏览器内置的 Intl API (i18n 框架通常会封装它) 来进行格式化。
    new Intl.DateTimeFormat('de-DE').format(new Date()); // e.g., "2.2.2026"
new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).format(123456.78); // e.g., "₹1,23,456.78"
  5. 布局与方向：为支持从右到左 (RTL) 的语言（如阿拉伯语、希伯来语），应使用 CSS 逻辑属性 (margin-inline-start 代替 margin-left)，并根据语言设置 dir="rtl" 属性。

B. 示例 (react-i18next)

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: { "welcome": "Welcome to React" }
      },
      fr: {
        translation: { "welcome": "Bienvenue à React" }
      }
    },
    lng: "en", // 默认语言
    fallbackLng: "en",
    interpolation: { escapeValue: false }
  });

// App.js
import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('fr')}>Français</button>
    </div>
  );
}

3. 合规性 (Compliance)

合规性是指确保你的应用遵守相关国家或地区的法律法规。对于 Web 应用，最关键的通常是数据隐私和安全。

  • GDPR (通用数据保护条例)：欧盟的法律，对如何收集、处理和存储个人数据设置了严格的规定。核心原则包括“设计即隐私”、用户的“被遗忘权”等。
  • CCPA (加州消费者隐私法案)：加州的法律，赋予消费者对其个人信息更多的控制权。
  • Cookie 同意管理：在许多地区（特别是欧盟），你必须在存储非必要的 Cookies 之前，明确地获得用户的同意。这需要实现一个 Cookie 同意管理平台 (CMP)。

前端的责任：

  • 与法务团队合作，理解应用需要遵守哪些法规。
  • 确保所有用户数据的收集都是透明的，并获得了适当的同意。
  • 在技术上实现用户对其数据的控制权（如数据导出、账户删除）。
  • 谨慎处理所有第三方脚本，了解它们收集了什么数据。

4. 关联阅读

← 实时与离线：WebSocket, PWA 与 Service Worker进阶专题（按业务需要选做） →
cd ..