前端无障碍访问实战：让 Bootstrap 网站更友好
2026-06-05 ·
Web 无障碍访问（Accessibility）不仅是为了遵循 WCAG 标准，更是为了让所有用户都能顺畅使用你的网站。本文分享在 Bootstrap 项目中的可操作性方案。
1. 语义化 HTML
Bootstrap 的组件大多使用语义化标签，但需要确认以下要点：
<!-- 好的做法 -->
<nav aria-label="主导航">...</nav>
<main id="main-content">...</main>
<footer>...</footer>
<!-- 标题层级 -->
<h1>页面标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>
2. ARIA 属性
<!-- 按钮 -->
<button aria-label="关闭"><i class="bi-x"></i></button>
<!-- 导航当前项 -->
<a href="/" aria-current="page">首页</a>
<!-- 错误提示 -->
<div role="alert">请输入有效的邮箱地址</div>
3. 键盘导航
Bootstrap 的内置组件（如下拉菜单、模态框、轮播）已支持键盘导航。对于自定义交互，需确保焦点管理正确：
<!-- 可聚焦元素使用 tabindex -->
<div tabindex="0" role="button" @click="handleClick"
@keydown.enter="handleClick">可点击</div>
4. 颜色对比度
Bootstrap 的默认颜色方案符合 WCAG AA 标准（对比度 ≥ 4.5:1）。自定义主题时，使用在线对比度检查工具验证：
WCAG 2.1 AA 标准要求普通文本对比度 ≥ 4.5:1，大文本 ≥ 3:1。可使用 WebAIM 的对比度检查工具免费测试。
5. 表单无障碍
<div class="mb-3">
<label for="email" class="form-label">邮箱地址</label>
<input type="email" class="form-control" id="email"
aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">我们不会分享您的邮箱。</div>
</div>