Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

The CSS “content” property accepts alternative text

• Stefan Judis writes about a CSS feature I didn’t know about. You should subscribe to Stefan’s newsletter too!
• The before/after pseudo elements are often paired with content to add text or icons next to your elements. Example: .item::before { content: "★" }. Used in HTML, <a class="item" href="#">new story</a> would be read out by screen readers as “black star new story”.
• The content property supports alternative text. The code looks like this: .item::before { content: "★" / "Highlighted" }, which would now read as “Highlighted new story”.
• If the icon is purely decorative, an empty alt value of "" is probably more appropriate. That would also avoid the problem of CSS content not necessarily being auto-translatable.
• This feature is only supported in Chromium browsers (i.e. not Firefox/Safari, though there is a hack to get it working in Safari). Therefore using a separate element for your icon, and applying aria-hidden="true" to it, is probably the better approach.

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.