Альтернативный текст для псевдоэлементов

Стефан Джудис написал небольшую статью про использование альтернативного текста с псевдоэлементами — "The CSS "content" property accepts alternative text".

Псевдоэлементы before и after часто используются для стилизации элементов на странице с помощью свойства content. Но content может негативно влиять на доступность, так как он озвучивается скринридерами. Для решения этой проблемы можно задавать альтернативный текст прямо в CSS.

.new-item::before {
content: "★" / '';
}
<a href="new-things">go to new things</a>

В примере выше альтернативный текст для символа звезды пустая строка. Без него скринридеры озвучили бы html как "black star go to new things".

Поддержка этой фичи есть только в Chromium-based браузерах. В Safari есть поддержка экспериментального и устаревшего свойства alt. Только в Firefox на данный момент невозможно задать альтернативный текст для content.

https://www.stefanjudis.com/today-i-learned/css-content-accepts-alternative-text/

← На главную