Какой заголовок мы должны выбрать для модальных диалогов? - PullRequest
Новая
       15

Какой заголовок мы должны выбрать для модальных диалогов?

1 голос
/ 03 марта 2020

Заголовки должны представлять структуру страницы и быть соответственно вложенными. w3.org гласит следующее:

Исключение для фиксированных разделов страницы

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

Это также верно для модальных диалогов? Они обычно не являются частью реальной структуры страницы. Какой заголовок мы должны использовать для модальных диалогов?

Bootstrap, кажется, всегда использует h5s .

В качестве примера мы используем модал bootstrap в нашем нижнем колонтитуле, который отображает дополнительную информацию о версии нашего приложения: 

<div id="v-modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Version</h5>
    </div>
    <div class="modal-body">
      <p>Copyright © 2020 Foobar</p>
      <p>Version 1.3.7124.19131</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Close</button>
    </div>
  </div>
</div>

В тесте a11y, который мы недавно получили, это было помечено как потенциальная проблема.

1 Ответ

3 голосов
/ 03 марта 2020

В связи с предстоящими изменениями в HTML 5.1 (где мы не знаем, будут ли действительными несколько H1 s, и где в пределах HTML), я всегда рекомендую один <h1> на страницу в любое время для доступность (и SEO), так как это давняя и общепринятая практика.

Это делает ответ в ваших обстоятельствах на использование <h2>.

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

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

Хотя я не уверен, почему кому-то нужен модальный режим в потоке документа, поскольку это не очень хорошая практика.

...