包含漫画抄本的语义正确方法是什么？

问题描述

假设您有一个显示漫画图像的页面。您已经在文本中获得了漫画的全文内容（其成绩单）。将它包含在 HTML5 页面中的语义正确的方法是什么：

• 搜索引擎知道图像的文本内容，
• 用户可以通过搜索在图片中找到特定的文字（例如令人难忘的妙语），
• 如果用户无法从图像中读取文字内容，可以选择点击阅读文字内容？

---

选项 1（figcaption 方法）：

<article id="todays-comic">
    <h1>Sandwich</h1>
    <figure>
        <img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
        <figcaption class="toggleable hidden-by-default">- Make me a sandwich. - What? Make it yourself. - Sudo make me a sandwich. - Okay.</figcaption>
    </figure>
    <section id="message-from-author">
        <p>This is my best creation. I hope you like it.</p>
        <p>Also,my cat was especially cute today.</p>
    </section>
</article>

问题：

• figcaption 应该是描述内容，而不是转录；
• 在用户体验方面，脚本太接近图像，理想情况下，此内容必须可访问，但不能立即以其他信息的方式访问。

选项 2（包括图中的所有内容）：

<article id="todays-comic">
    <h1>Sandwich</h1>
    <figure>
        <img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
        <p>This is my best creation. I hope you like it.</p>
        <p>Also,my cat was especially cute today.</p>
        <figcaption class="toggleable hidden-by-default">- Make me a sandwich. - What? Make it yourself. - Sudo make me a sandwich. - Okay.</figcaption>
    </figure>
</article>

问题：

• figcaption 应该是描述内容，而不是转录；
• 与图像无关的内容（“另外，我的猫今天特别可爱。”）在语义上与之相关。

选项 3（替代文本方法）：

<article id="todays-comic">
    <h1>Sandwich</h1>
    <figure>
        <img src="sandwich-comic.jpg" alt="- Make me a sandwich. - What? Make it yourself. - Sudo make me a sandwich. - Okay.">
    </figure>
    <section id="message-from-author">
        <p>This is my best creation. I hope you like it.</p>
        <p>Also,my cat was especially cute today.</p>
    </section>
</article>

问题：

• 替代文字应该描述内容，而不是转录；
• 如果成绩单很长，替代文字会看起来像垃圾邮件；
• 用户无法按需提供脚本（除非它复制为 HTML 或通过脚本复制）。

选项 4（细节方法）：

<article id="todays-comic">
    <h1>Sandwich</h1>
    <figure>
        <img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
    </figure>
    <section id="message-from-author">
        <p>This is my best creation. I hope you like it.</p>
        <p>Also,my cat was especially cute today.</p>
    </section>
    <details id="transcript" class="toggleable hidden-by-default">
        <summary>Transcript</summary>
        - Make me a sandwich. - What? Make it yourself. - Sudo make me a sandwich. - Okay.
    </details>
</article>

问题：

• 成绩单在语义上与图像无关。

---

鉴于最初的目标，最好的方法是什么？

解决方法

标题和抄本是两个语义不同的东西。 <figcaption> 应该用于标题，这是对图形的简要说明。因此，将其用于成绩单似乎不合适。

选项 4 似乎最接近。可以使用 aria-describedby 属性将文字记录与漫画图像相关联。

作者的信息最好作为 <aside>，因为它是与文章间接相关的补充内容。

另外，考虑 adding markup to the transcript 本身，包括字符名称。

类似于：

<article>
  <h1 class="sr-only">Sandwich</h1>
  <figure aria-describedby="transcript">
    <img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
    <figcaption>Today's comic.</figcaption>
  </figure>
  <aside>
    <p>This is my best creation. I hope you like it.</p>
    <p>Also,my cat was especially cute today.</p>
  </aside>
  <details id="transcript">
    <summary>Transcript</summary>
    <p><span>Name1:</span> Make me a sandwich.</p>
    <p><span>Name2:</span> What? Make it yourself.</p>
    <p><span>Name1:</span> Sudo make me a sandwich.</p>
    <p><span>Name2:</span> Okay.</p>
  </details>
</article>