Figure and Caption

The image entered the document, but context is missing: which measurement point it shows, when it got taken, which text it belongs to — none of that has been declared. Alternative text does not carry this information — that is for the reader who cannot see the image; context is for everyone.

The figure element establishes this distinction: it binds its content and its caption together as a single unit.

The Figure Element

figure is a content unit that can get detached from the main flow but gets referenced in the flow. The test is this: if this content got moved from the middle of the text to the page’s margin, an appendix, or the next page, would the text keep reading?

If it keeps reading, it is a figure. Content that breaks the text’s flow and cannot get moved from its place is not a figure.

figcaption is the figure’s caption, written as the figure element’s first or last child. A figure has at most one caption.

<figure>
  <img src="location.png" width="1440" height="960"
       alt="The station sits in the middle section of the north-facing
            slope, 400 meters above the valley floor.">
  <figcaption>Figure 1. The station's location on the slope and its
    height relative to the valley floor.</figcaption>
</figure>

The Caption/Alternative-Text Distinction

Two texts attach to the same image and do different jobs.

alt stands in for the image. It gives the reader who cannot see the image the information a sighted reader gets from it. It does not get presented to a sighted reader.

figcaption is the information surrounding the image: its name, its number, its source, its date, a comment. It gets presented to every reader.

Having both carry the same text is a defect: a screen reader user hears the same sentence twice. Instead, information the caption already contains gets left out of the alternative text.

If the caption gives the image’s information in full — a caption that writes out a chart’s values, say — the alternative text can get left empty. This is a non-decorative use of alt="": the image’s information already exists in the document as text.

The Accessible-Name Calculation

The previous lesson noted that elements get met in the accessibility tree with a role, a name, and a state. Which source the name comes from is set by an ordered rule, and figcaption is one link in it.

// name.mjs — order of the accessible-name calculation
const LOCAL_SOURCE = {
  img: "alt",
  figure: "figcaption",
  table: "caption",
  fieldset: "legend",
};

function accessibleName(el, doc) {
  if (el["aria-labelledby"]) {
    const parts = el["aria-labelledby"]
      .split(/\s+/)
      .map((id) => doc[id] ?? "")
      .filter(Boolean);
    if (parts.length > 0) return ["aria-labelledby", parts.join(" ")];
  }
  if (el["aria-label"]) return ["aria-label", el["aria-label"]];
  const field = LOCAL_SOURCE[el.tag];
  if (field && el[field] !== undefined && el[field] !== "") return [field, el[field]];
  if (el.title) return ["title", el.title];
  return ["none", ""];
}

const doc = { "measurement-heading": "North Slope", "measurement-date": "March 12" };

const elements = [
  { tag: "img", alt: "Measurement pole on the slope" },
  { tag: "img", alt: "" },
  { tag: "img", title: "Pole" },
  { tag: "figure", figcaption: "Figure 1: The pole's location" },
  { tag: "figure", figcaption: "Figure 1: The pole's location", "aria-label": "Pole location" },
  { tag: "figure", "aria-labelledby": "measurement-heading measurement-date", figcaption: "Figure 1" },
  { tag: "table", caption: "Daily measurements" },
];

for (const el of elements) {
  const [source, name] = accessibleName(el, doc);
  console.log(el.tag.padEnd(8), source.padEnd(16), JSON.stringify(name));
}

img      alt              "Measurement pole on the slope"
img      none             ""
img      title            "Pole"
figure   figcaption       "Figure 1: The pole's location"
figure   aria-label       "Pole location"
figure   aria-labelledby  "North Slope March 12"
table    caption          "Daily measurements"

The order has four steps, and the source above overrides the one below: aria-labelledby, then aria-label, then the element’s local source, and title last.

Three lines deserve attention. The second shows an empty alt erasing the name, the mechanism behind an unannounced image. The third shows title as a last resort: without alt, title becomes the name — a fallback, not a fix. The fifth and sixth show aria-label and aria-labelledby overriding the visible caption — name and visible text pull apart, best avoided without a reason for the split.

The table row shows that the caption element from the previous topic is part of the same mechanism: different elements have different local sources, but the calculation order is shared.

A Figure Is Not Just for Images

The figure element does not restrict the content’s type. A code listing, a table, a quotation, an audio recording can also be a figure; the test is still detachment from the flow.

<figure>
  <figcaption>Figure 2. The raw data file's first lines.</figcaption>
  <pre><code>time,temperature,humidity
07:00,-4.2,72
07:10,-4.1,71</code></pre>
</figure>

A table already has its caption element; wrapping the table in figure makes sense when it needs a detachable-from-flow declaration too. When both get used together, neither caption should repeat the other.

Long Description

A complex chart’s or map’s information does not fit into an alternative text. In such cases alt briefly states what the image is, and the detailed counterpart exists in the document as text, tied to the figure.

<figure>
  <img src="weekly.png" width="1200" height="700"
       alt="Weekly temperature chart; values in the table below.">
  <figcaption>Figure 3. Weekly temperature trend.</figcaption>
  <details>
    <summary>The chart's numeric counterpart</summary>
    <table>
      <caption>Daily lowest and highest temperatures</caption>
      <tr><th scope="col">Day</th><th scope="col">Lowest</th></tr>
      <tr><th scope="row">Monday</th><td>-4</td></tr>
    </table>
  </details>
</figure>

The details element sets up a disclosure section that starts closed; the summary element is its visible label. Opening and closing are built into the element, needing no script. Here it keeps the detailed counterpart in the document without occupying the flow.

This approach’s advantage over a longer alternative text is that the counterpart is open to everyone: a sighted reader who wants the numeric values gets the same table too.

Figure Numbers

The “Figure 1,” “Figure 2” numbers written in the caption are the document’s text; they do not come from the element. Their value is that the text can refer to the figure from a distance: the sentence “In the file format shown in Figure 2…” keeps its meaning even if the figure moves elsewhere on the page.

When the numbers get written by hand, inserting a figure in between shifts all of them. The presentation layer can also generate these numbers on its own; then the number does not exist in the document and cannot get referenced from the text. The choice depends on whether the text needs to reference it.

In the Station Document

<section aria-labelledby="location">
  <h2 id="location">Location and Installation</h2>
  <p>The station sits in the middle section of the north-facing
     slope. Because this side of the slope gets no direct light
     throughout the day, deviation in the temperature measurement is
     low.</p>

  <figure>
    <img src="location-960.png"
         srcset="location-480.png 480w, location-960.png 960w, location-1440.png 1440w"
         sizes="(max-width: 600px) 100vw, 640px"
         width="1440" height="960"
         alt="Slope cross-section: the station is marked 400 meters
              above the valley floor and 260 meters below the summit.">
    <figcaption>Figure 1. The station's location on the slope.</figcaption>
  </figure>
</section>

The alternative text gives the numeric information the cross-section carries; the caption names and numbers the figure, with no repetition between them.

Summary

• figure is a content unit detachable from the main flow but referenced in it; the test is whether the text keeps reading once moved.
• alt stands in for the image and gets presented only to the reader who cannot see it; figcaption surrounds the image, presented to everyone.
• Having both carry the same text is repetition; the information the caption gives gets left out of the alternative text.
• The accessible-name calculation is ordered: aria-labelledby, aria-label, the element’s local source, title. The one above overrides the one below.
• A figure does not restrict the content’s type; code listings, tables, and quotations can also be figures.

Next Step

Visual content is in place. Content that flows through time — audio and video — brings separate problems: who holds the controls, how speech gets a text counterpart, and why unwanted autoplaying sound gets restricted. The next lesson takes up these elements and their source-selection rules.