Ставишь звёздочку у обязательного поля через
::after — и незрячий пользователь слышит «Телефон звёздочка». Символ до него дошёл, а смысл нет: из «звёздочки» никак не следует, что поле обязательное. Чинится одной косой чертой..required::after {
content: '*' / 'обязательное поле';
}После значения в
content ставь косую черту и пиши альтернативный текст. На экране остаётся та же звёздочка, а скринридер прочитает «Телефон обязательное поле».На гифке форма не меняется, меняется только то, что слышит пользователь: сначала «Телефон звёздочка», потом «Телефон обязательное поле».
Так же чинится любой декор из
content: галочка, стрелка в хлебных крошках. Если символ нужен только глазам, поставь после черты пустые кавычки, и скринридер его пропустит.Работает в Chrome 77+, Firefox 128+, Safari 17.4+.
🔥 — если было полезно
@glo_academy | #css_day