1. 语义化标签的重要性
1.1 何谓语义化标签
在网页开发中，语义化标签指的是使用经过定义的 HTML 元素来表达页面结构与含义，而非仅靠样式来实现布局。通过这样的标记，浏览器、搜索引擎和辅助技术都能更好地理解页面的层级与关系，从而提升可访问性与可维护性。
正确的语义层级还能帮助用户快速定位关键信息，减少无障碍用户的认知成本，进而提升整体用户体验。在实际编码时，应优先采用已有的语义标签来呈现内容结构，而非滥用 div、span 等无语义的容器。
1.2 常见的语义元素及用途
header 通常用于站点顶端区域，包含网站标识与全局导航；nav 专门承载导航链接的集合，便于屏幕阅读器跳转；main 标识页面的主要内容区域，帮助用户聚焦核心信息。
section 将相关内容分组，article 表示独立可分发的内容单元，aside 提供与主内容相关的附加信息，footer 给出页脚信息与版权声明。通过合理组合这些元素，可以构建可预测且易于导航的文档流。
1.3 代码示例：基本页面结构
示例代码 展现了常见的 HTML5 语义结构，便于团队快速落地实现可访问的框架。
以下代码演示了一个典型的页面骨架：使用 header、nav、main、section、article、aside 与 footer 的组合，以提供清晰的结构信息。
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="utf-8"><title>示例：语义化标签</title>
</head>
<body><header><h1>站点标题</h1><nav aria-label="主导航"><ul><li><a href="#">首页</a></li>...</ul></nav></header><main><section><h2>新闻</h2><article><h3>标题</h3><p>摘要内容</p></article></section><aside><p>相关信息、广告等</p></aside></main><footer>© 2024 示例站点</footer>
</body>
</html>
2. Alt文本、图片无障碍
2.1 Alt文本的原则
图片的替代文本应准确描述图片传达的关键信息，以便无法加载图片或使用屏幕阅读器的用户理解内容。对于装饰性图片，可以使用 空 alt="" 来提示屏幕阅读器跳过，从而减少噪声。
描述要点包括图片的目的、与文本内容的关系，以及如果图片承载重要信息时的要点摘要。这样可以确保信息传递的一致性。
2.2 装饰性图片的处理
对纯装饰性图片，避免重复性文字信息，在 alt 属性中设置空值，可以让辅助技术直接跳过该图片，以提高导航效率。
当图片与周围文本形成对照或补充信息时，应确保 alt 文本与图像说明相一致，避免产生信息缺失或混乱。
2.3 复杂信息的替代文本策略
对于包含图表、流程图等复杂信息的图片，单纯的简短文本往往不足以传达全部要点。这时可以结合 figcaption 与 aria-describedby，提供额外的文本描述，确保要点清晰传达。
下面的示例展示了一个带图片及文字说明的组合，用于传达图表的关键信息和图注说明：
<figure><img src="chart.png" alt="月度销售额折线图，横坐标为月份，纵坐标为销售额"><figcaption>图1：月度销售额折线图，显示1月至12月的销售趋势。</figcaption>
</figure>
3. 键盘导航与可访问性
3.1 可访问的焦点管理
确保可聚焦的元素拥有清晰的焦点样式，默认轮廓应可见，并在自定义控件中保持一致的焦点行为，帮助使用键盘导航的用户定位当前焦点位置。
跳转顺序的合理性是提升无障碍体验的关键，页面应遵循自然的阅读顺序，避免通过 display:none 隐藏的元素仍然可聚焦。
3.2 自定义控件的键盘交互
自定义组件（如下拉菜单、轮播、模态框等）必须实现键盘交互，确保 Enter、Space、Arrow 键等事件能够触发相应操作，且屏幕阅读器能正确宣布状态变化。
通过为可交互元素添加清晰的 aria-label 或 aria-expanded、aria-controls 等属性，可以提升无障碍体验，并避免用户困惑。
3.3 跳转与可见焦点样式
为可跳转的链接和控件提供明显的焦点样式，避免颜色仅凭视觉区分，应结合边框、背景对比和文本描述进行区分，确保弱视用户也能识别。
还可以利用 CSS 提供 跳转提示信息，如跳转前的简短文本、跳转后自动聚焦到目标位置，以提升导航效率。
:focus-visible {outline: 3px solid #005fcc;outline-offset: 2px;border-radius: 4px;
}
4. ARIA属性的正确使用
4.1 原则与误区
ARIA（Accessible Rich Internet Applications）属性是增强无障碍的强大工具，但并非所有场景都需要使用。优先使用原生 HTML 元素的语义，再在确实需要时才引入 ARIA。
过度依赖 ARIA 可能带来复杂性与兼容性问题，因此应遵循“尽量使用原生语义，必要时再添加无障碍增强”的原则。
4.2 aria-label、aria-labelledby、aria-describedby 的正确用法
aria-label 提供屏幕阅读器的即时标签，适用于无法从文本中直接获得名称的控件；aria-labelledby 通过引用现有文本节点来描述控件；aria-describedby 用于提供辅助信息，帮助用户理解控件所处的上下文。
在同一控件上组合使用时，应确保描述信息的一致性，避免信息重复或矛盾，从而提升可访问性质量。
4.3 Live regions 与语言属性
动态内容更新时，aria-live 可以告知屏幕读屏工具发生了变化，从而及时朗读新的信息；同时，页面应明确的 lang 属性，帮助屏幕阅读器以正确的语言规则朗读文本。
通过使用 role、aria-atomic 等属性，可以对变化区域的可访问性体验进行细粒度控制。
<div aria-live="polite" aria-atomic="true">更新的内容将被屏幕阅读器朗读
</div>
5. 色彩对比度与色彩对比优化
5.1 WCAG 对比度要求
为文本与背景提供足够的对比度，是可访问性评估中的关键指标。建议文本对比度至少达到 4.5:1，大文本可放宽到 3:1，以确保在不同设备与光线条件下的可读性。
视觉障碍用户需要稳定、清晰的对比度，因此颜色选择应兼顾色彩敏感人群，避免单一色彩的传达信息。
5.2 提升对比度的 CSS 技巧
通过修改背景与文本颜色、使用高对比度的按钮、以及在需要时提供明确的字体加粗与边框，可以提升可读性。不要仅靠颜色来传达状态信息，应辅以文本或图标标签。
在设计时可以利用变量和条件样式实现对比度自适应，例如根据主题切换不同的颜色组合，以保持一致的可读性。
:root {--bg: #ffffff;--fg: #111111;
}
@media (prefers-contrast: more) {:root { --bg: #000000; --fg: #ffffff; }
}
5.3 用户偏好与可访问性
尊重用户的偏好设置，如强对比模式或夜间模式，能显著提升无障碍体验。通过 CSS 的 prefers-contrast 与 prefers-color-scheme，可以在用户偏好改变时动态调整页面风格。
同时，确保键盘可视的焦点与可见性在各种对比度模式下均保持稳定，避免因模式切换导致信息丢失。
@media (prefers-color-scheme: dark) {body { background: #111; color: #eee; }
}
