Стас Мельников написал, как с помощью CSS-свойств улучшить дизайн веб-страниц.

— Чтобы, например, на последней строке заголовка не оставалось одного слова, можно использовать свойство text-wrap: balance;
— Свойство padding задаёт внутренние отступы. У интерактивных элементов оно позволяет увеличить область нажатия и облегчить пользователям попадание по таким элементам;
— Если на новость ведёт ссылка и в заголовке, и в картинке, пользователи скринридеров услышат о ссылке дважды. С помощью псевдоэлемента ::before можно убрать вторую ссылку и при этом сохранить интерактивность картинки;
— В разметке попапа код кнопки закрытия часто идёт первым. В этом случае пользователи скринридера, открыв попап, сразу же слышат о кнопке закрытия попапа;
— Можно расположить код кнопки в конце разметки попапа, но с помощью свойства position: absolute сохранить её визуальное расположение в верхней части попапа;
— Для выделенного текста голубой цвет фона можно заменить на любой другой. При этом цвет текста можно автоматически делать контрастным по отношению к цвету фона с помощью функции contrast-color().

#accessibility #css