Мы создаем первое в Санкт-Петербурге инклюзивное digital-сообщество
Подробнее о проекте можно узнать на сайте https://traektoria-rosta.ru/
Post #272
24
Доступный сайт = некрасивый сайт? Разбираем миф🤖
Сталкивались ли с мнением, что доступный сайт — минималистичный: с крупным текстом и спокойной цветовой палитрой? Но доступность сама по себе не диктует конкретный визуальный стиль.
✔️Обратимся к WCAG 2.2 — международным рекомендациям W3C по доступности веб-контента. В них описаны проверяемые требования к восприятию информации, навигации и взаимодействию с интерфейсом.
Разберём, как эти требования влияют непосредственно на инклюзивный дизайн ✏️
⭐️Контраст⭐️
Для обычного текста WCAG на уровне AA требует контраст не менее 4,5:1, для крупного текста — 3:1. Для значимых элементов интерфейса и графики, которые нужны для понимания содержания или состояния элемента, также применяется требование 3:1.
Допустим, что у бренда есть светло-голубой цвет, который хочется использовать для текста. Но на белом фоне он оказывается недостаточно контрастным. Что делать? Сделать его темнее для текста, использовать на более тёмном фоне или оставить исходный оттенок для декоративных элементов.
📌Проверить конкретные сочетания можно в WebAIM Contrast Checker или Adobe Color Contrast Checker.
⭐️Типографика⭐️
WCAG не устанавливает универсальный размер шрифта для веб-страниц. Важнее, чтобы текст можно было увеличить до 200% без потери содержания или функциональности.
Для дизайнера это означает, что типографическую систему нужно проверять не только в исходном макете. Если текст увеличивается, карточки не должны внезапно обрезаться, кнопки — исчезать, а строки — накладываться друг на друга.
⭐️Фокус⭐️
Фокус — визуальное состояние элемента, который пользователь выбрал при навигации с клавиатуры. Когда человек нажимает Tab, он должен понимать, на какой кнопке, ссылке или поле находится.
Фокус не обязательно должен выглядеть как стандартная синяя рамка браузера. Его можно встроить в дизайн-систему: использовать контур, изменение заливки, подчёркивание или другой заметный визуальный приём.
🔖Для необходимой визуальной информации о состоянии элемента применяется контраст не менее 3:1.
⭐️Иерархия заголовков⭐️
Хорошая типографическая иерархия помогает понять структуру страницы: где название, где раздел, где подраздел.
Например, на странице образовательного курса логичная структура заголовков может выглядеть так:
H1 — Курс по UX-дизайну
H2 — Программа
H2 — Преподаватели
H2 — Стоимость
H3 — Тариф «Стандарт»
H3 — Тариф «Премиум»
Главное, чтобы соблюдалась иерархия. Пользователь понимает, что «Стоимость» — это раздел, а «Тариф Стандарт» — подраздел внутри него. Важно, чтобы пользователь мог разобраться в структуре контента, а элементы, выполняющие роль заголовков, были корректно определены в интерфейсе.
⭐️Маленькая иконка может иметь большую область взаимодействия⭐️
В WCAG 2.2 для большинства элементов, которыми управляют указателем, появился минимальный размер цели 24 × 24 CSS px на уровне AA. Есть исключения, в том числе ситуации, когда вокруг небольшой цели достаточно свободного пространства.
🔖Например, крестик в модальном окне визуально может оставаться 16 × 16 px, но область, по которой пользователь кликает, можно сделать 24 × 24 px или больше. Так сама иконка остаётся аккуратной, а кликнуть по ней становится проще.
То же относится к другим интерактивным элементам. Пользователь должен понимать, что перед ним кнопка или ссылка, где находится область взаимодействия и что произойдёт после клика.
Получается, что доступный интерфейс может быть минималистичным, ярким или экспериментальным. Главный вопрос в том, насколько выбранные визуальные решения позволяют пользователю воспринимать информацию и взаимодействовать с продуктом❔
А какой визуальный приём первым приходит вам в голову, когда вы слышите «инклюзивный дизайн»?💡
#траекторияроста #доступность #доступныйдизайн #UX #UI #доступность
Сталкивались ли с мнением, что доступный сайт — минималистичный: с крупным текстом и спокойной цветовой палитрой? Но доступность сама по себе не диктует конкретный визуальный стиль.
✔️Обратимся к WCAG 2.2 — международным рекомендациям W3C по доступности веб-контента. В них описаны проверяемые требования к восприятию информации, навигации и взаимодействию с интерфейсом.
Разберём, как эти требования влияют непосредственно на инклюзивный дизайн ✏️
⭐️Контраст⭐️
Для обычного текста WCAG на уровне AA требует контраст не менее 4,5:1, для крупного текста — 3:1. Для значимых элементов интерфейса и графики, которые нужны для понимания содержания или состояния элемента, также применяется требование 3:1.
Допустим, что у бренда есть светло-голубой цвет, который хочется использовать для текста. Но на белом фоне он оказывается недостаточно контрастным. Что делать? Сделать его темнее для текста, использовать на более тёмном фоне или оставить исходный оттенок для декоративных элементов.
📌Проверить конкретные сочетания можно в WebAIM Contrast Checker или Adobe Color Contrast Checker.
⭐️Типографика⭐️
WCAG не устанавливает универсальный размер шрифта для веб-страниц. Важнее, чтобы текст можно было увеличить до 200% без потери содержания или функциональности.
Для дизайнера это означает, что типографическую систему нужно проверять не только в исходном макете. Если текст увеличивается, карточки не должны внезапно обрезаться, кнопки — исчезать, а строки — накладываться друг на друга.
⭐️Фокус⭐️
Фокус — визуальное состояние элемента, который пользователь выбрал при навигации с клавиатуры. Когда человек нажимает Tab, он должен понимать, на какой кнопке, ссылке или поле находится.
Фокус не обязательно должен выглядеть как стандартная синяя рамка браузера. Его можно встроить в дизайн-систему: использовать контур, изменение заливки, подчёркивание или другой заметный визуальный приём.
🔖Для необходимой визуальной информации о состоянии элемента применяется контраст не менее 3:1.
⭐️Иерархия заголовков⭐️
Хорошая типографическая иерархия помогает понять структуру страницы: где название, где раздел, где подраздел.
Например, на странице образовательного курса логичная структура заголовков может выглядеть так:
H1 — Курс по UX-дизайну
H2 — Программа
H2 — Преподаватели
H2 — Стоимость
H3 — Тариф «Стандарт»
H3 — Тариф «Премиум»
Главное, чтобы соблюдалась иерархия. Пользователь понимает, что «Стоимость» — это раздел, а «Тариф Стандарт» — подраздел внутри него. Важно, чтобы пользователь мог разобраться в структуре контента, а элементы, выполняющие роль заголовков, были корректно определены в интерфейсе.
⭐️Маленькая иконка может иметь большую область взаимодействия⭐️
В WCAG 2.2 для большинства элементов, которыми управляют указателем, появился минимальный размер цели 24 × 24 CSS px на уровне AA. Есть исключения, в том числе ситуации, когда вокруг небольшой цели достаточно свободного пространства.
🔖Например, крестик в модальном окне визуально может оставаться 16 × 16 px, но область, по которой пользователь кликает, можно сделать 24 × 24 px или больше. Так сама иконка остаётся аккуратной, а кликнуть по ней становится проще.
То же относится к другим интерактивным элементам. Пользователь должен понимать, что перед ним кнопка или ссылка, где находится область взаимодействия и что произойдёт после клика.
Получается, что доступный интерфейс может быть минималистичным, ярким или экспериментальным. Главный вопрос в том, насколько выбранные визуальные решения позволяют пользователю воспринимать информацию и взаимодействовать с продуктом❔
А какой визуальный приём первым приходит вам в голову, когда вы слышите «инклюзивный дизайн»?💡
#траекторияроста #доступность #доступныйдизайн #UX #UI #доступность
- 👾 1
