如何解决包含漫画抄本的语义正确方法是什么?
假设您有一个显示漫画图像的页面。您已经在文本中获得了漫画的全文内容(其成绩单)。将它包含在 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。