Интерактивный тренажёр
Курс о том, как проверять вёрстку: руками, тестами по ролям и axe. Читаете урок, правите код и тесты в редакторе и сразу видите результат в превью.
Проверяем страницу без инструментов: клавиатура, масштаб, DevTools. Находим первую ошибку и записываем первый тест.
Цель: Понимать, что в вёрстке стоит проверять, и уметь пройти по странице чек-листом.
Пишем тесты на роли и подписи элементов: сначала красный тест, потом исправление вёрстки.
Цель: Писать тест на разметку так, как его «видит» пользователь: по роли, имени и подписи.
Подключаем axe-core, проверяем состояния формы и фокус, наводим порядок в тестах.
Цель: Собрать набор проверок, который ловит типовые ошибки вёрстки за секунды после каждой правки.
Проверяем страницу на узком экране: ширина 320 px, горизонтальная прокрутка, доступность прокручиваемых блоков.
Цель: Писать тест на ширину экрана и понимать, как исправление одной ошибки открывает другую.
Размечаем и проверяем список карточек: список, заголовки, понятные ссылки и даты в элементе time.
Цель: Закрепить цикл «красный тест, исправление, зелёный тест» на новом блоке страницы.