Design 01: WCAG Fail (Alternative Text is >120 Characters)

Cartoon Strip

[Assistant] The Director wants your plan for the information architecture.
[Our Designer] Says nothing.
[Assistant] I'll tell him you are at lunch.

Note

Following W3C's Alternative Text Decision Tree, as the image text and content description may exceede 120 characters then this exceedes the capacity of a usable alternative text attribute.

The <figure> element and it's native <figcaption> child element group the image and it's content description semantically.

A caution is that WCAG directs that when a figure is removed from a document, the document's meaning is not degraded. Clearly that conflicts with the intention of this image type and its accessible content. There are alternatives including DIV and SPAN soup, or the <section> and, or <article> landmarks. In this use case, the semantic connection between the <figure> and its <figcaption> is strong and reliable when conveyed in a browser when CSS and, or JS are not available. It is the strategy of choice.

Video

HTML

<figure>
  <img src="../img/dieux-by-pat-godfrey-deadline.png" alt="Cartoon Strip" >
  <figcaption>
    <p>[Assistant] The Director wants your plan for the information architecture. <br>
    [Our Designer] Says nothing. <br>
    [Assistant] I'll tell him you are at lunch.</p>
  </figcaption>
</figure>