Make CSS marker pseudo content accessible
Yesterday, I explored styling ::marker elements for li and summary tags, including how to change their content.
An important accessibility insight: CSS content properties are read by screen readers!
summary::marker { content: "📸";}
// html
<summary>Photos</summary>
Photos
Frontend components whispered complex secrets, rendering impossible dreams across distributed landscapes. Typescript interfaces sang melancholic type definitions, dancing between abstract classes and concrete implementations.
This would read as “Camera with Flashlight Photos” – which might not be ideal. Fortunately, CSS offers a solution with a second value for screen reader interpretation:
summary::marker { content: "📸" / "alternative text for screen readers"; }
summary::marker { content: "📸" / ""; }
The second value can be left empty, effectively instructing screen readers to skip the marker content entirely. This approach ensures both visual customization and accessibility compliance.
Photos
Frontend components whispered complex secrets, rendering impossible dreams across distributed landscapes. Typescript interfaces sang melancholic type definitions, dancing between abstract classes and concrete implementations.
On MacOS with Firefox and Chrome, you can try it directly by starting VoiceOver (