无障碍与 WCAG
语义化 HTML
<!-- 使用语义化元素代替通用 div -->
<header>
<nav aria-label="主导航">
<ul>
<li><a href="/" aria-current="page">首页</a></li>
<li><a href="/products">产品</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>产品详情</h1>
<section aria-labelledby="specs-heading">
<h2 id="specs-heading">规格说明</h2>
<dl>
<dt>重量</dt>
<dd>1.2 kg</dd>
<dt>尺寸</dt>
<dd>30 x 20 x 10 cm</dd>
</dl>
</section>
</article>
</main>
<footer>
<p>© 2024 公司名称</p>
</footer>
使用 <nav>、<main>、<article>、<section>、<aside> 代替 <div> 作为地标。屏幕阅读器使用这些元素来导航页面。
ARIA 模式
function Modal({ isOpen, onClose, title, children }) {
if (!isOpen) return null;
return (
<div
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
onKeyDown={(e) => e.key === "Escape" && onClose()}
>
<h2 id="modal-title">{title}</h2>
<div>{children}</div>
<button onClick={onClose} aria-label="关闭对话框">
<XIcon aria-hidden="true" />
</button>
</div>
);
}
function Tabs({ tabs, activeIndex, onChange }) {
return (
<div>
<div role="tablist" aria-label="设置分区">
{tabs.map((tab, i) => (
<button
key={tab.id}
role="tab"
id={`tab-${tab.id}`}
aria-selected={i === activeIndex}
aria-controls={`panel-${tab.id}`}
tabIndex={i === activeIndex ? 0 : -1}
onClick={() => onChange(i)}
onKeyDown={(e) => handleArrowKeys(e, i, tabs.length, onChange)}
>
{tab.label}
</button>
))}
</div>
{tabs.map((tab, i) => (
<div
key={tab.id}
role="tabpanel"
id={`panel-${tab.id}`}
aria-labelledby={`tab-${tab.id}`}
hidden={i !== activeIndex}
tabIndex={0}
>
{tab.content}
</div>
))}
</div>
);
}
键盘导航
function handleArrowKeys(
event: React.KeyboardEvent,
currentIndex: number,
totalItems: number,
onSelect: (index: number) => void
) {
let newIndex = currentIndex;
switch (event.key) {
case "ArrowRight":
case "ArrowDown":
newIndex = (currentIndex + 1) % totalItems;
break;
case "ArrowLeft":
case "ArrowUp":
newIndex = (currentIndex - 1 + totalItems) % totalItems;
break;
case "Home":
newIndex = 0;
break;
case "End":
newIndex = totalItems - 1;
break;
default:
return;
}
event.preventDefault();
onSelect(newIndex);
}
所有可交互元素必须可通过键盘访问。Tab 键用于焦点导航，Enter/Space 键用于激活，方向键用于组件内部导航。
表单无障碍
function SignupForm() {
return (
<form aria-labelledby="form-title" noValidate>
<h2 id="form-title">创建账户</h2>
<div>
<label htmlFor="email">电子邮件地址</label>
<input
id="email"
type="email"
required
aria-required="true"
aria-describedby="email-hint email-error"
aria-invalid={hasError ? "true" : undefined}
/>
<p id="email-hint">我们绝不会分享您的电子邮件。</p>
{hasError && (
<p id="email-error" role="alert">
请输入有效的电子邮件地址。
</p>
)}
</div>
<button type="submit">创建账户</button>
</form>
);
}
颜色与对比度
:root {
--text-primary: #1a1a1a; /* 白色背景上对比度 15.3:1 */
--text-secondary: #595959; /* 白色背景上对比度 7.0:1 */
--text-on-primary: #ffffff; /* 确保品牌色背景上对比度 4.5:1 */
--border-focus: #0066cc; /* 可见的焦点环 */
}
*:focus-visible {
outline: 3px solid var(--border-focus);
outline-offset: 2px;
}
.error-message {
color: #d32f2f;
/* 不要仅依赖颜色 - 需添加图标或文本前缀 */
}
.error-message::before {
content: "错误: ";
font-weight: bold;
}
WCAG AA 要求普通文本对比度不低于 4.5:1，大文本（18px 粗体或 24px 常规）不低于 3:1。
反模式
- 使用
div和span作为可点击元素，而不是button或a - 移除焦点轮廓但未提供替代指示符
- 仅依赖颜色传递信息（红色表示错误，绿色表示成功）
- 在可见文本已标记元素时使用
aria-label - 自动播放媒体但没有暂停机制
- 缺少供键盘用户使用的跳过导航链接
检查清单
- 所有可交互元素均可通过键盘访问（Tab、Enter、Escape、方向键）
- 使用了语义化 HTML 地标（
nav、main、article、section） - 图片包含描述性的
alt文本（装饰性图片使用alt=""） - 颜色对比度满足 WCAG AA 标准（普通文本 4.5:1，大文本 3:1）
- 所有可交互元素上有可见的焦点指示符
- 表单输入有关联的
<label>元素 - 错误消息通过
role="alert"向屏幕阅读器播报 - 页面已使用屏幕阅读器（VoiceOver、NVDA）和纯键盘进行测试