FE-14-可访问性 (a11y) 与国际化 (i18n)

字数统计: 2.7k字   |   阅读时长≈ 14分

FE-14-可访问性 (a11y) 与国际化 (i18n)

本节目标：理解可访问性的核心原则（WCAG、ARIA），掌握国际化（i18n）方案，能构建对所有用户、所有语言友好的应用。

1. 什么是 a11y

a11y = accessibility（可访问性）。确保残障人士能使用产品。

残障类型：

  • 视觉：盲、色弱、低视力
  • 听觉：聋
  • 运动：无法用鼠标、需要键盘或语音控制
  • 认知：阅读障碍、注意力不集中

为什么重要：

  • 道德：平等获取信息
  • 法律：很多国家/地区强制要求（美国 ADA、欧洲 EAA、中国 GB/T 37668-2019）
  • 商业：约 15% 人口有某种残障
  • 改善 SEO 和可维护性

2. WCAG 标准

WCAG = Web Content Accessibility Guidelines，W3C 制定。四个原则（POUR）：

原则 含义 示例
Perceivable 可感知 用户能感知信息 文字替代、字幕
Operable 可操作 UI 组件可操作 键盘可达
Understandable 可理解 信息和操作可理解 清晰语言
Robust 健壮 兼容辅助技术 语义化 HTML

三个等级：

  • A：最低，必须满足
  • AA：推荐，主流标准
  • AAA：高级

3. 视觉无障碍

3.1 颜色对比度

对比度 ≥ 4.5:1（AA，正常文字），≥ 3:1（大文字/图标）

1
2
❌ 浅灰文字（#999）on 白色背景 → 对比度 2.85:1
✅ 深灰文字（#595959）on 白色背景 → 对比度 7.01:1

工具：

  • WebAIM Contrast Checker
  • Chrome DevTools → 选元素 → Styles 面板 → 颜色块点击 → 显示对比度
  • Lighthouse 审计

3.2 不依赖颜色

1
2
3
4
5
6
7
<!-- ❌ 只用颜色表示状态 -->
<span style="color: red">错误</span>

<!-- ✅ 颜色 + 文字 + 图标 -->
<span style="color: red" aria-label="错误">
  ⚠️ 错误：邮箱格式无效
</span>

3.3 文字大小

1
2
3
4
5
6
7
8
9
/* 用 rem 而不是 px（跟随用户设置） */
body { font-size: 1rem; }
h1 { font-size: 2rem; }

/* 行高 1.5+ */
p { line-height: 1.6; }

/* 段落最大宽度（避免长行） */
article { max-width: 65ch; }

4. 键盘无障碍

4.1 焦点管理

1
2
3
4
5
6
7
8
9
/* 永远不要完全隐藏焦点指示器！ */
button { outline: none; }  /* ❌ 反例 */

/* 区分鼠标和键盘 focus */
button:focus { outline: none; }
button:focus-visible {
  outline: 2px solid #1e6fdc;
  outline-offset: 2px;
}

Tab 顺序：

1
2
3
4
5
6
7
8
<!-- 默认按 DOM 顺序 -->
<button>First</button>
<button>Second</button>
<button>Third</button>

<!-- 显式指定（不推荐破坏自然顺序） -->
<div tabindex="0">Focusable</div>
<div tabindex="-1">Programmatically focusable only</div>

4.2 跳过导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<a href="#main" class="skip-link">跳到主要内容</a>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}
</style>

4.3 模态框焦点陷阱

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { useRef, useEffect } from 'react';

