Структура содержимого веб-страницы
Описание содержимого страницы должно фиксировать элементы верхнего уровня и их атрибуты: заголовки, метаданные, основной текст, мультимедиа и интерактивные элементы. В документации указывают URL, канонический URL, тип страницы и владельца, а также статус публикации и последнюю дату изменения в формате ISO 8601 (например, 2023-11-15). Пример практического описания страницы можно дополнить выдержкой из HTML-кода страницы для наглядности. Подробный пример доступен на странице https://pilife.ru/a.php?id=533.
Блоки и семантические элементы (header, main, article, footer)
Семантические теги определяют структуру и смысловую роль контента. Тег header обычно содержит навигацию и заголовок страницы; тег main допускается в одном экземпляре на документ и обозначает основной контент; article подходит для независимых публикаций с собственным набором метаданных; footer собирает сведения о авторе и правовой информации. Для каждого блока фиксируют id, роль (role), позицию в DOM и наличие вложенных навигационных элементов.
Заголовки, их уровни и порядок в документе
Заголовки H1–H6 формируют иерархию. В описании указывают уровень заголовка, текст, идентификатор id, позицию в DOM и семантическую роль. Если элемент реализован через role=»heading», фиксируется aria-level. Для индексирования и доступности полезно регистрировать, сколько раз встречается H1 и какие подзаголовки вложены в конкретные секции.
Метаданные и маркировка
Теги title, meta description, canonical и служебные атрибуты
Тег title содержит заголовок документа; фиксируются текст и длина в символах (целевой диапазон 50–60 символов). Meta description описывает содержание для внешних сервисов; фиксируют текст и длину (целевой диапазон 150–160 символов). Тег link rel=»canonical» указывает абсолютный канонический URL. Дополнительно регистрируют meta name=»robots», meta name=»viewport» и наличие rel=»alternate» с атрибутом hreflang.
Структурированные данные: JSON-LD и microdata — что фиксировать
Структурированные данные фиксируют тип схемы (schema.org), ключевые свойства (name, url, image, author, datePublished) и место размещения. JSON-LD обычно помещают в head в теге script type=»application/ld+json»; в описании отмечают валидность JSON и присутствие @context и @type. Для microdata документируют атрибуты itemscope, itemtype и itemprop и привязку к DOM-элементам. В отчёте указывают, какие сущности объявлены и есть ли несоответствия с ожидаемой схемой.
Мультимедиа и интерактивные элементы
Описание изображений, видео, аудио и сопутствующие поля
Для каждого изображения фиксируют src, alt, title, width и height в пикселях, формат (JPEG, PNG, WebP, AVIF), а также наличие srcset и sizes. Для соцкартинок указывают размеры, например 1200×630 px. Alt-текст документируют как описательный или декоративный (alt=»» для декоративных). Для видео и аудио фиксируют формат (MP4, WebM, MP3, AAC), наличие элементов управления (controls), автозапуска (autoplay), транскрипта или субтитров в WebVTT (), и поля preload. Если мультимедиа сопровождается метаданными (длительность, размеры, битрейт), эти параметры также фиксируют.
Формы, поля ввода и сценарии валидации
Описание формы включает action, method, список полей с name и id, type (text, email, number, password и др.), обязательность (required), placeholder, minlength и maxlength, регулярные выражения в pattern и aria-описания ошибок (aria-describedby). Документируют клиентскую валидацию через Constraint Validation API и серверную обработку: ожидаемые коды ответов (400 Bad Request, 422 Unprocessable Entity), формат ошибок и политика повторной отправки. Для полей с числовыми значениями фиксируют диапазоны и шаг (min, max, step).
Динамический контент и скрипты
Как документировать источники данных и условия рендеринга
Динамический контент привязан к источникам: REST-эндпойнты, GraphQL-запросы или WebSocket. Для каждого компонента фиксируют URL API, метод запроса, пример ответа, условия рендеринга (на загрузке страницы, по событию пользователя, при прокрутке), стратегию кэширования (Cache-Control: max-age=3600, ETag) и тип рендеринга (SSR или CSR). Указывают, генерируется ли часть контента на этапе сборки или при каждом запросе.
Влияние клиентских скриптов на поведение и производительность
Перечисляют скрипты, точку инициации, зависимости и способ подключения (async, defer, inline). Регистрируют влияние на метрики производительности: FCP, LCP, TTI и CLS. Отмечают наличие долгих задач (>50 мс) и использование ресурсных подсказок (preload, prefetch). Для анализа указывают возможность отложенной загрузки и критический путь рендеринга.
Доступность и локализация
Атрибуты ARIA, альтернативные тексты и клавиатурная навигация
Фиксация атрибутов включает role (navigation, main, banner), aria-label, aria-describedby, aria-controls, aria-expanded, aria-hidden и tabindex (например tabindex=»0″ для фокусируемых элементов, tabindex=»-1″ для временно исключаемых). Документируют порядок фокуса, наличие «skip link» и поддержку навигации с клавиатуры. Для проверки доступности приводят соответствие уровням WCAG 2.1 AA и критерии контрастности: соотношение 4,5:1 для обычного текста и 3:1 для крупного текста.
Языки, локали, hreflang и особенности перевода
Указывают значение атрибута lang на уровне документа и секций, теги rel=»alternate» hreflang с кодами в формате RFC 5646 (например ru-RU), а также направление текста dir=»rtl» при необходимости. Документируют используемые форматы даты и числа по локали, наличие механизма выбора языка и поведение при отсутствии перевода (fallback). Регистрируют статус перевода для каждого текстового блока и связанные ресурсы локализации.
Процесс описания и инструменты
Шаблон инвентаризации: обязательные и опциональные поля
Обязательные поля: URL, канонический URL, тип страницы, владелец, статус, title (текст и длина), meta description (текст и длина), H1 и перечень заголовков с уровнями и id, наличие структурированных данных, список изображений с alt и размерами, формы с полями и правилами валидации, ARIA-атрибуты и языки. Опциональные поля: производительность (FCP, LCP), sitemap-статус, ограничения кеширования, список внешних скриптов и их асинхронность.
Инструменты автоматизации и ручной проверки, экспорт и поддержка версий
Для сбора используют сочетание автоматизированных сканеров, headless-браузеров и инспекции через инструменты разработчика. Автоинструменты помогают извлечь теги meta, структурированные данные и статические изображения; ручная проверка необходима для оценки alt-текстов, клавиатурной навигации и сложных динамических сценариев. Экспортируют инвентаризацию в формате JSON, CSV или YAML и хранят историю изменений в системе контроля версий. Для регулярных проверок на этапе выпуска указывают периодичность сканирования и процедуру регрессионного тестирования.