Какой у вас заголовок?

Я проверяю множество веб-сайтов на доступность, и в последнее время я часто вижу сайты, в которых пропущены уровни заголовков. Уровни заголовков имеют решающее значение для доступности и читабельности. Я объясню, почему. ПРИМЕЧАНИЕ: Это высокоуровневый обзор для повышения осведомленности и очень мало затрагивает технические аспекты.

Заголовки действуют как «оглавление» страницы. Люди сканируют страницу, они используют заголовки, чтобы отличить каждый раздел от другого или найти свое место, если это необходимо.

Пользователи программ чтения с экрана и вспомогательных технологий используют заголовки, и эти заголовки очень важны для того, чтобы программа чтения с экрана/ вспомогательные технологии зачитывали содержание страницы пользователю.

Позвольте мне объяснить.

Уровни заголовков

Уровни заголовков (или ранг) имеют значение. <h1> — самый важный заголовок страницы, а от <h2> до <h6> — последний в списке. Например;

Хорошо

<h1>Lobsters and Ways to Make Them</h1>
  <h2>Lobster Rolls</h2>
    <h3>Maine-style</h3>
      <h4>Ingredients</h4>
      <h4>Prep</h4>
      <h4>Directions</h4>
    <h3>Connecticut-style</h3>
      <h4>Ingredients</h4>
      <h4>Prep</h4>
      <h4>Directions</h4>
  <h2>Lobster Dinners</h2>
    <h3>Boiled Lobster</h3>
    <h3>Baked Lobster</h3>
  <h2>Other Ways to Enjoy Lobster</h2>
Вход в полноэкранный режим Выйти из полноэкранного режима

Плохо

<h1>Lobsters and Ways to Make Them</h1>
  <h3>Lobster Rolls</h3>
    <h4>Maine-style</h4>
      <h4>Ingredients</h4>
      <h5>Prep</h5>
      <h4>Directions</h4>
    <h4>Connecticut-style</h4>
      <h4>Ingredients</h4>
      <h5>Prep</h5>
      <h4>Directions</h4>
  <h3>Lobster Dinners</h3>
    <h2>Boiled Lobster</h2>
    <h2>Baked Lobster</h2>
  <h1>Other Ways to Enjoy Lobster</h1>
Войти в полноэкранный режим Выйти из полноэкранного режима

Итак, несколько вещей.

Это способ использования заголовков, в иерархическом порядке. Таким образом, любой пользователь может легко перемещаться по странице и сканировать ее, зрячий или незрячий, это выгодно всем.

Используйте заголовок, когда этого требует содержание или структура страницы, для каждого раздела вашего документа. Когда начинается новый раздел.

Располагайте заголовки в иерархическом порядке. Пожалуйста.

<h1>.

Да, два заголовка <h1> на странице — это не нарушение WCAG, но <h1> должен использоваться как индикатор заголовка страницы. Как в оглавлении, о котором я упоминал ранее. В чем вред? Ну, это старая и долгая дискуссия, о которой я бы написал, но эта статья будет длинной и наполненной историческими разговорами о HTML Document Outline в HTML5, браузерах, не адаптирующихся к нему, и вспомогательных технологиях, также не адаптирующихся к нему.

Я позволю Стиву Фолкнеру и Адриану Розелли провести вас туда.

Компьютер говорит НЕТ контуру документа HTML5

Десятилетие движения назад

Алгоритма построения контура документа не существует

TL;DR Множественные <h1> на странице не поддерживаются браузерами.

WCAG

Существует несколько критериев успеха, под которые подпадают заголовки:

1.3.1 Информация и взаимосвязи (уровень A)

2.4.6 Заголовки и метки (уровень AA)

2.4.10 Заголовки разделов (уровень ААА)

3.2.3 Последовательная навигация (уровень АА)

Стандартные уровни обычно АА, но это не значит, что вы не можете стремиться к уровню ААА в некоторых низко висящих плодах. Цветовой контраст, уровни заголовков и т.д., если это полезно для ваших пользователей.

Программы для чтения с экрана

Опрос пользователей программ для чтения с экрана, проведенный WebAIM, показывает, что 67,7% используют заголовки для поиска информации, а 85,7% респондентов считают заголовки очень или в некоторой степени полезными. Данные налицо.

Устройства для чтения с экрана переходят от заголовка к заголовку, а веб-страницы можно сканировать с помощью заголовков, считайте это как поваренную книгу, где изложен рецепт, или даже как техническое руководство. Пишите заголовки, которые предоставляют информацию, относящуюся к разделу, это помогает пользователям, читающим с экрана, перемещаться по странице (это также помогает и зрячим пользователям).

Что дальше?

Риан Ритвельд написал феноменальную статью на сайте A11y Project, в которой подробно описываются заголовки, что нужно и чего не нужно делать. Часть информации из этой статьи была использована в данной статье.

Эта статья призвана привлечь внимание к тому, что нам нужно делать лучше. Это подводит меня к последнему пункту.

Образование

Я вижу некоторые разговоры об образовании, будь то доступность, образование или что-то, связанное с обеспечением инклюзивности или доступности, и заголовки всегда оказываются где-то в этих разговорах.

О HTML-образовании говорят очень мало или вообще не говорят. Я думаю, что это должно сильно измениться. Видя то, что я называю <div> chowder, div после div после вложенных div, насколько хватает глаз (просто посмотрите на код Twitter или любое приложение Javascript framework), и пропущенные уровни заголовков, отсутствие заголовка <h1>, низко висящий плод базового программирования и доступности.

Если разработчики будут продолжать последовательно выпускать недоступный код, мы никогда к этому не придем. Это должно измениться, и разработчики должны принять доступность, и если это делается с самого начала проекта, это гораздо легче реализовать, чем на полпути или после проекта.

Нам нужно образование в области HTML и образование в области доступности.

Резюме

Убедитесь, что уровни заголовков иерархичны, люди должны использовать их именно таким образом. Зрячие или нет. Прочитайте статью Риана Ритвельда о специфике, которая здесь не рассматривается, возьмите то, что вы знаете и чему научились, и примените это или распространите информацию о том, что уровни заголовков действительно имеют значение.

Заголовок статьи Фото Dragoș Grigore на Unsplash

Оцените статью
Procodings.ru
Добавить комментарий