Web performance и доступность
Все объяснения, задачи и лабораторная в одном месте.
Можно сохранить страницу в PDF через печать браузера. Для печати разборы ответов раскрываются автоматически.
1. Семантика, accessibility tree и screen reader
Объяснение
Accessibility tree представляет смысл интерфейса для вспомогательных технологий. Правильные HTML-элементы передают роль и состояние. Доступное имя кнопки должно объяснять действие независимо от соседней графики.
Задача для самостоятельного решения
Как назвать кнопку с иконкой корзины?
Показать разбор ответа
«Удалить товар …» через видимый текст или aria-label. Само слово «корзина» может быть двусмысленным; проверяйте имя в accessibility tree.
2. Keyboard, focus и интерактивные паттерны
Объяснение
Фокус показывает место клавиатурного взаимодействия. Визуальный порядок и порядок Tab должны быть согласованы. Модальное окно не должно отпускать фокус в неактивный фон и обязано возвращать его инициатору.
Задача для самостоятельного решения
Что проверить при закрытии диалога Escape?
Показать разбор ответа
Диалог исчезает, фокус возвращается на кнопку открытия, фон снова доступен. Потеря фокуса на body заставляет человека искать прежнее место.
3. Цвет, zoom, motion и когнитивная доступность
Объяснение
Контраст и масштабирование влияют на читаемость. Ошибку нельзя кодировать только красным цветом. Анимации должны учитывать предпочтение уменьшенного движения; интерфейс остаётся понятным без анимации.
Задача для самостоятельного решения
Как показать ошибку формы без опоры на цвет?
Показать разбор ответа
Добавить текст причины рядом с полем, связать его aria-describedby и обозначить invalid. Красная рамка может быть дополнительным, но не единственным сигналом.
4. Network waterfall и critical rendering path
Объяснение
Critical rendering path включает загрузку HTML, блокирующих стилей и построение первого кадра. Waterfall показывает зависимости запросов. Предзагрузка полезна для действительно критичного ресурса и может конкурировать с остальными.
Задача для самостоятельного решения
Почему лишний preload может замедлить важную картинку?
Показать разбор ответа
Он расходует сеть и приоритеты на ненужный ресурс. Сначала определите узкое место по waterfall, затем проверяйте изменение метрики.
5. LCP, INP, CLS и performance budget
Объяснение
LCP характеризует появление крупного содержимого, INP — отзывчивость на взаимодействия, CLS — неожиданные сдвиги. Лабораторный тест контролируем, полевые данные показывают разные устройства и сети.
Задача для самостоятельного решения
Почему хороший тест на мощном ноутбуке не доказывает хороший UX?
Показать разбор ответа
Реальные устройства могут медленнее разбирать JS и иметь слабую сеть. Нужны полевые распределения и воспроизводимые проверки с ограниченными ресурсами.
6. Автоматический и ручной аудит в CI
Объяснение
Автоматический аудит находит часть нарушений, но не оценивает смысл текста и удобство сценария полностью. Ручная проверка клавиатурой и screen reader дополняет статические правила.
Задача для самостоятельного решения
Достаточно ли нуля ошибок автоматического accessibility scan?
Показать разбор ответа
Нет. Пройдите ключевой сценарий без мыши, проверьте порядок чтения, сообщения об ошибках и работу при увеличении текста.
Лабораторная работа
Подготовка
Браузер, клавиатура и DevTools. Для проверки используйте собственную учебную страницу.
Учебный пример
<label for="email">Электронная почта</label>
<input id="email" type="email" aria-describedby="email-help">
<p id="email-help">Используется для восстановления доступа.</p>
<button type="button">Продолжить</button>
<img src="example.jpg" alt="Схема процесса обучения" width="800" height="450">Как работает пример и что ожидать
Label даёт имя полю, aria-describedby связывает объяснение. У картинки заранее задано соотношение сторон, что резервирует место. example.jpg нужно создать в учебном каталоге; это локальный ресурс, не обязательная внешняя ссылка.
Итоговая работа
Проведите аудит клавиатуры, фокуса, zoom и ошибок формы. Запишите waterfall и наиболее дорогой ресурс, исправьте одну причину и повторите измерение при одинаковых условиях. Разделяйте автоматические находки и ручные наблюдения.
Проверка результата
1. Опишите исходные данные и условия запуска, чтобы другой человек мог повторить работу.
2. Приложите результат обычного сценария и сравните его с ожидаемым.
3. Проверьте неверный вход, граничный случай и отказ зависимости, если она есть.
4. Объясните выбранное решение и известное ограничение.
5. Сохраните исправления после самопроверки вместе с примером, который раньше не работал.
Как оценить работу
По каждому пункту поставьте 0 (не выполнено), 1 (выполнено с пробелами) или 2 (результат воспроизводим и объяснён). Если обязательный сценарий не работает, вернитесь к нему независимо от общей суммы. Это рубрика самопроверки: сайт не исполняет присланный код и не выдаёт автоматическую оценку проекта.