v138 · css

CSS counter() and counters() in alt text of 'content' property

counter() and counters() in alt text of 'content' property is useful to provide more meaningful information to e.g. pseudo-elements to improve their accessibility.

concepts

  1. counter() in alt

    counter() now works inside the alt-text segment of content:. Screen readers announce a meaningful number.

  2. Nested outline (counters)

    The motivating case from the spec: a multi-level table of contents. The visual marker shows “1.2.3”, the screen reader hears “Subsection 1.2.3” via counters() in the alt-text half.

  3. Scroll-marker carousel

    The motivating use case as a working carousel — each ::scroll-marker shows a chapter digit visually while the alt slot carries "Chapter 3, Cache Sharing" for assistive tech. Paired with a nested counters() outline.

  4. Figure caption generator

    Live gallery where counter() drives both the visible "Fig. N" label and the accessible alt-text "Figure N of M" for screen readers. Add and remove images — both the visual sequence and the spoken count update automatically without JavaScript.

  5. Progress Steps

    A horizontal step tracker and a vertical job pipeline where the step circle's visual number and its accessible name are both derived from counter(). Clicking "Step 3 active" updates states — the screen reader announcement changes from "not yet started" to "current step" to "done" using the alt-text half of the content property. Zero hard-coded ARIA labels.

why it shipped

counter() and counters() in alt text of 'content' property is useful to provide more meaningful information to e.g. pseudo elements to improve their accessibility. For example, in generated table of content author can name ::scroll-marker - 'Chapter 1.2', instead of auto-generated e.g. 'Tab 8'.

references