Стилизация CSS для доступности
Хорошая доступность означает, что веб-сайт работает для всех пользователей, включая людей с ограниченными возможностями.
С помощью продуманных приёмов оформления CSS может улучшить визуальную ясность, навигацию и общий пользовательский опыт.
Приёмы стилизации CSS для доступности
Приёмы, описанные ниже, помогут вам сделать ваш веб-сайт более доступным.
1. Обеспечьте высокий цветовой контраст
Чтобы текст был читаемым, он должен выделяться на фоне, поэтому поддерживайте сильный контраст между ними. Больше всего от этого зависят пользователи с нарушениями зрения или дальтонизмом.
Хороший цветовой контраст
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Good Color Contrast</title>
<style>
body {
background-color: #ffffff;
color: #000000;
}
</style>
</head>
<body>
<h1>Good Color Contrast</h1>
<p>This text has good color contrast. The background is white and the text is black, making it easy to read for all users.</p>
</body>
</html>
Плохой цветовой контраст
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bad Color Contrast</title>
<style>
body {
background-color: #eeeeee;
color: #cccccc;
}
</style>
</head>
<body>
<h1>Bad Color Contrast</h1>
<p>This text has bad color contrast. The background is light gray and the text is a slightly darker gray, making it very hard to read.</p>
</body>
</html>
2. Обеспечьте хороший шрифт, размер шрифта и высоту строки
Выбирайте легко читаемый шрифт с подходящим размером и высотой строки. Задавайте font-size в относительных единицах (например, rem), чтобы пользователи могли масштабировать текст в настройках браузера.
Пример хорошего шрифта
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Good Font Example</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Good Font Example</h1>
<p>This text uses a clean, readable font (Arial), a relative font size (1rem), and a comfortable line height (1.6). This makes it easy to read on all devices.</p>
</body>
</html>
Пример плохого шрифта
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bad Font Example</title>
<style>
body {
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
font-variant: small-caps;
line-height: 90%;
}
</style>
</head>
<body>
<h1>Bad Font Example</h1>
<p>This text uses a serif font with a small fixed pixel size, italic style, small-caps variant, and a tight line height. This combination makes the text harder to read, especially for users with visual impairments.</p>
</body>
</html>
3. Используйте видимые индикаторы фокуса
Интерактивные элементы (ссылки, кнопки, поля ввода) всегда должны иметь чёткий визуальный стиль в состоянии фокуса — именно для этого нужен псевдокласс :focus.
Благодаря такому стилю пользователи клавиатуры и программы чтения с экрана могут понять, какой элемент сейчас активен.
Пример
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visible Focus Indicators</title>
<style>
a:focus, button:focus, input:focus {
outline: 2px solid orange;
}
</style>
</head>
<body>
<h1>Visible Focus Indicators</h1>
<p>Click on the elements below, or use the Tab key to navigate between them. Each element will show an orange outline when focused.</p>
<p><a href="#">A Link</a></p>
<p><button>A Button</button></p>
<p><input type="text" placeholder="An Input Field"></p>
</body>
</html>
4. Избегайте скрытия фокуса
Стандартные обводки фокуса можно убирать только в том случае, если их место занимает другой видимый стиль фокуса.
Плохой пример
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bad Focus Example</title>
<style>
button:focus {
outline: none;
}
</style>
</head>
<body>
<h1>Bad Focus Example</h1>
<p>The button below has no visible focus indicator. Try using the Tab key to focus it - you cannot tell which element is active.</p>
<p><button>Button 1</button></p>
<p><button>Button 2</button></p>
</body>
</html>
Хороший пример
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Good Focus Example</title>
<style>
button:focus {
outline: 2px solid orange;
}
</style>
</head>
<body>
<h1>Good Focus Example</h1>
<p>The button below has a visible orange focus indicator. Try using the Tab key to focus it - you can clearly see which element is active.</p>
<p><button>Button 1</button></p>
<p><button>Button 2</button></p>
</body>
</html>
5. Используйте CSS + семантический HTML
Оставьте визуальное оформление за CSS и задавайте структуру контента с помощью семантических HTML-элементов, а не используйте повсюду несемантические элементы, такие как <div>.
Пример
nav {
background-color: #333333;
color: white;
}
aside {
background-color: #333333;
color: white;
}
6. Учитывайте предпочтения пользователя
Из-за чувствительности к движению некоторые пользователи предпочитают веб-сайты с меньшим количеством анимации. Чтобы проверить, запросил ли кто-то уменьшение движения, например анимаций или переходов, в CSS есть медиахарактеристика prefers-reduced-motion.
Когда эта настройка активна на компьютере пользователя, этот медиазапрос позволяет отключить или уменьшить анимации и переходы.
Пример
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prefers Reduced Motion</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: coral;
animation: slide 2s infinite alternate;
}
@keyframes slide {
from { margin-left: 0; }
to { margin-left: 300px; }
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body>
<h1>Prefers Reduced Motion</h1>
<p>The box below is animated. If your system is set to prefer reduced motion, the animation will be disabled.</p>
<div class="box"></div>
</body>
</html>
Итоги
- Поддерживайте высокий цветовой контраст
- Выбирайте легко читаемые шрифты
- Оставляйте обводки фокуса видимыми
- Структурируйте страницы с помощью семантических HTML-элементов
- Учитывайте предпочтения пользователей