HTML 可访问性

可访问性概述

可访问性（Accessibility）是指网页和应用能够被所有用户使用，包括那些有 disabilities 的用户。HTML 提供了多种特性和技术，帮助开发者创建更加包容的网页。

为什么可访问性很重要

• 法律要求：许多国家和地区都有关于网页可访问性的法律要求
• 用户体验：改善所有用户的体验，不仅仅是有 disabilities 的用户
• SEO 优化：搜索引擎可以更好地理解网页内容
• 市场扩展：覆盖更多的用户群体
• 社会责任：创建更加包容的互联网

基本可访问性原则

1. 感知性

确保信息和用户界面组件可以被用户感知。

2. 可操作性

确保用户界面组件和导航可以被用户操作。

3. 可理解性

确保信息和用户界面操作是可理解的。

4. 鲁棒性

确保内容可以被各种用户代理（包括辅助技术）可靠地解释。

语义化 HTML

使用正确的语义标签

<!-- 不好的做法 -->
<div class="header">
    <div class="title">网站标题</div>
    <div class="nav">
        <div class="nav-item"><a href="#">首页</a></div>
        <div class="nav-item"><a href="#">关于我们</a></div>
    </div>
</div>

<!-- 好的做法 -->
<header>
    <h1>网站标题</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </nav>
</header>

标题层级

<!-- 不好的做法 -->
<h1>主标题</h1>
<h3>子标题</h3> <!-- 跳过了 h2 -->
<p>内容</p>

<!-- 好的做法 -->
<h1>主标题</h1>
<h2>子标题</h2>
<p>内容</p>

图像可访问性

为图像添加 alt 属性

<!-- 不好的做法 -->
<img src="logo.png">

<!-- 好的做法 -->
<img src="logo.png" alt="公司标志">

装饰性图像

对于纯装饰性的图像，可以使用空的 alt 属性：

<img src="decorative.png" alt="">

复杂图像

对于复杂图像，如图表和地图，应该提供详细的文字描述：

<img src="chart.png" alt="2024年销售数据图表，第一季度销售额为100万，第二季度为150万，第三季度为200万，第四季度为250万">

<!-- 或者使用 longdesc 属性 -->
<img src="chart.png" alt="销售数据图表" longdesc="chart-description.html">

链接可访问性

链接文本

<!-- 不好的做法 -->
<a href="contact.html">点击这里</a>

<!-- 好的做法 -->
<a href="contact.html">联系我们</a>

链接上下文

确保链接文本在上下文中有意义：

<!-- 不好的做法 -->
<p>更多信息请<a href="details.html">点击这里</a>。</p>

<!-- 好的做法 -->
<p>请查看<a href="details.html">更多详细信息</a>。</p>

表单可访问性

使用 label 标签

<!-- 不好的做法 -->
<input type="text" name="username">

<!-- 好的做法 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

表单分组

<fieldset>
    <legend>个人信息</legend>
    <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">
    </div>
</fieldset>

表单验证

<input type="email" name="email" required aria-required="true">
<span id="email-error" aria-live="assertive" style="display: none;">请输入有效的邮箱地址</span>

ARIA 属性

ARIA 角色

<div role="navigation" aria-label="主导航">
    <!-- 导航内容 -->
</div>

<div role="banner">
    <!-- 网站标题和标志 -->
</div>

<div role="main">
    <!-- 主要内容 -->
</div>

<div role="complementary">
    <!-- 侧边栏内容 -->
</div>

<div role="contentinfo">
    <!-- 页脚信息 -->
</div>

ARIA 状态和属性

<!-- 展开/折叠区域 -->
<button aria-expanded="false" aria-controls="details">显示详情</button>
<div id="details" aria-hidden="true">
    <!-- 详情内容 -->
</div>

<!-- 进度条 -->
<div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    75%
</div>

<!-- 错误消息 -->
<input type="text" aria-invalid="true" aria-describedby="error-message">
<span id="error-message">请输入有效的值</span>

键盘导航

确保所有功能都可以通过键盘访问

• 确保所有链接、按钮和表单控件都可以通过 Tab 键导航
• 确保键盘焦点可见
• 确保可以使用 Enter 键激活链接和按钮
• 确保可以使用空格键激活某些控件

