Suppose you have a page that displays a comic image. You already have the full textual contents of the comic (its transcript) in text. What would be the semantically correct way to include it in an HTML5 page so that:
- search engines know of the textual contents of the image,
- users can find specific text (e.g. memorable punchline) within the images through search,
- users can optionally click to read the transcript if they have trouble reading it from the image?
Option 1 (figcaption approach):
<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>
Problems:
- figcaption is supposed to be describing content, not transcribing;
- transcript is too close to image UX-wise, this content ideally has to be accessible but not immediately in the way of other information.
Option 2 (enclose everything in figure):
<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>
Problems:
- figcaption is supposed to be describing content, not transcribing;
- content not relevant to image ("Also, my cat was especially cute today.") is semantically connected to it.
Option 3 (alt text approach):
<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>
Problems:
- alt text should be describing content, not transcribing;
- with very long transcripts, alt text will look like spam;
- transcript not available to user on demand (unless it is duplicated as HTML or via a script).
Option 4 (details approach):
<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>
Problems:
- transcript is not semantically connected to the image.
What would be the best approach to this given the original goals?