html - 如果它已经作为大(漫画)图像的一部分存在，如何处理重复的文本 h1？

Question

假设您有一个显示大漫画图像的页面。对于人类用户，漫画图像已经包含要放入 h1(漫画标题)的文本。在用户体验方面，显示此内容是不必要的且具有破坏性。
(切出一块图像以在 h1 中使用 alt 文本显示它是不可能的，因为为了重新分发，图像应该作为单个实体存在。)
在不影响用户体验的情况下，让搜索引擎知道 h1 的内容的语义正确的方法是什么？

选项 1(包括但不显示 h1):

<article id="todays-comic">
    <h1 style="display: none;">Sandwich</h1>
    <figure>
        <img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
    </figure>
</article>

问题:

很长一段时间以来，SEO 一直被认为是非常糟糕的做法，

没有办法让引擎知道我们的好意。

选项 2(在图像下隐藏 h1):

<article id="todays-comic" style="position: relative;">
    <h1 style="position: absolute; top: 0; z-index: 1;">Sandwich</h1>
    <figure>
        <img style="position: absolute; top: 0; z-index: 2;" src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
    </figure>
</article>

问题:

引擎可以很聪明地看到 h1 是隐藏的，

并认为这是一种比“显示:无；”更恶意的欺骗方式，

并且没有办法让引擎知道我们的好意。

选项 3(将 h1 放在别处并设置样式):

<article id="todays-comic">
    <figure>
        <img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
    </figure>
    <h1 class="small-and-inconspicuous">Sandwich</h1>
</article>

问题:

仍可能被引擎视为误导，

尴尬的流程(除非采用传统结构但随后使用 flex 订单重新定位，这仍然可能被认为具有误导性)，

仍然需要显示不必要的信息。

选项 4(不包括 h1，将其添加到替代文本):

<article id="todays-comic">
    <figure>
        <img style="position: absolute; top: 0; z-index: 2;" src="sandwich-comic.jpg" alt="Sandwich. Comic about making a sandwich.">
    </figure>
</article>

问题:

对 SEO 不利且缺乏语义:引擎不再理解该部分的 h1 应该是什么。

鉴于这种情况，隐藏重复的 h1 内容的最佳方法是什么？有没有更好的替代方案？

Answer 1

第二种选择的变体。
正确标记 <h1> 对语义和可访问性(以及因此 SEO)很重要。内容(如果存在)。 <h1>可以为视力正常的用户隐藏，但使用 display: none将使其对辅助技术不可见，许多搜索引擎将忽略它。隐藏它的更好方法是采用类似于 Bootstrap's .sr-only class 的方法。 ，它可以在视觉上隐藏元素，而不会将它们从辅助技术中隐藏起来。

<article id="todays-comic">
  <h1 class="sr-only">Sandwich</h1>
  <img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
</article>

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

如果没有更多上下文，很难知道 <figure>元素很有帮助。此外，您应该考虑使用 aria-describedby 在图片上提供更详细的漫画描述，让使用辅助技术的人有更公平的体验。