如何将元素定义为普通文本而非标题？解决无障碍检测误判

我给网站H1标题做了逐字动画效果，通过脚本把文字和空格拆成独立<span>元素来实现样式和动画，但无障碍检测工具把每个单词都识别成了单独的标题，导致评分暴跌。加了role="presentation"属性也没用，求可行的适配方案。

原始代码：

HTML #

<h1>
    <span class="word-wrap" role="presentation"><span class="word" role="presentation" data-delay="0" style="--word-index: 0; --line-index: 0;">Heading</span></span>
    <span class="whitespace" role="presentation"> </span>
    <span class="word-wrap" role="presentation"><span class="word" role="presentation" data-delay="0" style="--word-index: 1; --line-index: 0;">Text</span></span>
    <span class="whitespace" role="presentation"> </span>
    <span class="word-wrap" role="presentation"><span class="word" role="presentation" data-delay="0" style="--word-index: 2; --line-index: 0;">Here</span></span>
</h1>

CSS #

.word {
    display: inline-block;
    transform: translate(0, 120%);
    transition: .8s cubic-bezier(0.65, 0, 0.35, 1);
}

可行解决方案 #

方案1：用aria-hidden隐藏动画元素，保留屏幕阅读器专用文本

将拆分的动画元素标记为aria-hidden="true"，同时在H1内添加一个仅对屏幕阅读器可见的完整标题文本，视觉上隐藏但保证无障碍识别。

修改后的HTML：

<h1>
  <!-- 仅屏幕阅读器可见的完整标题 -->
  <span class="sr-only">Heading Text Here</span>
  <!-- 动画元素，隐藏无障碍识别 -->
  <span class="word-wrap" aria-hidden="true"><span class="word" data-delay="0" style="--word-index: 0; --line-index: 0;">Heading</span></span>
  <span class="whitespace" aria-hidden="true"> </span>
  <span class="word-wrap" aria-hidden="true"><span class="word" data-delay="0" style="--word-index: 1; --line-index: 0;">Text</span></span>
  <span class="whitespace" aria-hidden="true"> </span>
  <span class="word-wrap" aria-hidden="true"><span class="word" data-delay="0" style="--word-index: 2; --line-index: 0;">Here</span></span>
</h1>

添加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-width: 0;
}

这样屏幕阅读器会读取完整的标题文本，视觉上仍显示逐字动画，无障碍工具不会将拆分的span识别为多个标题。

方案2：重构动画实现，保留原始完整文本结构

如果可以调整动画实现逻辑，不拆分原始H1文本，改用CSS伪元素、背景遮罩等特性实现逐字动画，从根源避免结构拆分带来的无障碍问题。

简化后的HTML：

<h1 class="animated-heading">Heading Text Here</h1>

通过CSS实现逐字动画（示例思路）：

.animated-heading {
  display: inline-block;
}
.animated-heading span {
  display: inline-block;
  opacity: 0;
  transform: translate(0, 120%);
  transition: .8s cubic-bezier(0.65, 0, 0.35, 1);
}
.animated-heading span:nth-child(1) { transition-delay: 0s; }
.animated-heading span:nth-child(2) { transition-delay: 0.2s; }
.animated-heading span:nth-child(3) { transition-delay: 0.4s; }
/* 页面加载后触发动画 */
.animated-heading.active span {
  opacity: 1;
  transform: translate(0, 0);
}

注：可通过JavaScript给H1添加active类触发动画，核心是保持H1内部文本结构完整，仅对单个字符/单词标签做动画控制。

方案3：给H1添加aria-label指定完整标题

直接在H1元素上设置aria-label属性，明确告知屏幕阅读器标题的完整内容，同时配合aria-hidden隐藏内部拆分的span元素。

修改后的HTML：

<h1 aria-label="Heading Text Here">
  <span class="word-wrap" aria-hidden="true"><span class="word" data-delay="0" style="--word-index: 0; --line-index: 0;">Heading</span></span>
  <span class="whitespace" aria-hidden="true"> </span>
  <span class="word-wrap" aria-hidden="true"><span class="word" data-delay="0" style="--word-index: 1; --line-index: 0;">Text</span></span>
  <span class="whitespace" aria-hidden="true"> </span>
  <span class="word-wrap" aria-hidden="true"><span class="word" data-delay="0" style="--word-index: 2; --line-index: 0;">Here</span></span>
</h1>

aria-label会优先被屏幕阅读器读取，内部的动画元素因aria-hidden不会被识别为独立标题。

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