Back to Details

accessibility-excellence

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Accessibility Excellence

卓越无障碍访问实践

Overview

概述

Accessibility is the practice of making your product usable by everyone, including people with disabilities. It's not a feature to be added later—it's a fundamental requirement that should be built into every decision you make.
This skill teaches you to think about accessibility systematically: understanding WCAG standards, implementing semantic HTML, ensuring keyboard navigation, supporting screen readers, and designing inclusively.
无障碍访问是让产品能被所有人（包括残障人士）使用的实践。它不是事后添加的功能——而是一项基本要求，应融入你做出的每一个决策中。
本技能将教会你系统性地思考无障碍访问：理解WCAG标准、实现语义化HTML、确保键盘导航、支持屏幕阅读器，以及进行包容性设计。

Core Philosophy: Accessibility is Inclusion

核心理念：无障碍即包容

Accessibility benefits everyone, not just people with disabilities:
  • Captions help people in noisy environments, not just deaf people
  • Keyboard navigation helps people with motor disabilities, but also power users
  • Clear language helps people with cognitive disabilities, but also non-native speakers
  • High contrast helps people with low vision, but also people in bright sunlight
  • Transcripts help deaf people, but also people who prefer reading
When you design for accessibility, you design for everyone.
无障碍访问惠及所有人，而不仅仅是残障人士：
  • 字幕帮助嘈杂环境中的人们，而不仅仅是失聪人士
  • 键盘导航帮助行动不便的残障人士，同时也能提升高级用户的操作效率
  • 清晰语言帮助认知障碍人士，也便于非母语用户理解
  • 高对比度帮助低视力人群，也能让强光环境下的用户看清内容
  • 文字记录帮助失聪人士，也适合偏好阅读的用户
当你为无障碍访问做设计时，你是在为所有人设计。

WCAG Standards

WCAG标准

The Web Content Accessibility Guidelines (WCAG) define accessibility standards. There are three levels:
WCAG 2.1 Levels:
  • Level A — Basic accessibility
  • Level AA — Enhanced accessibility (recommended minimum)
  • Level AAA — Advanced accessibility (ideal, but not always practical)
Web内容无障碍指南（WCAG）定义了无障碍访问标准，分为三个等级：
WCAG 2.1 等级：
  • Level A — 基础无障碍
  • Level AA — 增强型无障碍（推荐最低标准）
  • Level AAA — 高级无障碍（理想标准，但并非总能实现）

The Four Principles (POUR)

四大原则（POUR）

1. Perceivable Information must be perceivable to users. It can't be invisible to all senses.
Guideline 1.1: Text Alternatives Provide text alternatives for all non-text content (images, videos, etc.).
html
<!-- Good -->
<img src="chart.png" alt="Sales increased 25% in Q4" />

<!-- Bad -->
<img src="chart.png" alt="chart" />
<img src="chart.png" /> <!-- No alt text -->
Guideline 1.4: Distinguishable Make it easy to see and hear content. Ensure sufficient contrast, readable text, and clear audio.
css
/* Good - 4.5:1 contrast ratio (WCAG AA) */
color: #030712; /* dark text */
background-color: #F9FAFB; /* light background */

/* Bad - 2.5:1 contrast ratio (fails WCAG AA) */
color: #9CA3AF; /* medium gray text */
background-color: #F9FAFB; /* light background */
2. Operable Users must be able to navigate and interact with your product. All functionality must be available from the keyboard.
Guideline 2.1: Keyboard Accessible All functionality must be available from the keyboard.
html
<!-- Good - keyboard accessible -->
<button onClick={handleClick}>Click Me</button>

<!-- Bad - not keyboard accessible -->
<div onClick={handleClick}>Click Me</div>

<!-- Good - keyboard accessible with proper focus management -->
<div
  role="button"
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={(e) => e.key === 'Enter' && handleClick()}
>
  Click Me
</div>
Guideline 2.4: Navigable Users must be able to navigate your product easily. Provide clear navigation, focus indicators, and skip links.
html
<!-- Good - skip link -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Good - clear heading structure -->
<h1>Page Title</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>

<!-- Good - focus visible -->
<button style="outline: 2px solid #3B82F6; outline-offset: 2px;">
  Focused Button
