demo · v140

List-Style Words

The visual side can use ordinals (1st, 2nd, 3rd) while the alt text uses spelled-out words a TTS engine pronounces correctly (first, second, third). Two custom counter styles, one rule, one accessibility win.

  1. Open the file menu
  2. Choose "export"
  3. Pick PDF as the format
  4. Click confirm
  5. Save to disk

Click the buttons above; the list and the simulated screen-reader tree both renumber.

@counter-style ord {
  system: cyclic;
  symbols: "1st" "2nd" "3rd" "4th" "5th";
}
@counter-style word {
  system: cyclic;
  symbols: "first" "second" "third" "fourth" "fifth";
}

li::before {
  content: counter(step, ord) " "
        /  "Step " counter(step, word) ". ";
}

screen reader pronunciation

"1st" gets pronounced "one-st" or just "one" by most TTS engines. "first" gets pronounced "first". For ordered procedural instructions — recipes, tutorials, checkout flows — the audio version sounds dramatically more natural when the alt text spells the word out. Pair this with @counter-style and you decouple the print form from the speech form completely.

see also