Доступность в Интернете и заголовки h1-h6 - должен ли весь контент находиться под этими тегами?

Question

В верхней части многих страниц нашего веб-приложения есть сообщения об ошибках и уведомления, кнопка «Сохранить» и другие кнопки, а , а затем наш тег h1 с заголовком содержимого. Делая веб-приложение доступным, когда-либо допустимо, чтобы содержимое было выше тега структуры верхнего уровня, как мы делаем здесь?

Answer 1

Как пользователь программы чтения с экрана, мне не нравится содержание выше основного заголовка. Обычно я перемещаюсь по заголовкам, поэтому пропускаю сообщение об ошибке. Лучшее решение - вывести заголовок h1 над сообщением об ошибке, а затем оставить остальные заголовки в такте, давая вам два заголовка h1.

Answer 2

Да (вы можете поместить вещи над ними). H просто означает заголовок. Вопрос в том, к чему относится заголовок.

Мое единственное предостережение: H2 не должен быть выше H1, а H3 не должен быть выше H2. Но я не думаю, что это фактическое правило. На сайтах есть меню, предупреждения, уведомления. Допустимо размещать их выше всего остального контента. Я не понимаю, как это повлияет на доступность, если ваш контент упорядочен по логике. Посмотрите на странице CSS выключен. Это выглядит логичным? Это самая важная часть доступности.

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

Answer 3

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

Answer 4

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

Чтобы вернуться к исходному вопросу, вероятно, лучше всего, чтобы они были у подножия страницы. Однако, если они скрыты с помощью CSS «display: none;» или «видимость: скрытая»; свойства, то они не будут видны большинству (возможно, всем?) программ чтения с экрана или многими другими вспомогательными технологиями, и поэтому не должно быть проблемой. Я написал довольно подробное объяснение того, почему технология доступности игнорирует такие элементы .

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

Answer 5

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

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