Editorial review: Add information and example for counters in generated content alt text

[chrisdavidmills]

Description

Chrome 140 adds support for counter() and counters() functions in content property alt text. See https://chromestatus.com/feature/5185442420621312. Note that the initial implementation was buggy; it is fixed now, but this functionality only really works in Canary at the moment. See the associated BCD for further details: mdn/browser-compat-data#28763.

This PR adds a bit more information and an example to the content property page, showing how to use counters in content alt text.

I also took this opportunity to mention the fact that you can also use attr() functions in content alt text. I tested it, and it seems to work, but I didn't want to go much deeper on that, as it is not the central purpose of this PR.

Motivation

Additional details

Related issues and pull requests

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/Reference/Properties/content

Flaws (176)

URL: /en-US/docs/Web/CSS/Reference/Properties/content
Title: content
Flaw count: 176

• broken_links:
  • Link /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#single_bar is a redirect
  • Link /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#single_bar is a redirect
  • Link /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#brackets is a redirect
  • Link /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#single_bar is a redirect
  • Link /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#brackets is a redirect
  • and 163 more flaws omitted
• macros:
  • Macro cssxref produces link /en-US/docs/Web/CSS/counter-reset which is a redirect
  • Macro cssxref produces link /en-US/docs/Web/CSS/counter-increment which is a redirect
  • Macro cssxref produces link /en-US/docs/Web/CSS/list-style-type which is a redirect
  • Macro cssxref produces link /en-US/docs/Web/CSS/list-style-type which is a redirect
  • Macro cssinfo produces link /en-US/docs/Web/CSS/CSS_cascade/Value_processing which is a redirect
  • and 3 more flaws omitted

(comment last updated: 2026-01-08 12:16:02)

[danielsakhapov]

LGTM! Thanks for adding this!

[estelle]

Many screen reader aren't blind. The screen reader should be reading content that is on the page. Empty strings don't need descriptive text, but you would need alt text if the counter were using symbols, such as multiple stars, or a deck of cards, or binary. So we can either use an image that reads "chapter" then provide "chapter" as the alt, or we can use a symbolic counter that needs alt text. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@counter-style#examples .

I created a counter with a deck of cards once. I've been looking for it to share with you, but haven't found it yet. So submitting, and will ping you if i locate it.

[estelle]

the alt should be alt to actual content, not an empty string. The screenreader user may be sited, so should be hearing what sighted users see. I suggest getting rid of the marker (list-style: none;) then doing something like:

a::before {
  content: url(chapter.png) counter(chapter) / "Chapter " counter(chapter);
}

so the alt is the alt for an image.
if you don't want to create an image, you can use characters like in https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@counter-style#examples or star rating like symbols https://codepen.io/estelle/pen/YzddjJb

[chrisdavidmills]

Really good points here. I've figured out an update to the example that uses a book emoji to represent "Chapter". I'll make the updates and push them so you can have a look.

[estelle]

Just one edit, but looks good and I don't need to re-review.

Edit: let's only merge this when the fix gets merged.