</button>
3. Understandable Users must be able to understand your content and how to use your product.
Guideline 3.1: Readable Make text readable and understandable.
html
<!-- Good - clear, simple language -->
<p>Save your document before closing.</p>

<!-- Bad - jargon, unclear -->
<p>Persist your artifact prior to terminating the session.</p>

<!-- Good - define abbreviations -->
<p>The <abbr title="World Wide Web Consortium">W3C</abbr> sets web standards.</p>
Guideline 3.3: Predictable Make your product predictable. Users should know what will happen when they interact with it.
html
<!-- Good - clear form labels -->
<label for="email">Email Address</label>
<input id="email" type="email" />

<!-- Bad - unclear labels -->
<input type="email" placeholder="Enter your email" />

<!-- Good - clear error messages -->
<input type="email" aria-invalid="true" />
<span role="alert">Please enter a valid email address.</span>

<!-- Bad - unclear error messages -->
<input type="email" style="border: 1px solid red;" />
4. Robust Your product must be robust enough to be interpreted by a wide variety of assistive technologies.
Guideline 4.1: Compatible Maximize compatibility with assistive technologies. Use semantic HTML and ARIA appropriately.
html
<!-- Good - semantic HTML -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<!-- Bad - non-semantic HTML -->
<div class="nav">
  <div class="nav-item"><span onclick="navigate('/')">Home</span></div>
  <div class="nav-item"><span onclick="navigate('/about')">About</span></div>
</div>

<!-- Good - ARIA for custom components -->
<div
  role="button"
  tabIndex={0}
  aria-pressed={isPressed}
  onClick={toggle}
  onKeyDown={(e) => e.key === 'Enter' && toggle()}
>
  Toggle
</div>
1. 可感知 信息必须能被用户感知，不能对所有感官都不可见。
指南1.1：文本替代方案 为所有非文本内容（图片、视频等）提供文本替代方案。
html
<!-- Good -->
<img src="chart.png" alt="Sales increased 25% in Q4" />

<!-- Bad -->
<img src="chart.png" alt="chart" />
<img src="chart.png" /> <!-- No alt text -->
指南1.4：可区分 让内容易于查看和聆听，确保足够的对比度、可读的文本和清晰的音频。
css
/* Good - 4.5:1 contrast ratio (WCAG AA) */
color: #030712; /* dark text */
background-color: #F9FAFB; /* light background */

/* Bad - 2.5:1 contrast ratio (fails WCAG AA) */
color: #9CA3AF; /* medium gray text */
background-color: #F9FAFB; /* light background */
2. 可操作 用户必须能够导航和交互产品，所有功能都必须能通过键盘访问。
指南2.1：键盘可访问 所有功能都必须能通过键盘访问。
html
<!-- Good - keyboard accessible -->
<button onClick={handleClick}>Click Me</button>

<!-- Bad - not keyboard accessible -->
<div onClick={handleClick}>Click Me</div>

<!-- Good - keyboard accessible with proper focus management -->
<div
  role="button"
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={(e) => e.key === 'Enter' && handleClick()}
>
  Click Me
</div>
指南2.4：可导航 用户必须能轻松导航产品，提供清晰的导航、焦点指示器和跳转链接。
html
<!-- Good - skip link -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Good - clear heading structure -->
<h1>Page Title</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>

<!-- Good - focus visible -->
<button style="outline: 2px solid #3B82F6; outline-offset: 2px;">
  Focused Button
</button>
3. 可理解 用户必须能理解内容和产品的使用方式。
指南3.1：可读性 让文本可读且易于理解。
html
<!-- Good - clear, simple language -->
<p>Save your document before closing.</p>

<!-- Bad - jargon, unclear -->
<p>Persist your artifact prior to terminating the session.</p>

<!-- Good - define abbreviations -->
<p>The <abbr title="World Wide Web Consortium">W3C</abbr> sets web standards.</p>
指南3.3：可预测 让产品的行为可预测，用户应能预知交互后的结果。
html
<!-- Good - clear form labels -->
<label for="email">Email Address</label>
<input id="email" type="email" />

<!-- Bad - unclear labels -->
<input type="email" placeholder="Enter your email" />