function Modal({ isOpen, onClose, children }) {
  const modalRef = useRef(null);
  const firstFocusable = useRef(null);

  useEffect(() => {
    if (!isOpen) return;
    const focusable = modalRef.current.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    focusable[0]?.focus();

    const handleTab = (e) => {
      if (e.key !== 'Tab') return;
      const first = focusable[0];
      const last = focusable[focusable.length - 1];
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    };
    document.addEventListener('keydown', handleTab);
    return () => document.removeEventListener('keydown', handleTab);
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div ref={modalRef} role="dialog" aria-modal="true" aria-label="...">
      {children}
    </div>
  );
}

更简单：用 Headless UI 或 Radix UI 的 Dialog。

5. ARIA 实战

ARIA 5 规则：

  1. 优先用原生 HTML
  2. 不要改原生语义
  3. 键盘可达
  4. 不隐藏可读元素
  5. 所有交互元素有可访问名

5.1 标签和描述

1
2
3
4
5
6
7
8
9
10
11
<!-- 标签关联 -->
<label for="email">邮箱</label>
<input id="email" type="email" required>

<!-- 描述关联 -->
<input id="password" type="password" aria-describedby="pwd-hint">
<span id="pwd-hint">至少 8 位</span>

<!-- 错误关联 -->
<input id="email" aria-invalid="true" aria-describedby="email-err">
<span id="email-err" role="alert">邮箱格式错误</span>

5.2 实时区域

1
2
3
4
5
6
7
8
9
<!-- polite：等当前读完后再说 -->
<div aria-live="polite" id="cart-count">
  购物车 3 件商品
</div>

<!-- assertive：立即打断（紧急通知） -->
<div aria-live="assertive" role="alert">
  连接断开，正在重试...
</div>

5.3 复杂组件

手风琴：

1
2
3
4
5
6
7
8
9
10
<div class="accordion">
  <h3>
    <button aria-expanded="false" aria-controls="section1">
      第一部分
    </button>
  </h3>
  <div id="section1" role="region" aria-labelledby="..." hidden>
    内容
  </div>
</div>

Tab：

1
2
3
4
5
6
<div role="tablist" aria-label="内容分类">
  <button role="tab" aria-selected="true" aria-controls="panel1" id="tab1">选项 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel2" id="tab2">选项 2</button>
</div>
<div role="tabpanel" id="panel1" aria-labelledby="tab1">内容 1</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>内容 2</div>

菜单：

1
2
3
4
5
6
7
<button aria-haspopup="menu" aria-expanded="false" aria-controls="menu1">
  菜单
</button>
<ul role="menu" id="menu1" hidden>
  <li role="menuitem">编辑</li>
  <li role="menuitem">删除</li>
</ul>

6. 表单无障碍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form>
  <fieldset>
    <legend>个人信息</legend>

    <label for="name">
      姓名
      <span aria-label="必填">*</span>
    </label>
    <input id="name" required aria-required="true">

    <label for="bio">简介</label>
    <textarea id="bio" maxlength="500" aria-describedby="bio-count"></textarea>
    <span id="bio-count">0 / 500</span>

    <fieldset>
      <legend>通知偏好</legend>
      <label><input type="checkbox" name="email" checked> 邮件</label>
      <label><input type="checkbox" name="sms"> 短信</label>
    </fieldset>
  </fieldset>

  <button type="submit">提交</button>
</form>

7. 自动化测试工具

1
2
3
4
5
6
7
8
9
10
11
# axe-core（推荐）
npm install -D @axe-core/playwright

# 在 Playwright 测试里
import AxeBuilder from '@axe-core/playwright';

test('homepage has no a11y violations', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

其他工具：

  • Lighthouse：Chrome DevTools → Lighthouse 面板
  • WAVE：wave.webaim.org
  • axe DevTools：浏览器扩展
  • Pa11y：CI 友好

8. 国际化（i18n）

8.1 i18n vs l10n

  • i18n（internationalization）：国际化，开发时支持多语言
  • l10n（localization）：本地化，针对特定地区做翻译/调整

8.2 react-i18next

1
npm install i18next react-i18next
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// i18n/config.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en.json';
import zh from './locales/zh.json';

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: en },
    zh: { translation: zh },
  },
  lng: 'zh',           // 默认语言
  fallbackLng: 'en',
  interpolation: { escapeValue: false },
});

export default i18n;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// locales/zh.json
{
  "welcome": "欢迎，{{name}}",
  "cart": {
    "items_one": "1 件商品",
    "items_other": "{{count}} 件商品"
  },
  "greeting": "你好"
}

// locales/en.json
{
  "welcome": "Welcome, {{name}}",
  "cart": {
    "items_one": "1 item",
    "items_other": "{{count}} items"
  },
  "greeting": "Hello"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
import { useTranslation } from 'react-i18next';

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

  return (
    <div>
      <h1>{t('welcome', { name })}</h1>
      <p>{t('cart.items', { count: 5 })}</p>
      <button onClick={() => i18n.changeLanguage('en')}>English</button>
    </div>
  );
}

