v138 · css · accessibility
Figure Caption Generator
A live figure gallery where counter() drives both the visible "Fig. N" label and the accessible alt-text segment that screen readers announce as "Figure N of M". Add and remove images — both the visual sequence and the spoken count update automatically without any JavaScript.
Accessibility readout
What sighted users see vs what screen readers hear
Item
Visual label
Screen reader
Add figures above
/* Chrome 138: counter() now works in the alt-text half of content: */
.gallery {
counter-reset: figure;
/* also declare a total counter on same element */
}
.fig-card {
counter-increment: figure;
}
.fig-card figcaption::before {
content:
/* visual part (sighted users) */
"Fig. " counter(figure) " — "
/* alt-text separator / */
/
/* spoken text (screen readers) */
"Figure " counter(figure) " of " counter(total-figures) ": ";
}
The problem this solves: Before Chrome 138,
counter() worked in
the visual half of content: but not in the alt-text segment after the
/. That meant automatically-numbered captions couldn't tell screen readers which
figure number they were on — you had to maintain separate aria-label attributes
or accept inaccessible generated content. Now both halves can reference the same counter, so
the visual number and the spoken number always agree.