跳过导航链接

为屏幕阅读器用户提供跳过重复导航内容的链接：

<a href="#main-content" class="skip-link">跳过导航</a>
<!-- 导航内容 -->
<main id="main-content">
    <!-- 主要内容 -->
</main>

键盘焦点样式

:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* 移除默认的焦点样式，添加自定义样式 */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

色彩可访问性

对比度

确保文本和背景之间有足够的对比度：

• 普通文本：至少 4.5:1
• 大文本（18pt 或 14pt 粗体）：至少 3:1

色彩依赖

不要仅依赖色彩来传达信息：

<!-- 不好的做法 -->
<p style="color: red;">错误：请输入有效的邮箱地址</p>

<!-- 好的做法 -->
<p style="color: red;"><strong>错误：</strong>请输入有效的邮箱地址</p>

多媒体可访问性

音频和视频

• 为音频和视频提供字幕
• 为视频提供音频描述
• 为多媒体内容提供文字替代

动画

• 避免可能引起癫痫发作的闪烁
• 提供关闭动画的选项
• 确保动画不会干扰内容的阅读

响应式设计与可访问性

适应不同设备

• 确保网页在不同屏幕尺寸上都能正常显示
• 确保触摸目标足够大（至少 48x48 像素）
• 确保文本在不同设备上都清晰可读

移动设备可访问性

• 确保在移动设备上也可以通过键盘导航
• 确保触摸操作方便易用
• 确保屏幕阅读器在移动设备上也能正常工作

可访问性测试

手动测试

• 使用键盘导航整个网站
• 使用屏幕阅读器测试
• 检查色彩对比度
• 测试不同屏幕尺寸

自动化测试工具

• WAVE - Web Accessibility Evaluation Tool
• Axe - Accessibility Testing Engine
• Lighthouse - Google's web performance and accessibility tool
• HTML_CodeSniffer - HTML accessibility checker

浏览器开发者工具

• Chrome DevTools 中的可访问性面板
• Firefox 中的可访问性检查器

最佳实践

1. 从设计开始考虑可访问性

• 在设计阶段就考虑可访问性
• 遵循 WCAG 指南
• 进行用户测试，包括有 disabilities 的用户

2. 编写语义化 HTML

• 使用正确的语义标签
• 保持标题层级清晰
• 使用 alt 属性为图像提供替代文本

3. 确保键盘可访问性

• 确保所有功能都可以通过键盘访问
• 提供跳过导航链接
• 确保键盘焦点可见

4. 使用 ARIA 适当增强可访问性

• 仅在必要时使用 ARIA
• 正确使用 ARIA 角色、状态和属性
• 不要使用 ARIA 替代语义化 HTML

5. 测试和优化

• 定期测试可访问性
• 修复发现的问题
• 持续改进

实践练习

1. 检查并改进现有网页的可访问性
2. 创建一个完全可访问的表单
3. 测试网页在屏幕阅读器中的表现
4. 确保网页在不同设备上都能正常访问
5. 使用自动化工具测试可访问性

常见问题

1. 可访问性会增加开发时间和成本

• 实际上，从设计阶段就考虑可访问性可以减少后期修改的成本
• 许多可访问性改进是简单且低成本的
• 可访问性可以提高用户体验和 SEO

2. 可访问性只针对有 disabilities 的用户

• 可访问性改善所有用户的体验
• 例如，清晰的导航和足够的对比度对所有用户都有好处
• 临时 disabilities（如受伤或环境限制）的用户也会受益

3. 可访问性会影响网站的美观

• 良好的可访问性设计可以与美观的设计相结合
• 许多可访问性改进是不可见的
• 可访问性可以激发创新的设计解决方案

小结

• 可访问性是创建包容的网页的重要组成部分
• 语义化 HTML 是可访问性的基础
• ARIA 属性可以增强网页的可访问性
• 键盘导航和色彩对比度对于可访问性至关重要
• 定期测试和改进可访问性
• 可访问性不仅是法律要求，也是良好的用户体验实践

下一章我们将学习 HTML 最佳实践，了解如何编写高质量的 HTML 代码。