8.3 复数形式

i18next 内置 CLDR 复数规则：

  • 中文：没有复数（永远是 “other”）
  • 英文：one / other
  • 阿拉伯：zero / one / two / few / many / other
1
2
3
4
5
6
7
8
9
10
11
12
// en
"items": "item_one": "1 item", "item_other": "{{count}} items"

// 阿拉伯（6 种形式）
"items": {
  "zero": "لا توجد عناصر",
  "one": "عنصر واحد",
  "two": "عنصران",
  "few": "{{count}} عناصر",
  "many": "{{count}} عنصرًا",
  "other": "{{count}} عنصر"
}

8.4 数字、日期、货币

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const number = 123456.789;
new Intl.NumberFormat('zh-CN').format(number);    // "123,456.789"
new Intl.NumberFormat('en-US').format(number);    // "123,456.789"
new Intl.NumberFormat('de-DE').format(number);    // "123.456,789"

const date = new Date();
new Intl.DateTimeFormat('zh-CN').format(date);     // "2026/9/1"
new Intl.DateTimeFormat('en-US').format(date);     // "9/1/2026"

const price = 99.99;
new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(price);
// "¥99.99"
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(price);
// "$99.99"

8.5 Vue i18n（vue-i18n@9）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { createI18n } from 'vue-i18n';
import zh from './locales/zh.json';
import en from './locales/en.json';

const i18n = createI18n({
  legacy: false,        // 用 Composition API 风格
  locale: 'zh',
  fallbackLocale: 'en',
  messages: { zh, en },
});

app.use(i18n);

// 组件
<script setup>
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
</script>
<template>
  <h1>{{ t('welcome', { name: 'Alice' }) }}</h1>
</template>

9. RTL（从右到左）布局

阿拉伯语、希伯来语是 RTL 方向。

1
2
3
4
5
6
7
8
/* 用 logical 属性 */
.box {
  margin-inline-start: 16px;  /* 不是 margin-left */
  padding-inline-end: 8px;
  inset-inline-start: 0;       /* 不是 left: 0 */
}

[dir="rtl"] .icon { transform: scaleX(-1); }
1
2
3
4
5
<html dir="rtl" lang="ar">
  <body>
    <div style="text-align: start">  <!-- 自动适应 RTL/LTR -->
  </body>
</html>

10. 实战 checklist

a11y：

  • 所有图片有 alt（或 alt="" 表示装饰）
  • 颜色对比度 ≥ 4.5:1
  • 键盘可达（Tab 顺序合理）
  • 焦点指示器可见（不要 outline: none）
  • 表单字段有关联 <label>
  • 标题层级不跳级
  • 模态框有焦点陷阱和 ESC 关闭
  • 错误消息用 aria-live
  • 跳过导航链接
  • 用 axe / Lighthouse 跑过

i18n：

  • 文案不硬编码在 JSX
  • 复数形式正确处理
  • 日期/数字/货币用 Intl API
  • 字体支持目标语言（中文 vs 阿拉伯文）
  • RTL 布局（如果是阿拉伯语等）
  • URL 反映语言（/zh/about vs /en/about）
  • <html lang="..."> 标记
  • SEO hreflang 标签

小结

主题 关键点
WCAG 4 原则（POUR）、AA 标准
对比度 ≥ 4.5:1（AA），大文字 ≥ 3:1
键盘 焦点可见、Tab 顺序、模态框陷阱
ARIA 补充 HTML 语义，不是替代
i18n 用 i18next / vue-i18n，不硬编码
复数 用 CLDR 规则
Intl API 数字/日期/货币/复数
RTL 用 logical 属性

核心原则：

  1. a11y 不是事后补救，从设计阶段就考虑
  2. HTML 优先，ARIA 补充
  3. 测试用真实辅助技术（屏幕阅读器、键盘）
  4. i18n 在第一天就集成，不要等
  5. 多用 Intl API，少自己实现

下一节（最后一节）讲前端安全：XSS、CSRF、CSP、SameSite 策略。

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术：
Java后端开发、Linux开发、
公众号开发、开源爱好者、Linux

联系QQ:562054870