Теги заголовка для идентификации элементов структуры макета?

Question

Я пытаюсь применить лучшую семантику и доступность к моим веб-страницам.

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

Задача № 1

Я бы хотел разбить его, используя теги заголовков (<h1>, <h2> и т. Д.) Для обозначения разделов «Боковая панель» и «Нижний колонтитул». Я не уверен, что это правильное использование тегов заголовков. Хотя эти разделы технически содержательны, кажется немного странным видеть их на том же уровне иерархии, что и заголовок статьи.

Задача № 2

Я также хотел бы оставить эти теги заголовков для идентификации элементов структуры макета невидимыми, но все же доступными для тех, кто в этом нуждается. Использование «видимости: скрыто» оставляет нежелательный заполнитель. Использование «display: none», по-видимому, приводит к желаемому эффекту, но я видел сообщения, которые предполагают, что он может не работать в реальных программах чтения с экрана. Теперь я испытываю желание использовать трюк «position: absolute» и отрицательный «text-indent», чтобы вырвать элемент из нормального потока и вытолкнуть его за пределы экрана.

Answer 1

Пока это мои заметки.

Некоторые ресурсы:

• Глобальная структура документа HTML | W3C
• Использование h1-h6 для определения заголовков | WCAG 2.0
• Использование CSS, чтобы скрыть часть текста ссылки | WCAG 2.0
• Невидимый контент только для пользователей программы чтения с экрана | WebAIM
• Будучи услышанным, но не увиденным | Вопросы доступа
• Screen Reader Visibility | CSS-Обсудить
• Результаты теста чтения с экрана | Вопросы доступа

Некоторые примеры в дикой природе:

w3.org / WAI / (h3.no-display)

position: absolute;
left: -999px;
width: 990px;

diveintoaccessibility.org (h2.invisibletitle)

display: none;

standard-schmandards.com (h1)

position: absolute;
left: -1000em;
margin-left: -1000em;
display: block;
height: 0;
overflow: hidden;

yahoo.com (h3.a11y)

position: absolute;
left: -5000px;
width: 100px;

my.yahoo.com (h3.a11y)

position: absolute;
height: 0;
overflow: hidden;

gmail.com (h2.u4w5cc)

position: absolute;
height: 9px;
left: 0;
top: -10000px;

target.com (h1.offscreen)

position: absolute;
left: -99em;
width: 90em;
overflow: hidden;

Answer 2

Я видел много сайтов, использующих тег <h3>, используемый в боковых панелях и колонтитулах. Таким образом, вы также можете следовать тому же. Теги <h1> и <h2> обычно используются только один раз на веб-странице. <h1> для заголовка и <h2> для слогана.

Хорошо ... для второй проблемы вы можете использовать JavaScript для переключения свойства display.

Answer 3

Вы можете использовать элемент hr для разделения разделов, например:

<div id="header"></div>
<hr />
<div id="content"></div>
<hr />
<div id="sidebar"></div>
<hr />
<div id="footer"></div>

Кроме того, вы можете использовать атрибут title в элементах hr для описания следующего раздела. Но я не знаю, как это поддерживается.