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[编辑 | 编辑源代码]

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

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

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

ARIA属性[编辑 | 编辑源代码]

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

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

键盘导航[编辑 | 编辑源代码]

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

实际案例[编辑 | 编辑源代码]

表单可访问性[编辑 | 编辑源代码]

一个符合标准的表单应包含：

<label>关联输入字段
错误提示的aria-live区域

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

图像可访问性[编辑 | 编辑源代码]

对比正确与错误的图片标记：

错误示例	正确示例
`<img src="chart.png">`	`<img src="chart.png" alt="2023年销售趋势：Q1增长15%，Q2下降3%">`

数学公式可访问性[编辑 | 编辑源代码]

使用解析失败 (语法错误): {\displaystyle </code>标签确保公式可被屏幕阅读器解析： <math> E = mc^2 }

测试工具[编辑 | 编辑源代码]

常用可访问性测试方法：

键盘导航测试
WAVE浏览器扩展
axe DevTools

进阶技巧[编辑 | 编辑源代码]

针对高级开发者的优化：

使用role="presentation"消除冗余语义
动态内容的aria-live策略
高对比度模式下的CSS媒体查询：

@media (prefers-contrast: more) {
  button { border: 2px solid; }
}

参见[编辑 | 编辑源代码]

WCAG 2.1
ARIA
语义化HTML