Как обрабатывать заголовки в глобальных элементах в целях доступности? - PullRequest
Новая
       120

Как обрабатывать заголовки в глобальных элементах в целях доступности?

3 голосов
/ 02 апреля 2019

Во многих проектах некоторые заголовки могут появляться в верхнем колонтитуле, в нижнем колонтитуле или других глобальных элементах веб-сайта.Одним из примеров может быть обозначение «Контакты», «Наш адрес» и аналогичные разделы в нижнем колонтитуле страницы или слоган в заголовке страницы.

В этих случаях я исторически склонен использовать <h6> элементов, поскольку они являются заголовками с самым низким приоритетом, и поэтому я предположил, что они лучше всего подойдут для этого варианта использования.

Однако недавно я начал пытаться улучшить доступность своих проектов, и яобнаружил, что практически каждый автоматизированный инструмент тестирования a11y говорит, что это неправильный способ сделать это.Я постоянно получаю сообщения о том, что «структура заголовка не является логически вложенной», потому что <h6> либо появляется перед любым другим заголовком (в случае слогана в заголовке страницы), либо переходит с более раннего заголовка на <h6> (вв случае заголовков нижнего колонтитула, когда остальная часть содержимого останавливается после значений, меньших <h5>).

Я бы просто изменил <h6> в верхнем и нижнем колонтитулах на <p> в стиле, соответствующем их первоначальному дизайну, но мне это кажется неправильным - не должен ли каждый раздел с заголовком в нижнем колонтитуле быть обозначен фактическим заголовком?

Как правильно обозначать заголовки в глобальных элементах страницы для обеспечения доступности?

Ответы [ 2 ]

1 голос
/ 03 апреля 2019

Типичный сайт может иметь логический контур заголовка, используя имя сайта в качестве заголовка верхнего уровня.Все на странице принадлежит сайту, основное содержание страницы, а также навигация по сайту, а также нижний колонтитул и т. Д. 

<h1>Site name</h1>

  <h2>Site navigation</h2>

  <h2>Page main content</h2>

  <h2>Contact us</h2>

  <h2>Our address</h2>

(обратите внимание, что слоган не должен бытьзаголовок.)

В HTML5 вы можете сделать секции явными (article, aside, nav, section) и передать, к чему относится каждая секция (header, main, footer): 

<body>

  <header>
    <h1>Site name</h1>
    <p>Site tagline</p>

    <nav>
      <h2>Site navigation</h2>
      <!-- heading not necessarily needed -->
    </nav>
  </header>

  <main>
    <article>
      <h2>Page main content</h2>
    </article>
  </main>

  <footer>
    <section>
      <h2>Contact us</h2>
    </section>
    <section>
      <h2>Our address</h2>
    </section>
  </footer>

</body>

(Если нижний колонтитул состоит из множества разделов, может иметь смысл вводить групповые заголовки / разделы, где это возможно, например, «Контакт» в этом примере.не каждому нижнему колонтитулу нужны разделы / заголовки, особенно если содержимое довольно тонкое или не столь важное.)

0 голосов
/ 05 апреля 2019

Инструменты, которые отмечают уровни заголовков, должны делать это только как «предупреждение» или «проверка потребностей». Вы не можете сделать общее заявление о том, что

должен следовать за . Я думаю, что вы делаете правильно. Сделайте все заголовки нижнего колонтитула , чтобы они были едины для всего сайта. У вас могут быть страницы, на которых достаточно информации, чтобы оправдать заголовки вплоть до , но что-то вроде страницы «свяжитесь с нами», вероятно, имеет просто . Наличие , а затем означает , а не автоматический сбой WCAG. 1.3.1 Информация и взаимосвязи - это, как правило, руководство, используемое для пометки заголовков по ошибке, но все, что говорит это требование, это Информация, структура и взаимосвязи, передаваемые посредством презентации, могут быть определены программно или доступны в текстовом виде. В нем ничего не говорится о пропуске уровней заголовка (за исключением некоторых рекомендуемых методов для достижения 1.3.1, но они ненормативные ). Например, H42: Использование h1-h6 для идентификации заголовков говорит об использовании правильных заголовков, но один из примеров показывает, что можно иметь перед и .
...