<!-- Good - clear error messages -->
<input type="email" aria-invalid="true" />
<span role="alert">Please enter a valid email address.</span>

<!-- Bad - unclear error messages -->
<input type="email" style="border: 1px solid red;" />
4. 健壮性 产品必须足够健壮，能被各种辅助技术解析。
指南4.1：兼容性 最大限度提升与辅助技术的兼容性，合理使用语义化HTML和ARIA。
html
<!-- Good - semantic HTML -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<!-- Bad - non-semantic HTML -->
<div class="nav">
  <div class="nav-item"><span onclick="navigate('/')">Home</span></div>
  <div class="nav-item"><span onclick="navigate('/about')">About</span></div>
</div>

<!-- Good - ARIA for custom components -->
<div
  role="button"
  tabIndex={0}
  aria-pressed={isPressed}
  onClick={toggle}
  onKeyDown={(e) => e.key === 'Enter' && toggle()}
>
  Toggle
</div>

Semantic HTML

语义化HTML

Semantic HTML is the foundation of accessibility. Use HTML elements that describe their meaning, not just their appearance.
语义化HTML是无障碍访问的基础，使用能描述含义而非仅外观的HTML元素。

Common Semantic Elements

常用语义化元素

ElementPurposeWhen to Use
<header>
Introductory contentTop of page or section
<nav>
Navigation linksMain navigation, breadcrumbs
<main>
Main contentPrimary content area
<article>
Self-contained contentBlog posts, news articles
<section>
Thematic groupingChapters, sections of content
<aside>
Tangential contentSidebars, related links
<footer>
Footer contentBottom of page or section
<h1>-<h6>
HeadingsPage structure and hierarchy
<button>
Clickable buttonUser actions
<a>
LinkNavigation
<form>
Form containerData collection
<label>
Form labelAssociate text with form input
<input>
Form inputUser input
<textarea>
Multi-line text inputLonger text input
<select>
Dropdown menuOption selection
元素用途使用场景
<header>
介绍性内容页面或区块顶部
<nav>
导航链接主导航、面包屑
<main>
主要内容核心内容区域
<article>
独立内容博客文章、新闻报道
<section>
主题分组章节、内容区块
<aside>
相关附属内容侧边栏、相关链接
<footer>
页脚内容页面或区块底部
<h1>-<h6>
标题页面结构与层级
<button>
可点击按钮用户操作
<a>
链接导航
<form>
表单容器数据收集
<label>
表单标签将文本与表单输入关联
<input>
表单输入用户输入
<textarea>
多行文本输入较长文本输入
<select>
下拉菜单选项选择

Semantic HTML Example

语义化HTML示例

html
<!-- Good - semantic HTML -->
<body>
  <header>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>Article Title</h1>
      <p>Article content...</p>
    </article>

    <aside>
      <h2>Related Articles</h2>
      <ul>
        <li><a href="/article-1">Article 1</a></li>
        <li><a href="/article-2">Article 2</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 My Company</p>
  </footer>
</body>
html
<!-- Good - semantic HTML -->
<body>
  <header>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>Article Title</h1>
      <p>Article content...</p>
    </article>

    <aside>
      <h2>Related Articles</h2>
      <ul>
        <li><a href="/article-1">Article 1</a></li>
        <li><a href="/article-2">Article 2</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 My Company</p>
  </footer>
</body>

Keyboard Navigation

键盘导航

Tab Order

制表符顺序

Ensure a logical tab order through your page. By default, tab order follows the HTML source order.
html
<!-- Good - logical tab order -->
<button>First</button>
<button>Second</button>
<button>Third</button>

