Спокойные объяснения о том, как устроены интерфейсы и почему доступность начинается с разметки, а не с плагина. Разбираем критерии выбора решений, подготовку к проверке и типичные ошибки.
Читать руководстваЧетыре этапа, через которые проходит почти любой интерфейс: от первичного выбора решений до отработанной практики. Материалы сайта собраны в той же логике.
Определяем, какие компоненты пишутся вручную, а какие берутся из библиотеки, и по каким критериям оценивать готовое решение: наличие семантики, поддержка клавиатуры, управляемость состояний.
Приводим разметку в порядок до того, как появятся стили: структура заголовков, ориентиры страницы, подписи полей, порядок фокуса и текстовые альтернативы для графики.
Разбираем повторяющиеся промахи: div вместо кнопки, скрытие через display без учёта фокуса, избыточные ARIA-атрибуты, недостаточный контраст и «ловушки» модальных окон.
Закрепляем привычки: проверка страницы только клавиатурой, чтение вслух скринридером, ручной аудит по критериям и включение проверок в обычный процесс разработки.
WAI-ARIA следует добавлять только там, где возможностей семантического HTML недостаточно. Сначала выбирают нативный элемент, затем проверяют его поведение и лишь после этого назначают роли, состояния или свойства. Атрибуты доступности…
Если вы планируете купить дом недорого в Подмосковье, объявления и сами объекты лучше сравнивать по заранее заданным критериям, а не ориентироваться только на первое впечатление. Поэтому доступность проверяют по маршруту пользователя…
Структуру страницы следует строить от смысла материала, а не от будущего оформления. Сначала определяют назначение каждого блока, затем выбирают подходящий тег и только после этого добавляют CSS. Такой порядок делает код понятнее…
Ориентиры, вокруг которых строятся материалы сайта: базовые требования и объём разбираемых тем.
Основные направления, о которых пишем: от разметки и стилей до проверки готового интерфейса.
Теги, ориентиры, структура заголовков и почему они важнее классов.
Порядок обхода, видимое кольцо фокуса, ловушки в модальных окнах.
Как считать соотношение яркости и не строить смысл на одном цвете.
Связка label и поля, сообщения об ошибках, подсказки и валидация.
Что озвучивается на самом деле и как проверить страницу на слух.
Ручной аудит, автоматические инструменты и порядок их применения.