Всем доброго времени суток. В этой статье с подачи одного из пользователей рассматриваются теги article и section, которые появились в HTML 5. Рассматривается их влияние на поведение экранных дикторов на веб-страницах.
В комментариях к одной из моих статей пользователь ozgg задал следующий вопрос:
И предложил небольшой кусок кода, в котором фигурируют теги article и section. Если раньше я сталкивался с тегом article и радовался его присутствию на странице, особенно если оно было к месту, то вот с тегом section я столкнулся впервые, и оно не мудрено, потому что этот тег ничем себя в большинстве случаев не проявляет. Я несколько дней рылся в интернете, нашёл достаточно много статей про теги article и section. Выяснилось, что эти элементы блочные и служат для выделения какой-либо части контента законченной по смыслу. Приводятся самые разнообразные примеры по использованию этих тегов. Тут и там всплывает информация, что эти теги должны «как-то обрабатываться скринридерами». Очень интересное определение «как-то». Информации о том, как же всё-таки они должны обрабатываться я нигде не нашёл (вполне возможно, что плохо искал). Вот хорошая статья на хабре, где написано не только про эти теги. И опять же в конце статьи упоминается об обработке этих тегов скринридерами. Раз нет информации о том какое влияние эти теги оказывают на поведение скринридеров на странице, то основной смысл применения этих тегов отпадает. Ведь какую-то законченную по смыслу часть можно выделить и тегом div. А зачем заморачиваться с новыми тегами, если старые прекрасно работают? Когда не понимаешь, как та или иная вещь влияет на другие вещи и взаимодействует с ними, как-то затруднительно применять их в своём труде.
Тег article предназначен для выделения каких-то областей сайта, в которых находится завершённый по смыслу контент. Он является блочным элементом и способен заменить в некоторых случаях тег div. Когда jaws встречает открывающий тег article, он выдаёт сообщение «Статья». Так экранный диктор (далее по тексту ЭД) оповещает о начале какого-то осмысленного блока информации. Поскольку тег блочный и ЭД воспринимает его как некую имеющую смысл и важность для пользователя область, он позволяет быстро к ней перемещаться при помощи клавиши «R». Вот почему я радуюсь, когда нахожу такую область на странице, я могу спокойненько миновать всё мне не нужное и перейти к нужному. Это один из больших плюсов этого тега, конечно он актуален только в том случае, когда тег стоит в нужном месте. А сообщение ЭД не двусмысленно намекает на преимущественное использование этого тега для выделения статей или какого-то блока с текстовой информацией. А когда ЭД встречает закрывающий тег, он выдаёт сообщение «Конец статья». Да, тут ещё и кривоватый перевод.
Выше приведённая информация актуальна для jaws версий 15 и 16, возможно работает и на более старших, но я точно не помню. А вот ЭД NVDA немного меня разочаровал, он вообще никаким образом не реагирует на теги article и section. Возможно он будет реагировать в новых версиях, но версия 2015.2 не демонстрирует реакции.
Тег section никаким образом не проявляется при линейной навигации по странице, как будто его там и нет вовсе. Этот тег служит, как понятно из его названия, для выделения секций/областей на сайте. Перемещаться к нему при помощи средств быстрой навигации тоже невозможно. В общем получается какой-то бессмысленный тег, но на самом деле этот тег оказывает на пару с тегом article схожее влияние на теги заголовков при их обработке ЭД.
Поскольку темой статьи, к которой был написан комментарий, были «Заголовки», то имеет определённый смысл рассматривать влияние этих тегов именно на заголовки. Когда я говорю про влияние тегов на поведение других тегов, я имею в виду поведение ЭД при обработке совокупности этих тегов. Эффект, который оказывают теги article и section, проявляется только при одном единственном сценарии взаимодействия ЭД. Тут нужно пояснить, что у ЭД jaws есть три сценария взаимодействия с тегами заголовков. Одним из наиболее распространённых является использование «списка заголовков», который вызывается по insert+F6. Этот инструмент очень удобен при большом количестве заголовков на странице и становится ещё удобнее, когда страница знакома. Он позволяет отсортировать заголовки в алфавитном порядке или по структуре страницы, отфильтровать заголовки по уровням. А также позволяет производить быстрый поиск заголовка по мере ввода первых букв. Вторым сценарием взаимодействия является сплошное чтение заголовков без сортировки и фильтрации при помощи клавиши «H». То есть при нажатии этой клавиши курсор ЭД прыгает на ближайший заголовок, а при дальнейших нажатиях он прыгает на все следующие заголовки по странице, идя сверху вниз. Этой же кнопкой можно вообще определить наличие заголовков на странице, если таковых нет, то будет выведено сообщение «На этой странице нет заголовков». Третьим и наиболее редким способом является использование клавиш от «1» до «6» на основном блоке клавиатуры. Каждая клавиша работает таким же образом, как и «H», но с дополнительным фильтром по уровню. То есть клавиша «1» позволяет нам перемещаться по всем заголовкам только первого уровня, а клавиша «4» по всем заголовкам только четвёртого уровня. Вот с помощью третьего сценария и можно использовать особенности навигации по заголовкам внутри тегов section и article. При использовании первых двух сценариев теги article и section не учитываются никаким образом.
Повторюсь, ниже приведённые правила актуальны только для jaws и только при использовании третьего сценария взаимодействия с заголовками.
Возможности:
1. Можно перемещаться по второму и следующим уровням заголовков внутри раздела. То есть каждый тег article и section является своеобразным ограничителем, через который нельзя перешагнуть по второму, третьему и другим уровням заголовков. Исключением является только первый уровень, по нему можно ходить везде и всегда, в любом направлении.
2. Вероятно, это баг, но такое поведение присутствует. Нельзя перешагивать через один уровень. То есть если курсор находится на первом уровне заголовка, невозможно перейти сразу к третьему уровню заголовка или со второго уровня шагнуть на четвёртый. Очень глупое поведение.
Возможности:
3. Ограничитель срабатывает, если раздел начинается с заголовка уровня один. На примере, невозможно попасть в секцию по второму или третьему уровню сверху, но можно попасть снизу, минуя и article, и section.
Возможности:
4. Ограничитель срабатывает, если каждый раздел начинается с заголовка высокого уровня и за ним следуют два или более заголовков более низкого уровня. На примере, можно перемещаться по второму уровню из секции в секцию, но нельзя из одной секции перешагнуть в другую с третьего уровня.
Вот и все основные правила обработки, выявленные опытным путём.
Так же нужно обратить внимание, что правило «Нельзя перешагивать через один уровень» и «Ограничитель срабатывает, если каждый раздел начинается с заголовка высокого уровня и за ним следуют два или более заголовков более низкого уровня» актуальны и без каких-либо тегов.
То есть можно делать так:
Только можно оставить тег article, потому что эта структура больше похожа на оформление большой статьи.
Практическое предназначение тега article в общем понятно, но повторюсь. Он служит для выделения какой-то части контента законченной по смыслу и похожей на статью, заметку или параграф. При помощи средств быстрой навигации можно переходить к области выделенной этим тегом. Так же им можно выделять описания товара в интернет-магазинах или использовать таким образом:
Такое использование позволяет быстро переходить в каталоге к нужным статьям и при этом пользователь постоянно информируется о начале и конце статьи, когда он решил ознакомится с этой страницей классическим способом.
Тег section, как выяснилось (см. комментарии), обладает куда большими возможностями, чем тег article. При помощи этого тега можно создавать произвольные области с определённым названием. Такую возможность даёт атрибут aria-label, про который я совсем забыл ввиду крайне редкого его использования в природе интернета. Такая область доступна для средств быстрой навигации, к ней можно быстро переместиться с помощью клавиши «R». Область применения такого тега широка.
Вот пример:
На слух в браузере эта структура воспринимается так:
Таким образом можно оформлять записи в блоге. Такое оформление позволит быстро перемещаться к интересующим областям
Пускай в этой статье приведены не самые полезные сведения, но я надеюсь, что эта информация поможет вам создать более удобный веб-сайт.
Благодарю за внимание.
Я очень благодарен ozgg, без него этой бы статьи не было и тайна тега section не была бы раскрыта.
В комментариях к одной из моих статей пользователь ozgg задал следующий вопрос:
Сейчас вроде как рекомендуют вместо явных уровней заголовков просто делать вложенные секции, которые всегда в качестве первого заголовка используют h1. С такой вложенностью читалки построят правильную иерархию?
И предложил небольшой кусок кода, в котором фигурируют теги article и section. Если раньше я сталкивался с тегом article и радовался его присутствию на странице, особенно если оно было к месту, то вот с тегом section я столкнулся впервые, и оно не мудрено, потому что этот тег ничем себя в большинстве случаев не проявляет. Я несколько дней рылся в интернете, нашёл достаточно много статей про теги article и section. Выяснилось, что эти элементы блочные и служат для выделения какой-либо части контента законченной по смыслу. Приводятся самые разнообразные примеры по использованию этих тегов. Тут и там всплывает информация, что эти теги должны «как-то обрабатываться скринридерами». Очень интересное определение «как-то». Информации о том, как же всё-таки они должны обрабатываться я нигде не нашёл (вполне возможно, что плохо искал). Вот хорошая статья на хабре, где написано не только про эти теги. И опять же в конце статьи упоминается об обработке этих тегов скринридерами. Раз нет информации о том какое влияние эти теги оказывают на поведение скринридеров на странице, то основной смысл применения этих тегов отпадает. Ведь какую-то законченную по смыслу часть можно выделить и тегом div. А зачем заморачиваться с новыми тегами, если старые прекрасно работают? Когда не понимаешь, как та или иная вещь влияет на другие вещи и взаимодействует с ними, как-то затруднительно применять их в своём труде.
Что я знал про тег article
Тег article предназначен для выделения каких-то областей сайта, в которых находится завершённый по смыслу контент. Он является блочным элементом и способен заменить в некоторых случаях тег div. Когда jaws встречает открывающий тег article, он выдаёт сообщение «Статья». Так экранный диктор (далее по тексту ЭД) оповещает о начале какого-то осмысленного блока информации. Поскольку тег блочный и ЭД воспринимает его как некую имеющую смысл и важность для пользователя область, он позволяет быстро к ней перемещаться при помощи клавиши «R». Вот почему я радуюсь, когда нахожу такую область на странице, я могу спокойненько миновать всё мне не нужное и перейти к нужному. Это один из больших плюсов этого тега, конечно он актуален только в том случае, когда тег стоит в нужном месте. А сообщение ЭД не двусмысленно намекает на преимущественное использование этого тега для выделения статей или какого-то блока с текстовой информацией. А когда ЭД встречает закрывающий тег, он выдаёт сообщение «Конец статья». Да, тут ещё и кривоватый перевод.
Выше приведённая информация актуальна для jaws версий 15 и 16, возможно работает и на более старших, но я точно не помню. А вот ЭД NVDA немного меня разочаровал, он вообще никаким образом не реагирует на теги article и section. Возможно он будет реагировать в новых версиях, но версия 2015.2 не демонстрирует реакции.
Тег section
Тег section никаким образом не проявляется при линейной навигации по странице, как будто его там и нет вовсе. Этот тег служит, как понятно из его названия, для выделения секций/областей на сайте. Перемещаться к нему при помощи средств быстрой навигации тоже невозможно. В общем получается какой-то бессмысленный тег, но на самом деле этот тег оказывает на пару с тегом article схожее влияние на теги заголовков при их обработке ЭД.
Немного о заголовках
Поскольку темой статьи, к которой был написан комментарий, были «Заголовки», то имеет определённый смысл рассматривать влияние этих тегов именно на заголовки. Когда я говорю про влияние тегов на поведение других тегов, я имею в виду поведение ЭД при обработке совокупности этих тегов. Эффект, который оказывают теги article и section, проявляется только при одном единственном сценарии взаимодействия ЭД. Тут нужно пояснить, что у ЭД jaws есть три сценария взаимодействия с тегами заголовков. Одним из наиболее распространённых является использование «списка заголовков», который вызывается по insert+F6. Этот инструмент очень удобен при большом количестве заголовков на странице и становится ещё удобнее, когда страница знакома. Он позволяет отсортировать заголовки в алфавитном порядке или по структуре страницы, отфильтровать заголовки по уровням. А также позволяет производить быстрый поиск заголовка по мере ввода первых букв. Вторым сценарием взаимодействия является сплошное чтение заголовков без сортировки и фильтрации при помощи клавиши «H». То есть при нажатии этой клавиши курсор ЭД прыгает на ближайший заголовок, а при дальнейших нажатиях он прыгает на все следующие заголовки по странице, идя сверху вниз. Этой же кнопкой можно вообще определить наличие заголовков на странице, если таковых нет, то будет выведено сообщение «На этой странице нет заголовков». Третьим и наиболее редким способом является использование клавиш от «1» до «6» на основном блоке клавиатуры. Каждая клавиша работает таким же образом, как и «H», но с дополнительным фильтром по уровню. То есть клавиша «1» позволяет нам перемещаться по всем заголовкам только первого уровня, а клавиша «4» по всем заголовкам только четвёртого уровня. Вот с помощью третьего сценария и можно использовать особенности навигации по заголовкам внутри тегов section и article. При использовании первых двух сценариев теги article и section не учитываются никаким образом.
Правила взаимодействия курсора ЭД с заголовками внутри тегов
Повторюсь, ниже приведённые правила актуальны только для jaws и только при использовании третьего сценария взаимодействия с заголовками.
<h1>Уровень 1 вне статьи</h1>
<p>Какой-то текст</p>
<h2>Уровень 2 вне статьи</h2>
<p>Какой-то текст</p>
<h2>Уровень 2.2 вне статьи</h2>
<p>Какой-то текст</p>
<h3>Уровень 3.2 вне статьи</h3>
<p>Какой-то текст</p>
<article>
<h1>Какой-то заголовок 1 внутри статьи</h1>
<p>Какой-то текст</p>
<h2>Какой-то заголовок 2 внутри статьи</h2>
<p>Какой-то текст</p>
<h3>Какой-то заголовок 3 внутри статьи</h3>
<p>Какой-то текст</p>
<section>
<h1>Какой-то заголовок 1 внутри секции</h1>
<p>Какой-то текст</p>
<h2>Какой-то заголовок 2 внутри секции</h2>
<p>Какой-то текст</p>
<h3>Какой-то заголовок 3 внутри секции</h3>
<p>Какой-то текст</p>
</section>
</article>
<h1>Какой-то заголовок 1 за статёй</h1>
<p>Какой-то текст</p>
<h2>Какой-то заголовок 2 за статёй</h2>
<p>Какой-то текст</p>
<h3>Какой-то заголовок 3 за статёй</h3>
<p>Какой-то текст</p>
Возможности:
1. Можно перемещаться по второму и следующим уровням заголовков внутри раздела. То есть каждый тег article и section является своеобразным ограничителем, через который нельзя перешагнуть по второму, третьему и другим уровням заголовков. Исключением является только первый уровень, по нему можно ходить везде и всегда, в любом направлении.
2. Вероятно, это баг, но такое поведение присутствует. Нельзя перешагивать через один уровень. То есть если курсор находится на первом уровне заголовка, невозможно перейти сразу к третьему уровню заголовка или со второго уровня шагнуть на четвёртый. Очень глупое поведение.
<h1>Уровень 1 вне статьи</h1>
<p>Какой-то текст</p>
<h2>Уровень 2 вне статьи</h2>
<p>Какой-то текст</p>
<article>
<h3>Какой-то заголовок 1 внутри статьи</h3>
<p>Какой-то текст</p>
<h2>Какой-то заголовок 2 внутри статьи</h2>
<p>Какой-то текст</p>
<h2>Какой-то заголовок 3 внутри статьи</h2>
<p>Какой-то текст</p>
<section>
<h1>Какой-то заголовок 1 внутри секции</h1>
<p>Какой-то текст</p>
<h2>Какой-то заголовок 2 внутри секции</h2>
<p>Какой-то текст</p>
<h3>Какой-то заголовок 3 внутри секции</h3>
<p>Какой-то текст</p>
</section>
</article>
<h3>Какой-то заголовок 1 за статёй</h3>
<p>Какой-то текст</p>
<h2>Какой-то заголовок 2 за статёй</h2>
<p>Какой-то текст</p>
<h3>Какой-то заголовок 3 за статёй</h3>
<p>Какой-то текст</p>
Возможности:
3. Ограничитель срабатывает, если раздел начинается с заголовка уровня один. На примере, невозможно попасть в секцию по второму или третьему уровню сверху, но можно попасть снизу, минуя и article, и section.
<article>
<h1>Какой-то заголовок 1 внутри статьи</h1>
<p>Какой-то текст</p>
<section>
<h2>Какой-то заголовок 1 внутри секции</h2>
<h3>Какой-то заголовок 2 внутри секции</h3>
<h3>Какой-то заголовок 3 внутри секции</h3>
</section>
<section>
<h2>Какой-то заголовок 1 внутри секции</h2>
<h3>Какой-то заголовок 2 внутри секции</h3>
<h3>Какой-то заголовок 3 внутри секции</h3>
<h3>Какой-то заголовок 4 внутри секции</h3>
</section>
<section>
<h2>Какой-то заголовок 1 внутри секции</h2>
<h3>Какой-то заголовок 2 внутри секции</h3>
<h3>Какой-то заголовок 3 внутри секции</h3>
<h3>Какой-то заголовок 4 внутри секции</h3>
</section>
</article>
Возможности:
4. Ограничитель срабатывает, если каждый раздел начинается с заголовка высокого уровня и за ним следуют два или более заголовков более низкого уровня. На примере, можно перемещаться по второму уровню из секции в секцию, но нельзя из одной секции перешагнуть в другую с третьего уровня.
Вот и все основные правила обработки, выявленные опытным путём.
Так же нужно обратить внимание, что правило «Нельзя перешагивать через один уровень» и «Ограничитель срабатывает, если каждый раздел начинается с заголовка высокого уровня и за ним следуют два или более заголовков более низкого уровня» актуальны и без каких-либо тегов.
То есть можно делать так:
<h1>Какой-то заголовок 1 внутри статьи</h1>
<p>Какой-то текст</p>
<h2>Какой-то заголовок 1 внутри секции</h2>
<h3> Какой-то заголовок 2 внутри секции</h3>
<h3>Какой-то заголовок 3 внутри секции</h3>
<h2>Какой-то заголовок 1 внутри секции</h2>
<h3>Какой-то заголовок 2 внутри секции</h3>
<h3>Какой-то заголовок 3 внутри секции</h3>
<h3>Какой-то заголовок 4 внутри секции</h3>
> <h2>Какой-то заголовок 1 внутри секции</h2>
<h3>Какой-то заголовок 2 внутри секции</h3>
<h3>Какой-то заголовок 3 внутри секции</h3>
<h3>Какой-то заголовок 4 внутри секции</h3>
Только можно оставить тег article, потому что эта структура больше похожа на оформление большой статьи.
Практическое заключение
Практическое предназначение тега article в общем понятно, но повторюсь. Он служит для выделения какой-то части контента законченной по смыслу и похожей на статью, заметку или параграф. При помощи средств быстрой навигации можно переходить к области выделенной этим тегом. Так же им можно выделять описания товара в интернет-магазинах или использовать таким образом:
<h1>Каталог статей </h1>
<p>В нашем каталоге… </p>
<article>
<p>Статья 1</p >
<p>В этой статье приводятся…</p>
<a>Читать дальше </a>
<a>Коменнтарии </a>
<a>Поделится</a>
</article>
<article>
<p>Статья 2</p >
<p>В этой статье приводятся…</p>
<a>Читать дальше </a>
<a>Коменнтарии </a>
<a>Поделится</a>
</article>
Такое использование позволяет быстро переходить в каталоге к нужным статьям и при этом пользователь постоянно информируется о начале и конце статьи, когда он решил ознакомится с этой страницей классическим способом.
Тег section, как выяснилось (см. комментарии), обладает куда большими возможностями, чем тег article. При помощи этого тега можно создавать произвольные области с определённым названием. Такую возможность даёт атрибут aria-label, про который я совсем забыл ввиду крайне редкого его использования в природе интернета. Такая область доступна для средств быстрой навигации, к ней можно быстро переместиться с помощью клавиши «R». Область применения такого тега широка.
Вот пример:
<article>
<h1>Заголовок</h1>
<section aria-label="Информация об авторе">
<p>Имя автора</p>
</section>
<section aria-label="Текст статьи">
<p>Соответственно текст статьи</p>
</section>
<section aria-label="Информация о статье (рейтинг и пр.)">
<p>+2</p>
</section>
<section aria-label="Комментарии">
<p>Комментарий</p>
<section aria-label="Информация об авторе комментария">
</section>
</section>
</article>
На слух в браузере эта структура воспринимается так:
Статья
Заголовок уровня один заголовок
Информация об авторе область
Имя автора
Информация об авторе конец область
Текст статьи область
Соответственно текст статьи
Текст статьи конец область
Информация о статье рейтинг и пр область
Два (у меня отключено чтение знаков припенания и прочих символов)
Информация о статье рейтинг и пр конец область
Комментарии область
Комментарий
Информация об авторе пустая область
Комментарии конец область
Конец статья
Таким образом можно оформлять записи в блоге. Такое оформление позволит быстро перемещаться к интересующим областям
Пускай в этой статье приведены не самые полезные сведения, но я надеюсь, что эта информация поможет вам создать более удобный веб-сайт.
Благодарю за внимание.
Благодарности
Я очень благодарен ozgg, без него этой бы статьи не было и тайна тега section не была бы раскрыта.
Комментарии (9)
Tseikovets
01.08.2015 13:26Изложенная в этой статье информация некорректна как с пользовательской, так и с разработческой точки зрения. С разработческой, пожалуй, даже вредна, так как содержит кучу фактических ошибок и, как следствие, неправильных рекомендаций и примеров кода.
На мой взгляд, вы уже третью статью подряд просто спекулируете на инвалидной тематике, при этом имея уровень технических знаний, не соответствующий амбициям и заявленному уровню пафоса.
Тег section никаким образом не проявляется при линейной навигации по странице, как будто его там и нет вовсе.
Он всего лишь относится к тем семантическим областям, которые для обработки экранными чтецами должны получить явную роль в соответствии с WAI-ARIA. У ряда новых семантических контейнеров HTML5 и ролей WAI-ARIA есть прямые соответствия. В частности, section соответствует роли region. Также он проявляется при использовании атрибута aria-label, но использование только aria-label не является решением, универсальным для всех экранных чтецов.
Третьим и наиболее редким способом является использование клавиш от «1» до «6» на основном блоке клавиатуры… Вот с помощью третьего сценария и можно использовать особенности навигации по заголовкам внутри тегов section и article.
Это полнейшая глупость: навигация по семантическим областям и по заголовкам абсолютно никак не связаны. Это два абсолютно независимых слоя навигации: экранный чтец перемещает по заголовкам без какой-либо привязки к семантическим областям и наоборот.
1. Можно перемещаться по второму и следующим уровням заголовков внутри раздела. То есть каждый тег article и section является своеобразным ограничителем, через который нельзя перешагнуть по второму, третьему и другим уровням заголовков. Исключением является только первый уровень, по нему можно ходить везде и всегда, в любом направлении.
Вы вообще не понимаете, что вы пишите: ограничение обусловлено не наличием семантических зон, а тем, что конкретно ваш экранный чтец JAWS не может перемещаться к следующему заголовку определённого уровня, если для этого нужно перескочить заголовок более высокого уровня. Если из вашего первого листинга убрать семантическую разметку, то будет всё тоже самое, потому что навигация блокируется схемой структурной разметки заголовков, а не семантической разметкой областей. Именно этим и объясняется исключение для заголовков уровня 1, потому что для них более высокого уровня не существует.
Вы сами заблокировали навигацию по заголовкам уровня меньше 1 посредством того, что ограничили свои семантические зоны заголовками уровня 1 в начале и в конце. Если бы после семантической зоны шёл сразу не заголовок уровня 1, а, например, 2, то вы без проблем проскочили бы до него, выйдя за пределы семантической зоны.
Сами по себе семантические зоны никак не запирают навигацию по заголовкам внутри себя. Ещё раз повторяю, это абсолютно независимые слои навигации, существующие параллельно.
2. Вероятно, это баг, но такое поведение присутствует. Нельзя перешагивать через один уровень. То есть если курсор находится на первом уровне заголовка, невозможно перейти сразу к третьему уровню заголовка или со второго уровня шагнуть на четвёртый. Очень глупое поведение.
Это не баг, а фича. Так это работает, начиная с JAWS версии 10, а в JAWS 9 и ниже навигация по заголовкам определённого уровня была абсолютно сквозная. Для справки, JAWS 10 вышел в 2008 году, так что странно, что вы это только сейчас заметили и так удивились.
3. Ограничитель срабатывает, если раздел начинается с заголовка уровня один. На примере, невозможно попасть в секцию по второму или третьему уровню сверху, но можно попасть снизу, минуя и article, и section.
Все ограничители являются исключительно следствием ваших кривых примеров.
Вот вам альтернативный пример:
<h2>Заголовок</h2> <p>текст</p> <article> <h2>Заголовок</h2> <p>текст</p> </article> <section> <h2>Заголовок</h2> <p>Текст</p> </section> <h2>Заголовок</h2> <p>Текст</p>
Можете убедиться — никаких «ограничителей» нет, потому что все заголовки одного уровня и навигация по ним будет абсолютно без какой-либо связи с семантическими областями насквозь по всей странице. Если бы были заголовки уровня 6, то было бы тоже самое, главное самому не запирать себя в семантических областях.
Вы плохо изучили вопрос, высосали из пальца некорректные примеры и сами себя ввели ими в заблуждение, плюс пришли ещё сюда это рассказывать, поучая других.
4. Ограничитель срабатывает, если каждый раздел начинается с заголовка высокого уровня и за ним следуют два или более заголовков более низкого уровня. На примере, можно перемещаться по второму уровню из секции в секцию, но нельзя из одной секции перешагнуть в другую с третьего уровня.
Мне вообще не понятно ваше настойчивое желание как-то связать тему структурной и семантической разметок. Это две параллельные технологии, которые друг на друга вообще не оказывают никакого влияния.
Вот и все основные правила обработки, выявленные опытным путём.
В действительности, тут было всего лишь одно правило: конкретно ваша программа экранного доступа имеет особенность, заключающуюся в том, что при навигации по заголовкам конкретного уровня она не переходит к следующему заголовку определённого уровня, если для этого надо перешагнуть заголовок более высокого уровня. Вот и всё, к семантическим областям это не имеет абсолютно никакого отношения, а главное не распространяется на программы чтения экрана в целом.
Практическое предназначение тега article в общем понятно, но повторюсь. Он служит для выделения какой-то части контента законченной по смыслу и похожей на статью, заметку или параграф. При помощи средств быстрой навигации можно переходить к области выделенной этим тегом.
Для выделения основного контента предпочтительнее использовать контейнер main и/или блок с ролью main, а article включать уже в него постольку поскольку, потому что тот же JAWS имеет отдельную команду для перехода сразу к main, тогда как article доступен только через последовательный перебор.
Так же им можно выделять описания товара в интернет-магазинах или использовать таким образом:
<h1>Каталог статей </h1> <p>В нашем каталоге… </p> <article> <p>Статья 1</p > <p>В этой статье приводятся…</p> <a>Читать дальше </a> <a>Коменнтарии </a> <a>Поделится</a> </article>
Ну это как раз скорей пример некорректного использования article. В подобных случаях более уместен section. Более того, когда используется несколько семантических областей с одинаковой ролью, следует добавлять к ним aria-label.
<section aria-label="Информация об авторе"> <p>Имя автора</p> </section>
Что же вы творите!? Вы бы хоть тестировали свои листинги.
Вы посмотрите на этот свой пример из под NVDA. Там это будет читаться как поле редактирование.
Семантические зоны всегда надо страховать явным определением роли, потому что WAI-ARIA стабилизировали меньше года назад.
И это уже не говоря о том, что в этом случае скорей уместно использовать кон
ozgg
О, спасибо.
Вообще, когда я искал, как же «идеологически верно» стоит применять секции, там как раз и было упоминание про разделение статей на логические блоки. Если статья длинная, то каждый раздел предлагалось как вариант поместить в свою секцию. Комментарии тоже находятся в своей секции.
А если в section добавить атрибуты из серии aria-label, это даст что-то полезное для случая, когда визуально легко отличить одну часть от другой, а при просмотре исходника страницы это можно понять только по классам? Что-то вроде того:
Verdoga Автор
Так вот в чём дело!!! А я дурень! Забыл про этот атрибут совсем! Я его очень давно не встречал.
Вот в вашем примере используются теги header и footer. Я только без классов напишу.
Header и так нужно использовать в шапке сайта а footer для подвала, использовать их в комментариях и в статьях не нужно, их можно заменить, как выяснилось, следующими конструкциями.
На слух выглядит примерно так:
Статья
Заголовок уровня один заголовок
Информация об авторе область
Имя автора
Информация об авторе конец область
Текст статьи область
Соответственно текст статьи
Текст статьи конец область
Информация о статье рейтинг и пр область
Два (у меня отключено чтение знаков припенания и прочих символов)
Информация о статье рейтинг и пр конец область
Комментарии область
Комментарий
Информация об авторе пустая область
Комментарии конец область
Конец статья
Verdoga Автор
То есть при помощи безымянной и невидимой секции да с помощью атрибута можно создать область со своим именем.
ozgg
И ещё вопрос назрел: дружат ли читалки с разметкой schema.org? Ведь по сути как раз и получается, что такая разметка отвечает только за семантику, и было бы логично и её подцеплять наряду с атрибутами aria.
Verdoga Автор
Увы, я не знаком с этим проектом и не очень понял его смысл. Приведите кусок кода и посмотрим на результат.
ozgg
В основном такая разметка используется поисковыми системами, чтобы сразу отображать контент в понятном и более удобном для пользователей виде. Пример вот:
Verdoga Автор
Смысл мне теперь понятен, но никакой реакции со стороны читалки. Такая разметка более полезна различным парсерам и роботам, которые из неё могут извлечь различную полезную информацию, для читалок же требуется разметка с помощью которой они бы смогли предоставить возможность быстро передвигаться по страницам. А учитывая количество элементов, которые можно описать этой разметкой, тут никаких клавиш и комбинаций не хватит.
lavkasnov
schema.org не понимают читалки и вряд ли будут понимать по нескольким причинам:
— если использован json-ld, который может стоять черти где
— если использован itemref, то он может указывать на другую часть документа
— одновременное использование классической разметки и тегов meta и link, то что из этого считать приоритетным