demo · v140

Figure Numbering

Academic typesetting in a single rule. ::before generates "Fig. 3." in print AND "Figure number 3." in the accessibility tree. Add or remove a figure to see both sides renumber.

data plot
Quarterly revenue, 2024
screenshot
Onboarding step 2
diagram
System architecture
figure { counter-increment: fig; }
figcaption::before {
  content: "Fig. " counter(fig) ". "
         /  "Figure number " counter(fig) ". ";
}

why the slash matters

Pre-140, the only way to get a screen reader to announce "Figure number 3" was to mirror the counter into aria-label with JS — a layer the CSSWG had been trying to avoid for years. With counter() in alt text, the accessibility tree node is built from the same counter the visual side reads, kept in sync by the same renumber. No JS required.

see also