<!-- Bad - illogical tab order (don't use tabindex > 0) -->
<button tabIndex={3}>Third</button>
<button tabIndex={1}>First</button>
<button tabIndex={2}>Second</button>

<!-- Good - skip interactive elements that aren't visible -->
<a href="#main-content" className="skip-link">Skip to main content</a>
<nav><!-- navigation --></nav>
<main id="main-content"><!-- main content --></main>
确保页面的制表符顺序符合逻辑，默认情况下，制表符顺序遵循HTML源码顺序。
html
<!-- Good - logical tab order -->
<button>First</button>
<button>Second</button>
<button>Third</button>

<!-- Bad - illogical tab order (don't use tabindex > 0) -->
<button tabIndex={3}>Third</button>
<button tabIndex={1}>First</button>
<button tabIndex={2}>Second</button>

<!-- Good - skip interactive elements that aren't visible -->
<a href="#main-content" className="skip-link">Skip to main content</a>
<nav><!-- navigation --></nav>
<main id="main-content"><!-- main content --></main>

Focus Management

焦点管理

Ensure focus is visible and managed appropriately:
css
/* Good - visible focus indicator */
button:focus-visible {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
}

/* Bad - no focus indicator */
button:focus {
  outline: none;
}

/* Good - focus trap in modal */
const Modal = () => {
  const firstButtonRef = useRef(null);
  const lastButtonRef = useRef(null);

  const handleKeyDown = (e) => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === firstButtonRef.current) {
        e.preventDefault();
        lastButtonRef.current?.focus();
      } else if (!e.shiftKey && document.activeElement === lastButtonRef.current) {
        e.preventDefault();
        firstButtonRef.current?.focus();
      }
    }
  };

  return (
    <div role="dialog" onKeyDown={handleKeyDown}>
      <button ref={firstButtonRef}>First</button>
      <button>Middle</button>
      <button ref={lastButtonRef}>Last</button>
    </div>
  );
};
确保焦点可见且管理得当：
css
/* Good - visible focus indicator */
button:focus-visible {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
}

/* Bad - no focus indicator */
button:focus {
  outline: none;
}

/* Good - focus trap in modal */
const Modal = () => {
  const firstButtonRef = useRef(null);
  const lastButtonRef = useRef(null);

  const handleKeyDown = (e) => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === firstButtonRef.current) {
        e.preventDefault();
        lastButtonRef.current?.focus();
      } else if (!e.shiftKey && document.activeElement === lastButtonRef.current) {
        e.preventDefault();
        firstButtonRef.current?.focus();
      }
    }
  };

  return (
    <div role="dialog" onKeyDown={handleKeyDown}>
      <button ref={firstButtonRef}>First</button>
      <button>Middle</button>
      <button ref={lastButtonRef}>Last</button>
    </div>
  );
};

Keyboard Event Handling

键盘事件处理

Handle keyboard events appropriately:
typescript
// Good - handle both click and keyboard
const Button = ({ onClick, children }) => {
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      onClick?.();
    }
  };

  return (
    <button onClick={onClick} onKeyDown={handleKeyDown}>
      {children}
    </button>
  );
};

// Good - handle Escape key in modal
const Modal = ({ onClose }) => {
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Escape') {
      onClose();
    }
  };

  return (
    <div role="dialog" onKeyDown={handleKeyDown}>
      {/* modal content */}
    </div>
  );
};
合理处理键盘事件：
typescript
// Good - handle both click and keyboard
const Button = ({ onClick, children }) => {
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      onClick?.();
    }
  };

  return (
    <button onClick={onClick} onKeyDown={handleKeyDown}>
      {children}
    </button>
  );
};

// Good - handle Escape key in modal
const Modal = ({ onClose }) => {
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Escape') {
      onClose();
    }
  };

  return (
    <div role="dialog" onKeyDown={handleKeyDown}>
      {/* modal content */}
    </div>
  );
};

Screen Reader Support

屏幕阅读器支持

ARIA (Accessible Rich Internet Applications)

ARIA（Accessible Rich Internet Applications）

ARIA provides additional semantic information for assistive technologies:
html
<!-- Good - ARIA labels -->
<button aria-label="Close menu">×</button>

<!-- Good - ARIA live regions -->
<div aria-live="polite" aria-atomic="true">
  Item added to cart
</div>

<!-- Good - ARIA roles -->
<div role="alert">Error: Please fill in all required fields.</div>

<!-- Good - ARIA expanded -->
<button aria-expanded={isOpen} aria-controls="menu">
  Menu
</button>
<div id="menu" hidden={!isOpen}>
  {/* menu items */}
</div>

<!-- Good - ARIA current -->
<nav>
  <a href="/" aria-current="page">Home</a>
  <a href="/about">About</a>
