为特殊结构设置aria-label后，Nu HTML Checker提示误用如何修复？

你的用法并非完全错误，但不符合无障碍设计的最佳实践，这也是Nu HTML Checker触发警告的原因。

为什么会触发警告？ #

h3是原生语义化标题元素，检查器期望这类元素包含可访问的真实文本内容，而非仅依赖aria-label来提供语义。虽然你把所有可视内容都标记了aria-hidden="true"，但检查器仍会认为标题元素依赖aria-label属于非标准用法。

修复方案（推荐） #

用视觉隐藏的真实文本替代aria-label，这是更可靠的无障碍实现方式，同时能消除检查器警告：

1. 首先添加视觉隐藏的CSS类（用于隐藏文本但不影响屏幕阅读器识别）：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

2. 修改HTML结构，移除h3的aria-label，并在h3内部添加视觉隐藏的文本：

<h3>
    <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>

为什么这个方案更好？ #

• 视觉隐藏文本比aria-label的兼容性更强，部分老旧屏幕阅读器对标题元素的aria-label支持不佳；
• 符合HTML语义化核心原则：语义元素应包含对应的真实文本内容，而非仅通过属性提供；
• 彻底消除检查器的警告，同时保留你需要的视觉特效。

内容的提问来源于stack exchange，提问作者Reginna