理解 aria-label 与原生语义
aria-label 属性用于为元素提供一个可访问的名称（accessible name），当元素的可见文本内容不足以或不适合作为其名称时，aria-label 提供了一种替代方案。然而，对于像 h1 到 h6 这样的 html 标题元素，它们本身就具有强大的语义和默认的无障碍性。屏幕阅读器能够自动识别这些元素作为页面结构中的标题，并将其内部的文本内容作为其可访问名称进行播报。
当在 h1-h6 元素上直接使用 aria-label 时，通常会被 Nu HTML Checker 等工具标记为“可能误用 aria-label”。这主要是因为：
- 冗余性： 如果标题元素内部已有明确的文本内容，aria-label 可能会重复提供相同的信息，导致屏幕阅读器用户听到重复的播报。
- 冲突与覆盖： 在某些情况下，aria-label 可能会意外地覆盖或与标题元素的默认可访问名称产生冲突，导致屏幕阅读器无法正确播报预期的标题内容。
- 不必要的复杂性： 原生语义已经足够表达标题的含义，引入 aria-label 反而增加了代码的复杂性，且可能引入潜在的无障碍性问题。
因此，最佳实践是避免在 h1-h6 元素上使用 aria-label，除非有非常特殊且经过深思熟虑的场景，且确信它不会引入无障碍性问题。
处理视觉复杂标题的无障碍性
在现代网页设计中，为了实现独特的视觉效果，标题可能不再是简单的文本字符串，而是由多个视觉元素（如单个字符的动画、SVG 图形等）组合而成。在这种情况下，虽然视觉上呈现了一个标题，但其内部的 DOM 结构可能不包含屏幕阅读器可以直接识别的连续文本。
例如，以下代码展示了一个由多个 <span> 包裹的单个字符以及 SVG 组成的动画标题：
立即学习“前端免费学习笔记（深入）”；
<h3 aria-label="Contact">
<span aria-hidden="true" class="char-wrapper">c
<svg class="char-svg char--c">
<use xlink:href="#char--c"></use>
</svg>
</span>
<span aria-hidden="true" class="char-wrapper">o
<svg class="char-svg char--o">
<use xlink:href="#char--o"></use>
</svg>
</span>
<!-- 更多字符和SVG -->
<span aria-hidden="true" class="char-wrapper">t
<svg class="char-svg char--t">
<use xlink:href="#char--t"></use>
</svg>
</span>
</h3>在这个例子中，虽然 aria-label="Contact" 似乎解决了屏幕阅读器的问题，但它触发了 Nu HTML Checker 的警告，因为它违背了 h3 元素的语义使用原则。同时，每个用于视觉效果的 <span> 都设置了 aria-hidden="true"，这确保了屏幕阅读器会忽略这些装饰性元素。
推荐解决方案：sr-only 模式
为了在保持 h1-h6 元素原生语义的同时，为屏幕阅读器提供正确的文本内容，并兼顾复杂的视觉设计，推荐使用 sr-only（Screen Reader Only）模式。这种方法的核心思想是：在标题元素内部放置一段包含实际文本内容的 <span>，并为其应用 CSS 样式，使其在视觉上隐藏，但对屏幕阅读器保持可见。
以下是修改后的 HTML 结构和相应的 CSS 样式：
HTML 结构：
<h3 class="visually-complex-heading">
<!-- 仅供屏幕阅读器访问的文本内容 -->
<span class="sr-only">Contact</span>
<!-- 视觉上呈现的动画或复杂结构，对屏幕阅读器隐藏 -->
<span aria-hidden="true" class="char-wrapper">c
<svg class="char-svg char--c">
<use xlink:href="#char--c"></use>
</svg>
</span>
<span aria-hidden="true" class="char-wrapper">o
<svg class="char-svg char--o">
<use xlink:href="#char--o"></use>
</svg>
</span>
<span aria-hidden="true" class="char-wrapper">n
<svg class="char-svg char--n">
<use xlink:href="#char--n"></use>
</svg>
</span>
<span aria-hidden="true" class="char-wrapper">t
<svg class="char-svg char--t">
<use xlink:href="#char--t"></use>
</svg>
</span>
<span aria-hidden="true" class="char-wrapper">a
<svg class="char-svg char--a">
<use xlink:href="#char--a"></use>
</svg>
</span>
<span aria-hidden="true" class="char-wrapper">c
<svg class="char-svg char--c">
<use xlink:href="#char--c"></use>
</svg>
</span>
<span aria-hidden="true" class="char-wrapper">t
<svg class="char-svg char--t">
<use xlink:href="#char--t"></use>
</svg>
</span>
</h3>CSS 样式：
/* 隐藏类，使内容仅对屏幕阅读器可见，但视觉上不可见 */
/* "sr" 意为 "screen-reader" */
.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}解释：
- h3 元素： 依然作为语义化的标题存在，但移除了 aria-label。
- .sr-only <span>： 这个 <span> 包含了标题的实际文本内容（例如“Contact”）。通过应用 .sr-only CSS 类，它在视觉上被隐藏起来，不会影响页面的布局和视觉效果。
- aria-hidden="true" <span> 元素： 所有用于实现视觉动画或复杂效果的 <span>（包含单个字符和 SVG）都保留 aria-hidden="true" 属性。这告诉屏幕阅读器完全忽略这些元素，因为它们是装饰性的，不包含语义信息。
- .sr-only CSS： 这组 CSS 属性精心设计，用于将元素从视觉流中移除，使其宽度和高度都极小，溢出隐藏，并且绝对定位，但仍然保持在可访问性树中，从而能够被屏幕阅读器捕获和播报。:not(:focus):not(:active) 伪类确保了当用户通过键盘聚焦或激活该元素时，它会变得可见，这对于可访问的交互元素（例如跳过链接）至关重要。
通过这种方法，h3 元素的可访问名称将由其内部的 .sr-only <span> 提供，屏幕阅读器会正确地播报“Contact”，同时页面的视觉设计得以保留，并且避免了 Nu HTML Checker 的警告。
总结与最佳实践
在构建无障碍性友好的网页时，遵循以下原则至关重要：
- 优先使用原生 HTML 语义： 尽可能利用 HTML 元素自身的语义特性，它们通常已经内置了良好的无障碍性支持。
- 谨慎使用 ARIA 属性： ARIA（Accessible Rich Internet Applications）是 HTML 的补充，用于增强复杂 UI 组件的无障碍性。但应遵循“不使用 ARIA 属性，除非有必要”的原则。滥用 ARIA 可能会适得其反。
- 避免在原生语义元素上冗余使用 aria-label： 对于 h1-h6、button、a 等已经有明确文本内容或内置可访问名称的元素，通常不需要 aria-label。
- 为复杂视觉元素提供无障碍替代： 当视觉设计导致元素内容无法被屏幕阅读器直接理解时，应通过 sr-only 模式或 aria-labelledby 等方式，提供清晰、简洁的替代文本。
- 使用 aria-hidden="true" 隐藏装饰性内容： 任何纯粹用于视觉效果、不包含语义信息的元素都应该使用 aria-hidden="true" 隐藏起来，避免干扰屏幕阅读器用户。
通过采纳这些实践，开发者可以构建出既具有吸引力又对所有用户（包括使用辅助技术的人群）都可访问的网页体验。