</nav>
ARIA为辅助技术提供额外的语义信息：
html
<!-- Good - ARIA labels -->
<button aria-label="Close menu">×</button>

<!-- Good - ARIA live regions -->
<div aria-live="polite" aria-atomic="true">
  Item added to cart
</div>

<!-- Good - ARIA roles -->
<div role="alert">Error: Please fill in all required fields.</div>

<!-- Good - ARIA expanded -->
<button aria-expanded={isOpen} aria-controls="menu">
  Menu
</button>
<div id="menu" hidden={!isOpen}>
  {/* menu items */}
</div>

<!-- Good - ARIA current -->
<nav>
  <a href="/" aria-current="page">Home</a>
  <a href="/about">About</a>
</nav>

Screen Reader Testing

屏幕阅读器测试

Test with actual screen readers:
html
<!-- Good - descriptive link text -->
<a href="/article">Read more about accessibility</a>

<!-- Bad - vague link text -->
<a href="/article">Read more</a>

<!-- Good - descriptive button text -->
<button>Delete account</button>

<!-- Bad - vague button text -->
<button>Delete</button>

<!-- Good - form labels associated with inputs -->
<label for="email">Email Address</label>
<input id="email" type="email" />

<!-- Bad - unassociated labels -->
<label>Email Address</label>
<input type="email" />
使用真实的屏幕阅读器进行测试：
html
<!-- Good - descriptive link text -->
<a href="/article">Read more about accessibility</a>

<!-- Bad - vague link text -->
<a href="/article">Read more</a>

<!-- Good - descriptive button text -->
<button>Delete account</button>

<!-- Bad - vague button text -->
<button>Delete</button>

<!-- Good - form labels associated with inputs -->
<label for="email">Email Address</label>
<input id="email" type="email" />

<!-- Bad - unassociated labels -->
<label>Email Address</label>
<input type="email" />

Color Contrast

色彩对比度

Contrast Ratios

对比度比值

Ensure sufficient contrast between text and background:
css
/* WCAG AA - Normal text (4.5:1) */
color: #030712; /* dark text */
background-color: #F9FAFB; /* light background */
/* Contrast ratio: 19:1 ✓ */

/* WCAG AA - Large text (3:1) */
color: #4B5563; /* medium gray text */
background-color: #F9FAFB; /* light background */
/* Contrast ratio: 6.5:1 ✓ */

/* WCAG AAA - Normal text (7:1) */
color: #030712; /* dark text */
background-color: #F9FAFB; /* light background */
/* Contrast ratio: 19:1 ✓ */

/* Fails WCAG AA */
color: #9CA3AF; /* light gray text */
background-color: #F9FAFB; /* light background */
/* Contrast ratio: 2.5:1 ✗ */
确保文本与背景之间有足够的对比度：
css
/* WCAG AA - Normal text (4.5:1) */
color: #030712; /* dark text */
background-color: #F9FAFB; /* light background */
/* Contrast ratio: 19:1 ✓ */

/* WCAG AA - Large text (3:1) */
color: #4B5563; /* medium gray text */
background-color: #F9FAFB; /* light background */
/* Contrast ratio: 6.5:1 ✓ */

/* WCAG AAA - Normal text (7:1) */
color: #030712; /* dark text */
background-color: #F9FAFB; /* light background */
/* Contrast ratio: 19:1 ✓ */

/* Fails WCAG AA */
color: #9CA3AF; /* light gray text */
background-color: #F9FAFB; /* light background */
/* Contrast ratio: 2.5:1 ✗ */

Testing Contrast

对比度测试

Use tools like WebAIM Contrast Checker or Polished:
javascript
import { readableColor } from 'polished';

const backgroundColor = '#3B82F6';
const textColor = readableColor(backgroundColor); // Returns #FFFFFF or #000000
使用WebAIM Contrast Checker或Polished等工具：
javascript
import { readableColor } from 'polished';

const backgroundColor = '#3B82F6';
const textColor = readableColor(backgroundColor); // Returns #FFFFFF or #000000

Inclusive Design Practices

包容性设计实践

1. Don't Rely on Color Alone

1. 不要仅依赖色彩

