🧪 Frontend Lab
交互式前端学习实验室

HTML 可访问性:无障碍网页

html · intermediate · 25-30 min · Step 1/6

Web 可访问性 (a11y)

核心原则

  1. 语义化标签 — 用
  2. 替代文字 — 所有 alt
  3. 键盘导航 — Tab 能访问所有交互元素
  4. 颜色对比 — 文字/背景对比度 ≥ 4.5:1

ARIA 属性

<!-- 标签关联 -->
<input aria-label="搜索">

<!-- 状态通知 -->
<div role="alert">操作成功!</div>

<!-- 展开/收起 -->
<button aria-expanded="false" aria-controls="menu">菜单</button>
<ul id="menu" hidden>...</ul>
ARIA用途
aria-label不可见标签
aria-hidden对屏幕阅读器隐藏
role定义元素角色
aria-expanded展开状态
可访问性不仅帮助残障用户,也改善 SEO 和整体用户体验。