Поскольку структура документа HTML5 не реализуется никаким пользовательским агентом (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines), у нас осталась старая добрая схема на уровне заголовков.
Я полностью за соблюдение стандартов, поэтому я пытаюсь найти хороший план на уровне заголовков для повторного использования и адаптации.
Используя инструмент проверки W3C с опцией «показать структуру», я проверил дюжину веб-сайтов, некоторые из которых были созданы евангелистами доступности: Mozilla, Accessiweb, Access42, WCAG, W3C…. Но я не нашел ни одного веб-сайта, где бы выполнялись все необходимые условия:
- Структура блога Mozilla (https://blog.mozilla.org/) совершенно неправильно: они использовали h2 для заголовков каждой статьи, но они использовали h3 для других разделов на странице, поэтому похоже, что каждый глобальный контент («Больше блогов Mozilla», «Больше статей»…) связан с последним статья.
Набросок главной страницы блога Mozilla на уровне заголовка на Imgur
- Несколько сайтов пропускают один или несколько уровней в иерархии заголовков.
Схема заголовка публикации W3C на Imgur
- Эта статья WebAIM (https://webaim.org/techniques/screenreader/) имеет связный контур, но первый заголовок на веб-странице — это h2
Схема заголовка публикации WebAIM на Imgur
- Эта страница Accessiweb (http://www.accessiweb.org/index.php/expert-accessiweb-en-evaluation.html) имеет последовательную структуру.
Однако это не HTML5, поэтому разработчику не пришлось иметь дело с предупреждения типа «элемент навигации без заголовка», и, самое главное, каждый h1 каждой страницы этого сайта — это заголовок сайта («Acsiweb»), заголовок страницы — это h2… Похоже, плохая идея для доступности и SEO.
Схема на уровне заголовков с сайта accessiweb.org на Imgur
Если h1 — это заголовок сообщения, какой заголовок следует использовать для глобальных разделов (например, для навигации или нижнего колонтитула)?
- если использовать h1, это нарушает правило «только один H1 на странице»
- если использовать h2, иерархия неверна (см. Пример блога Mozilla)
- если заголовок не используется, появляется предупреждение от валидатора W3C («элемент навигации без заголовка»)
Я даже не знаю, хорошо ли для пользователей программ чтения с экрана постоянно иметь глобальные разделы в своем списке заголовков, возможно, им будет неприятно слышать « h1 Глобальная навигация - h1 Заголовок моего поста - h1 Подписаться на наш информационный бюллетень - h1 Другой контент (нижний колонтитул) » когда они используют навигацию по заголовкам на каждой странице.
Или, может быть, наоборот, они нуждаются в ней на каждой странице, и их будет раздражать отсутствие доступа к каждому содержимому на каждой странице? Какая головная боль!
Итак: возможна ли правильная и последовательная схема на уровне заголовков на сайте с глобальными разделами за пределами схемы HTML-документа?
Я понимаю, что не существует единой HTML-структуры, подходящей для всех, но у большинства сайтов есть заголовок, глобальная навигация, основная зона и нижний колонтитул, поэтому я думаю, что у нас может быть, по крайней мере, шаблон с этими элементами.
