Находим ошибки модели содержимого
Что делаем: подключаем блок «Отзывы», в котором спрятаны шесть ошибок. Браузер покажет его без единого замечания, но спецификация такую разметку запрещает. Мы учимся искать эти ошибки.
Браузер прощает почти всё
Правило, которое нужно усвоить: если страница отображается, это ещё не значит, что она верна. Парсер HTML молча чинит ошибки и строит дерево по своим правилам, которое может отличаться от вашего кода. Поэтому ошибки модели содержимого находят не глазами, а проверкой.
Модель содержимого
У каждого элемента в спецификации есть раздел Content model: что можно положить внутрь. Элементы делятся на категории. Нас интересуют три:
| Категория | Что туда входит |
|---|---|
| Строчное (phrasing) содержимое | текст, span, a, strong, em, img, button |
| Потоковое (flow) содержимое | почти всё: плюс p, div, ul, section |
| Интерактивное содержимое | a с href, button, input, select, details |
Шесть ошибок в блоке «Отзывы»
| Что в коде | Что не так |
|---|---|
ul внутри p | p принимает только строчное содержимое: браузер закроет абзац до списка |
div прямо внутри ul | дети ul — только li (и скрипты/шаблоны) |
h3 внутри span | span — строчный, заголовок — потоковый |
a внутри button | интерактивный элемент внутри интерактивного |
два элемента с id="reviews" | id обязан быть уникальным |
label for="nick" при поле id="name" | подпись указывает на несуществующее поле |
Чем проверять
- Nu Html Checker (validator.w3.org/nu): проверяет документ по стандарту и указывает строку.
- Панель Accessibility в DevTools: показывает дерево доступности и имена элементов.
- Проверка клавиатурой: пройдите страницу только клавишей Tab.
- Автоматические проверки, например axe или Lighthouse: находят часть ошибок, но не все.
- Диктор (NVDA, VoiceOver): проверка вживую.
Ни один инструмент не заменяет остальные: автоматика видит около трети проблем, а смысл всё равно проверяет человек.
По спецификации
- Модели содержимого: как спецификация описывает, что можно класть внутрь элемента.
- Строчное содержимое: категория phrasing content.
- Интерактивное содержимое: категория interactive content: внутри нельзя класть другой интерактивный элемент.
- Элемент p: допустимое содержимое и когда закрывающий тег можно опустить.
- Атрибут id: идентификатор должен быть уникален в документе.
- Nu Html Checker: валидатор разметки по стандарту.
- WCAG 2.2: имя, роль, значение: критерий 4.1.2: у элементов управления должны быть программно определяемые имя и роль.