HTML 可访问性

这一课你将能做到

1. 为所有图片写有意义的 alt 文本，区分内容图、装饰图和功能图的 alt 策略
2. 实现键盘完全可操作的页面流程：正确的 Tab 顺序、可见的焦点指示器、弹窗焦点管理
3. 为自定义组件添加合适的 ARIA 角色和属性，知道什么时候该用原生 HTML 代替 ARIA

为什么要学

可访问性（Accessibility，简称 a11y）不是「锦上添花」，是 Web 的底线。中国视障者约 1700 万，全球约 2.85 亿；还有色盲、运动障碍、认知障碍用户。你的页面如果全靠鼠标、靠颜色传达信息、靠图片承载关键内容——这些人就被拒之门外。而且，良好的可访问性直接利好 SEO：搜索引擎爬虫本质上就是「盲人用户」。

人话：可访问性就像建筑的无障碍坡道。你不是为「特定人群」做的，你做的是所有人都能用的基础设施。

先建立图像

可访问性四大支柱：

可感知（Perceivable）
├── 图片有 alt，视频有字幕
├── 颜色不是唯一信息载体
└── 文字可放大 200% 不溢出

可操作（Operable）
├── 全部功能可用键盘完成
├── 焦点可见且顺序合理
└── 无时间限制的内容（或可控）

可理解（Understandable）
├── 页面语言声明正确
├── 错误提示清晰
└── 导航一致

健壮性（Robust）
├── 标准 HTML 语义
├── ARIA 状态正确更新
└── 兼容辅助技术

跟着做

步骤 1：图片 alt 策略

新建 a11y.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可访问性演示</title>
</head>
<body>
    <!-- 内容图：alt 描述图片传达的信息 -->
    <img src="chart.png" alt="2026年Q3销售额柱状图：Q1 80万，Q2 95万，Q3 120万，呈上升趋势">

    <!-- 装饰图：空 alt，屏幕阅读器跳过 -->
    <img src="divider-line.png" alt="">

    <!-- 功能图（图标按钮）：alt 描述功能 -->
    <button>
        <img src="icon-search.png" alt="搜索">
    </button>

    <!-- 复杂图表：简短 alt + 正文详细描述 -->
    <img src="complex-diagram.png" alt="系统架构图，详见下文描述">
    <p>本系统采用三层架构：表现层使用 Vue.js……</p>
</body>
</html>

alt 决策树：

这张图承载信息？
├── 是 → alt 描述关键信息
│        └── 信息复杂？ → 简短 alt + 正文/figcaption 详述
└── 否 → 纯装饰？
         ├── 是 → alt=""
         └── 否 → 功能图标？ → alt 描述功能（非外观）

步骤 2：键盘导航与焦点管理

<style>
    /* 焦点指示器必须可见 */
    *:focus {
        outline: 2px solid #005fcc;
        outline-offset: 2px;
    }

    /* 自定义按钮也要有焦点样式 */
    .btn {
        padding: 8px 16px;
        border: 1px solid #333;
        cursor: pointer;
    }
    .btn:focus {
        outline: 2px solid #005fcc;
    }
</style>

<!-- 原生控件自动支持键盘 -->
<button>原生按钮（Tab 可达，Enter/Space 激活）</button>
<a href="/page">原生链接（Tab 可达，Enter 跳转）</a>
<input type="text" placeholder="输入框（Tab 可达）">

<!-- 自定义控件：必须手动补全键盘支持 -->
<div class="btn" role="button" tabindex="0"
     onclick="handleClick()"
     onkeydown="handleKey(event)">
    自定义按钮
</div>

<script>
function handleClick() {
    console.log('点击');
}
function handleKey(event) {
    if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        handleClick();
    }
}
</script>