v140 · 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() and counters() now work inside the alt-text segment of content:. Screen readers announce a meaningful number instead of the generated string.

  2. Scroll Marker Labels

    The motivating ::scroll-marker use case. Toggle between "Tab 8" and "Chapter 8" in the simulated a11y tree to see what alt text buys for screen reader users.

  3. Nested TOC

    Multi-level numbering — 1, 1.1, 1.1.1 — using counters() in both the visual and alt sides. Print reads "1.2.3", screen reader hears "Subsection one dot two dot three".

  4. Figure Numbering

    Academic figure captions: "Fig. 3." on screen, "Figure number 3." in the a11y tree. Add and remove figures, watch both sides renumber together.

  5. List-Style Words

    Visual ordinals (1st, 2nd) paired with spelled-out alt text (first, second) so TTS engines pronounce procedural lists naturally.

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