1

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?

1 Answer 1

1

A caption and a transcript are two semantically different things. <figcaption> should be used for captions, which are brief explanations of the figure. As such, it seems inappropriate to use it for the transcript.

Option 4 seems the closest. The transcript can be tied to the comic image using the aria-describedby attribute.

The author's message may be best as an <aside>, since it's complementary content indirectly related to the article.

Also, consider adding markup to the transcript itself, including character names.

Something like:

<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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.