编辑“︁HTML可访问性测试”︁（章节）

= HTML可访问性测试 =

HTML可访问性测试是确保网页内容对所有用户（包括残障人士）可用的过程。它涉及验证HTML代码是否符合可访问性标准（如[[WCAG]]），并确保辅助技术（如屏幕阅读器）能够正确解析和呈现内容。

== 简介 ==
可访问性测试的核心目标是消除数字障碍，使以下群体能够平等访问信息：
* 视觉障碍用户（依赖屏幕阅读器或高对比度模式）
* 运动障碍用户（依赖键盘导航）
* 听觉障碍用户（需要文字替代音频内容）
* 认知障碍用户（需要清晰的内容结构）

测试通常分为两类：
# '''自动化测试'''：通过工具快速检测可访问性问题
# '''手动测试'''：人工验证交互逻辑和语义正确性

== 测试方法 ==

=== 1. 自动化工具 ===
常用工具包括：
* WAVE（Web Accessibility Evaluation Tool）
* axe DevTools
* Lighthouse（Chrome开发者工具）

<syntaxhighlight lang="html">
<!-- 示例：检测缺少alt文本的图像 -->
<img src="logo.png"> <!-- 会触发警告 -->
<img src="logo.png" alt="公司标志"> <!-- 通过检测 -->
</syntaxhighlight>

=== 2. 键盘导航测试 ===
通过Tab键遍历所有交互元素：
* 检查焦点顺序是否合理
* 验证所有功能是否可用键盘操作

<mermaid>
flowchart TD
    A[开始] --> B[按Tab键]
    B --> C{焦点可见?}
    C -->|是| D[继续测试]
    C -->|否| E[修复样式]
    D --> F{可操作?}
    F -->|是| G[测试完成]
    F -->|否| H[修复交互逻辑]
</mermaid>

=== 3. 屏幕阅读器测试 ===
主流工具：
* NVDA（Windows）
* VoiceOver（macOS/iOS）
* JAWS

测试要点：
* 朗读顺序是否符合DOM顺序
* 表单标签是否关联正确
* ARIA属性是否生效

== 实际案例 ==

=== 案例1：表单可访问性 ===
<syntaxhighlight lang="html">
<!-- 问题代码 -->
<input type="text" id="search">
<button>搜索</button>

<!-- 修复后 -->
<label for="search">商品搜索：</label>
<input type="text" id="search" aria-describedby="search-help">
<button aria-label="执行搜索">搜索</button>
<span id="search-help">输入关键词后按回车或点击搜索按钮</span>
</syntaxhighlight>

修复内容：
* 添加可见标签
* 包含辅助说明
* 为按钮添加ARIA标签

=== 案例2：数据表格 ===
<syntaxhighlight lang="html">
<table>
  <caption>2023年销售数据</caption>
  <thead>
    <tr>
      <th scope="col">季度</th>
      <th scope="col">销售额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1</th>
      <td>$120,000</td>
    </tr>
  </tbody>
</table>
</syntaxhighlight>

关键改进：
* 添加<code>caption</code>说明表格用途
* 使用<code>scope</code>属性明确行列关系

== 数学基础 ==
在焦点管理中使用曼哈顿距离计算最优焦点顺序：

<math>
D = |x_2 - x_1| + |y_2 - y_1|
</math>

其中<math>(x_1,y_1)</math>和<math>(x_2,y_2)</math>表示元素在布局中的坐标。

== 进阶技巧 ==
* '''动态内容'''：使用<code>aria-live</code>区域通知屏幕阅读器内容更新
* '''颜色对比'''：确保文本与背景的对比度至少达到4.5:1（WCAG AA级）
* '''跳过链接'''：为键盘用户提供跳过导航的快捷方式

== 测试清单 ==
{| class="wikitable"
|+ 基本可访问性检查项
|-
! 项目 !! 通过标准
|-
| 图像alt文本 || 所有装饰性图像有空的alt属性，内容性图像有描述文本
|-
| 标题结构 || 使用h1-h6形成逻辑层次，没有跳级
|-
| 表单标签 || 每个表单控件都有关联的<code>label</code>或<code>aria-label</code>
|-
| 键盘操作 || 所有功能可通过键盘完成
|-
| 颜色使用 || 不单独依赖颜色传达信息
|}

== 常见错误与修复 ==
* '''错误'''：<code><div onclick="..."></code>作为按钮
* '''修复'''：改用<code><button></code>元素并添加键盘事件

* '''错误'''：CSS隐藏内容仍可被屏幕阅读器读取
* '''修复'''：使用<code>aria-hidden="true"</code>或完全移除DOM

== 延伸阅读 ==
* [[WCAG 2.1]]官方指南
* ARIA（WAI-ARIA）规范
* 各国网络可访问性法律法规

通过系统化的可访问性测试，开发者可以创建包容性更强的网络环境，这不仅符合道德要求，在许多地区也是法律强制标准。建议将可访问性测试纳入常规开发流程，而非事后补救。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML可访问性]]