Use patterns, icons, or text labels in addition to color:
html
<!-- Good - color + icon + text -->
<span style="color: green;">
  <CheckIcon />
  Success
</span>

<!-- Bad - color alone -->
<span style="color: green;">Success</span>

<!-- Good - color + pattern -->
<div style="background: repeating-linear-gradient(45deg, #3B82F6, #3B82F6 10px, #2563EB 10px, #2563EB 20px);">
  Pattern
</div>

<!-- Bad - color alone -->
<div style="background-color: #3B82F6;">Color</div>
除了色彩，还可使用图案、图标或文本标签：
html
<!-- Good - color + icon + text -->
<span style="color: green;">
  <CheckIcon />
  Success
</span>

<!-- Bad - color alone -->
<span style="color: green;">Success</span>

<!-- Good - color + pattern -->
<div style="background: repeating-linear-gradient(45deg, #3B82F6, #3B82F6 10px, #2563EB 10px, #2563EB 20px);">
  Pattern
</div>

<!-- Bad - color alone -->
<div style="background-color: #3B82F6;">Color</div>

2. Provide Alternatives for Images

2. 为图片提供替代方案

html
<!-- Good - descriptive alt text -->
<img src="chart.png" alt="Sales increased 25% in Q4 2025" />

<!-- Bad - no alt text -->
<img src="chart.png" />

<!-- Good - alt text for decorative images -->
<img src="decoration.png" alt="" />

<!-- Good - long description for complex images -->
<img src="complex-chart.png" alt="Chart showing sales trends" />
<a href="/chart-description">View detailed chart description</a>
html
<!-- Good - descriptive alt text -->
<img src="chart.png" alt="Sales increased 25% in Q4 2025" />

<!-- Bad - no alt text -->
<img src="chart.png" />

<!-- Good - alt text for decorative images -->
<img src="decoration.png" alt="" />

<!-- Good - long description for complex images -->
<img src="complex-chart.png" alt="Chart showing sales trends" />
<a href="/chart-description">View detailed chart description</a>

3. Provide Captions and Transcripts

3. 提供字幕和文字记录

html
<!-- Good - captions for video -->
<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track kind="captions" src="captions.vtt" srclang="en" label="English" />
</video>

<!-- Good - transcript for audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
</audio>
<p><a href="/audio-transcript">Read transcript</a></p>
html
<!-- Good - captions for video -->
<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track kind="captions" src="captions.vtt" srclang="en" label="English" />
</video>

<!-- Good - transcript for audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
</audio>
<p><a href="/audio-transcript">Read transcript</a></p>

4. Design for Readability

4. 为可读性做设计

css
/* Good - readable font size */
body {
  font-size: 16px;
  line-height: 1.6;
}

/* Good - readable line length */
main {
  max-width: 65ch;
}

/* Good - sufficient whitespace */
section {
  padding: 2rem;
}

/* Bad - too small */
body {
  font-size: 12px;
  line-height: 1.2;
}
css
/* Good - readable font size */
body {
  font-size: 16px;
  line-height: 1.6;
}

/* Good - readable line length */
main {
  max-width: 65ch;
}

/* Good - sufficient whitespace */
section {
  padding: 2rem;
}

/* Bad - too small */
body {
  font-size: 12px;
  line-height: 1.2;
}

How to Use This Skill with Claude Code

如何结合Claude Code使用本技能

Audit Accessibility

无障碍审计

"I'm using the accessibility-excellence skill. Can you audit my product for accessibility?
- Check WCAG AA compliance
- Identify keyboard navigation issues
- Check screen reader compatibility
- Verify color contrast ratios
- Check for missing alt text
- Identify semantic HTML issues"
"I'm using the accessibility-excellence skill. Can you audit my product for accessibility?
- Check WCAG AA compliance
- Identify keyboard navigation issues
- Check screen reader compatibility
- Verify color contrast ratios
- Check for missing alt text
- Identify semantic HTML issues"

Implement Accessibility

实现无障碍访问

