编辑“︁HTML可访问性标准”︁

= HTML可访问性标准 =

'''HTML可访问性标准'''（HTML Accessibility Standards）是一组旨在确保网页内容对所有用户（包括残障人士）可访问的设计原则和技术规范。这些标准由[[W3C]]的[[Web Accessibility Initiative]]（WAI）制定，并体现在[[Web Content Accessibility Guidelines]]（WCAG）中。通过遵循这些标准，开发者可以创建更具包容性的网页，使屏幕阅读器、键盘导航和其他辅助技术能够正确解析和呈现内容。

== 核心原则 ==
WCAG 2.1定义了可访问性的四大核心原则（缩写为'''POUR'''）：
* '''可感知性'''（Perceivable）：内容必须能以多种方式呈现（如文本替代、音频描述）。
* '''可操作性'''（Operable）：用户必须能通过键盘、语音或其他输入方式操作界面。
* '''可理解性'''（Understandable）：内容和交互必须清晰易懂。
* '''鲁棒性'''（Robust）：内容必须能与当前和未来的辅助技术兼容。

== 关键HTML可访问性技术 ==

=== 语义化HTML ===
使用语义化标签（如<code><header></code>、<code><nav></code>、<code><main></code>）能帮助辅助技术理解页面结构。

<syntaxhighlight lang="html">
<!-- 非语义化示例 -->
<div class="header">网站标题</div>

<!-- 语义化示例 -->
<header>
  <h1>网站标题</h1>
</header>
</syntaxhighlight>

=== ARIA属性 ===
[[ARIA]]（Accessible Rich Internet Applications）属性为动态内容提供额外语义信息：

<syntaxhighlight lang="html">
<button aria-expanded="false" aria-controls="dropdown-menu">
  菜单
</button>
<ul id="dropdown-menu" hidden>
  <li>选项1</li>
  <li>选项2</li>
</ul>
</syntaxhighlight>

=== 键盘导航 ===
确保所有交互元素可通过键盘访问：

<mermaid>
flowchart TD
  A[用户按下Tab键] --> B{是交互元素吗?}
  B -->|是| C[显示焦点样式]
  B -->|否| D[跳过该元素]
</mermaid>

== 实际案例 ==

=== 表单可访问性 ===
一个符合标准的表单应包含：
* <code><label></code>关联输入字段
* 错误提示的<code>aria-live</code>区域

<syntaxhighlight lang="html">
<label for="email">电子邮箱：</label>
<input type="email" id="email" aria-describedby="email-help">
<div id="email-help" aria-live="polite">请输入有效的邮箱地址</div>
</syntaxhighlight>

=== 图像可访问性 ===
对比正确与错误的图片标记：

{| class="wikitable"
! 错误示例 !! 正确示例
|-
| <code><img src="chart.png"></code> || <code><img src="chart.png" alt="2023年销售趋势：Q1增长15%，Q2下降3%"></code>
|}

== 数学公式可访问性 ==
使用<code><math></code>标签确保公式可被屏幕阅读器解析：

<math>
E = mc^2
</math>

== 测试工具 ==
常用可访问性测试方法：
* 键盘导航测试
* [[WAVE]]浏览器扩展
* [[axe DevTools]]

== 进阶技巧 ==
针对高级开发者的优化：
* 使用<code>role="presentation"</code>消除冗余语义
* 动态内容的<code>aria-live</code>策略
* 高对比度模式下的CSS媒体查询：

<syntaxhighlight lang="css">
@media (prefers-contrast: more) {
  button { border: 2px solid; }
}
</syntaxhighlight>

== 参见 ==
* [[WCAG 2.1]]
* [[ARIA]]
* [[语义化HTML]]

[[Category:HTML]]
[[Category:网页可访问性]]
[[Category:Web开发标准]]

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