---

ПРАКТИЧЕСКАЯ РАБОТА 10

ЦЕЛЬ РАБОТЫ
Освоить методику проведения аудита веб-ресурсов на соответствие ключевым веб-стандартам (W3C Markup Validation, WCAG 2.1), критериям адаптивности, производительности и базовым требованиям сео-оптимизации. Научиться выявлять дефекты верстки, ошибки валидации и формировать профессиональный отчёт о тестировании.
ОБЪЕКТ ТЕСТИРОВАНИЯ И ИНСТРУМЕНТАРИЙ
Объект: Веб-сайт или веб-страница (выдается преподавателем или выбирается студентом по согласованию).
Рекомендуемые инструменты аудита:
1.	Валидация верстки: W3C Markup Validation Service (html5.validator.nu или validator.w3.org), W3C CSS Validator.
2.	Аудит производительности и SEO: Google Lighthouse / PageSpeed Insights (DevTools).
3.	Проверка доступности (Accessibility): WAVE Web Accessibility Evaluation Tool, axe DevTools.
4.	Адаптивность и кроссбраузерность: Chrome DevTools Device Mode.
МЕТОДИКА ВЫПОЛНЕНИЯ И ЭТАПЫ АУДИТА
1. Валидация HTML/CSS кода (W3C Standards)
●	Проверка страницы на наличие незакрытых тегов, невалидных атрибутов, устаревших элементов HTML5 и ошибок синтаксиса CSS.
●	Фиксация количества предупреждений (Warnings) и критических ошибок (Errors).
2. Аудит доступности (Accessibility / WCAG)
●	Проверка наличия и корректности атрибутов alt у изображений.
●	Анализ контрастности текста и фоновых элементов (минимум 4.5:1 для обычного текста).
●	Проверка логической структуры заголовков (<h1>–<h6>) и наличия ориентиров ARIА (role, aria-label).
●	Навигация с клавиатуры (доступность фокусировки через Tab).
3. Адаптивная верстка и кроссбраузерное отображение
●	Проверка корректности отображения при ключевых разрешениях: Mobile (360px–414px), Tablet (768px–1024px), Desktop (1280px+).
●	Выявление горизонтальной прокрутки (Overflow issue), перекрытия элементов и вылезающего текста.
4. Производительность и SEO-метрики (Lighthouse)
●	Запуск синтетического теста Lighthouse в DevTools (вкладки Performance, Accessibility, Best Practices, SEO).
●	Фиксация метрик: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) и итогового балла (0–100).
СТРУКТУРА ОТЧЕТА ПО ПРАКТИЧЕСКОЙ РАБОТЕ
Отчет оформляется студентом в текстовом редакторе со следующими разделами:
1. Титульный блок
●	Наименование учебного заведения, кафедры и дисциплины
●	Тема практической работы
●	Сведения о студенте (ФИО, группа, номер варианта/URL проверяемого сайта) и преподавателе
2. Общая информация об объекте тестирования
●	URL-адрес тестируемого сайта
●	Назначение ресурса и используемый стек (если известны)
●	Перечень используемых инструментов тестирования
3. Результаты проверок по направлениям
●	Раздел A. Валидация HTML/CSS
○	Количество выявленных Errors и Warnings
○	Перечень основных 3–5 критических ошибок кода с приведением строк и их описанием
●	Раздел B. Доступность (Accessibility)
○	Наличие альтернативного текста у медиафайлов
○	Ошибки контрастности и структуру заголовков
○	Результаты тестирования навигации без мыши (клавиатурой)
●	Раздел C. Адаптивность и мобильное отображение
○	Поведение интерфейса при переключении на мобильные разрешения
○	Перечень найденных багов верстки (вылезающие блоки, некликабельные кнопки, горизонтальный скролл)
●	Раздел D. Показатели Lighthouse
○	Значения показателей: Performance, Accessibility, Best Practices, SEO
○	Ключевые проблемы, замедляющие загрузку страницы
4. Баг-репорты (Карточки дефектов) Оформление минимум 3 детальных баг-репортов по найденным ошибкам:
●	Идентификатор и Заголовок дефекта
●	Шаги воспроизведения (Steps to Reproduce)
●	Фактический результат (Actual Result)
●	Ожидаемый результат (Expected Result)
●	Серьёзность (Severity) и Приоритет (Priority)
5. Вывод и рекомендации
●	Итоговая оценка соответствия сайта современным веб-стандартам
●	Перечень приоритетных рекомендаций для команды разработки по устранению багов
ВОПРОСЫ ДЛЯ САМОПРОВЕРКИ И ЗАЩИТЫ РАБОТЫ
1.	Зачем нужна валидация HTML-кода по стандартам W3C, если браузеры умеют отображать код с ошибками?
2.	Что такое стандарты доступности WCAG и почему их соблюдение критично для коммерческих сайтов?
3.	Какая метрика Lighthouse отвечает за сдвиг верстки во время загрузки страницы и как её минимизировать?
4.	Чем адаптивная верстка (Responsive Web Design) отличается от отзывчивой/мобильной версии?
5.	В чем разница между показателями Severity (Серьёзность) и Priority (Приоритет) при оформлении дефекта верстки?