"Can you help me implement accessibility?
- Add semantic HTML
- Add ARIA labels and roles
- Implement keyboard navigation
- Ensure focus management
- Verify color contrast
- Add alt text to images"
"Can you help me implement accessibility?
- Add semantic HTML
- Add ARIA labels and roles
- Implement keyboard navigation
- Ensure focus management
- Verify color contrast
- Add alt text to images"

Create Accessibility Documentation

创建无障碍文档

"Can you create accessibility documentation?
- WCAG AA checklist
- Keyboard navigation guide
- Screen reader testing guide
- Color contrast requirements
- Accessibility best practices"
"Can you create accessibility documentation?
- WCAG AA checklist
- Keyboard navigation guide
- Screen reader testing guide
- Color contrast requirements
- Accessibility best practices"

Test Accessibility

无障碍测试

"Can you create an accessibility testing plan?
- Keyboard navigation testing
- Screen reader testing
- Color contrast verification
- Semantic HTML validation
- ARIA usage validation"
"Can you create an accessibility testing plan?
- Keyboard navigation testing
- Screen reader testing
- Color contrast verification
- Semantic HTML validation
- ARIA usage validation"

Design Critique: Evaluating Accessibility

设计评审：评估无障碍访问

Claude Code can critique your accessibility:
"Can you evaluate my accessibility?
- Are my pages WCAG AA compliant?
- Is keyboard navigation working?
- Are my color contrasts sufficient?
- Is my semantic HTML correct?
- What's one thing I could improve immediately?"
Claude Code可以评审你的无障碍访问设计：
"Can you evaluate my accessibility?
- Are my pages WCAG AA compliant?
- Is keyboard navigation working?
- Are my color contrasts sufficient?
- Is my semantic HTML correct?
- What's one thing I could improve immediately?"

Integration with Other Skills

与其他技能集成

  • design-foundation — Accessible tokens and design decisions
  • layout-system — Accessible layouts and responsive design
  • typography-system — Readable font sizes and line heights
  • color-system — Sufficient contrast ratios
  • component-architecture — Accessible components
  • interaction-design — Accessible interactions
  • design-foundation — 无障碍设计令牌与决策
  • layout-system — 无障碍布局与响应式设计
  • typography-system — 可读的字体大小与行高
  • color-system — 足够的对比度比值
  • component-architecture — 无障碍组件
  • interaction-design — 无障碍交互

Key Principles

核心原则

1. Accessibility is Inclusion Design for everyone, including people with disabilities.
2. Semantic HTML is Foundation Use semantic HTML elements that describe their meaning.
3. Keyboard Navigation is Essential All functionality must be available from the keyboard.
4. Screen Readers Must Work Test with actual screen readers, not just automated tools.
5. Contrast Matters Ensure sufficient contrast for readability.
1. 无障碍即包容 为所有人设计，包括残障人士。
2. 语义化HTML是基础 使用能描述含义的语义化HTML元素。
3. 键盘导航至关重要 所有功能都必须能通过键盘访问。
4. 屏幕阅读器必须正常工作 使用真实的屏幕阅读器测试，而不仅仅依赖自动化工具。
5. 对比度很重要 确保足够的对比度以提升可读性。

Checklist: Is Your Accessibility Ready?

检查清单：你的产品是否符合无障碍要求？

  • All pages are WCAG AA compliant
  • Semantic HTML is used throughout
  • Keyboard navigation works for all functionality
  • Focus indicators are visible
  • All images have descriptive alt text
  • Form labels are associated with inputs
  • Color contrast meets WCAG AA standards
  • ARIA is used appropriately
  • Screen reader testing has been done
  • Videos have captions and transcripts
  • Reduced motion preferences are respected
  • Accessibility is tested regularly
Accessibility is not a feature—it's a fundamental requirement. Make it a priority.
  • 所有页面符合WCAG AA标准
  • 全程使用语义化HTML
  • 所有功能都支持键盘导航
  • 焦点指示器可见
  • 所有图片都有描述性alt文本
  • 表单标签与输入框正确关联
  • 色彩对比度符合WCAG AA标准
  • 合理使用ARIA
  • 已完成屏幕阅读器测试
  • 视频配有字幕和文字记录
  • 尊重减少动画的偏好设置
  • 定期进行无障碍测试
无障碍访问不是一个功能——它是一项基本要求。请将其列为优先事项。",