← Back to release summary

Multi-argument alt text in CSS Generated Content

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 127)
Intent stage
None

Summary

The CSS content property allows developers to specify alternative text for accessibility with the following syntax: .has-before-content::before { content: url("cat.jpg") / "A cute cat"; } This functionality, where the alt text is given by a single string, is already supported in Chromium (https://chromestatus.com/feature/4550056227110912). However, the spec allows the alt text to be given by an arbitrary number of elements, which in addition to strings can be attr() functions or counters. For example: .has-before-content::before { content: url("cat.jpg") / "A cute " attr(data-animal); } This feature tracks the expansion of the Chromium implementation to support an arbitrary number of arguments as well as attr() functions in addition to strings. Note that this feature entry does *not* include the addition of counter support.

Motivation

This will allow developers more flexibility in how they specify alt text for generated content, making it easier to build accessible web pages. Additionally, this functionality is tested as part of the Interop2024 Accessibility focus area. Specifically, https://wpt.fyi/results/accname/name/comp_name_from_content.html?label=master&label=experimental&aligned&view=interop&q=label%3Ainterop-2024-accessibility sub-tests "(button|heading|link) name from fallback content mixing attr() and strings with ::before and ::after"

Standards & signals

View on chromestatus.com