Всем доброго времени суток. В этой статье с подачи одного из пользователей рассматриваются теги article и section, которые появились в HTML 5. Рассматривается их влияние на поведение экранных дикторов на веб-страницах.
В комментариях к одной из моих статей пользователь ozgg задал следующий вопрос:
Сейчас вроде как рекомендуют вместо явных уровней заголовков просто делать вложенные секции, которые всегда в качестве первого заголовка используют h1. С такой вложенностью читалки построят правильную иерархию?
И предложил небольшой кусок кода, в котором фигурируют теги 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 вне статьи
Какой-то текст
Уровень 2 вне статьи
Какой-то текст
Уровень 2.2 вне статьи
Какой-то текст
Уровень 3.2 вне статьи
Какой-то текст
Какой-то заголовок 1 внутри статьи
Какой-то текст
Какой-то заголовок 2 внутри статьи
Какой-то текст
Какой-то заголовок 3 внутри статьи
Какой-то текст
Какой-то заголовок 1 внутри секции
Какой-то текст
Какой-то заголовок 2 внутри секции
Какой-то текст
Какой-то заголовок 3 внутри секции
Какой-то текст
Какой-то заголовок 1 за статёй
Какой-то текст
Какой-то заголовок 2 за статёй
Какой-то текст
Какой-то заголовок 3 за статёй
Какой-то текст
Возможности:
1. Можно перемещаться по второму и следующим уровням заголовков внутри раздела. То есть каждый тег article и section является своеобразным ограничителем, через который нельзя перешагнуть по второму, третьему и другим уровням заголовков. Исключением является только первый уровень, по нему можно ходить везде и всегда, в любом направлении.
2. Вероятно, это баг, но такое поведение присутствует. Нельзя перешагивать через один уровень. То есть если курсор находится на первом уровне заголовка, невозможно перейти сразу к третьему уровню заголовка или со второго уровня шагнуть на четвёртый. Очень глупое поведение.
Уровень 1 вне статьи
Какой-то текст
Уровень 2 вне статьи
Какой-то текст
Какой-то заголовок 1 внутри статьи
Какой-то текст
Какой-то заголовок 2 внутри статьи
Какой-то текст
Какой-то заголовок 3 внутри статьи
Какой-то текст
Какой-то заголовок 1 внутри секции
Какой-то текст
Какой-то заголовок 2 внутри секции
Какой-то текст
Какой-то заголовок 3 внутри секции
Какой-то текст
Какой-то заголовок 1 за статёй
Какой-то текст
Какой-то заголовок 2 за статёй
Какой-то текст
Какой-то заголовок 3 за статёй
Какой-то текст
Возможности:
3. Ограничитель срабатывает, если раздел начинается с заголовка уровня один. На примере, невозможно попасть в секцию по второму или третьему уровню сверху, но можно попасть снизу, минуя и article, и section.
Какой-то заголовок 1 внутри статьи
Какой-то текст
Какой-то заголовок 1 внутри секции
Какой-то заголовок 2 внутри секции
Какой-то заголовок 3 внутри секции
Какой-то заголовок 1 внутри секции
Какой-то заголовок 2 внутри секции
Какой-то заголовок 3 внутри секции
Какой-то заголовок 4 внутри секции
Какой-то заголовок 1 внутри секции
Какой-то заголовок 2 внутри секции
Какой-то заголовок 3 внутри секции
Какой-то заголовок 4 внутри секции
Возможности:
4. Ограничитель срабатывает, если каждый раздел начинается с заголовка высокого уровня и за ним следуют два или более заголовков более низкого уровня. На примере, можно перемещаться по второму уровню из секции в секцию, но нельзя из одной секции перешагнуть в другую с третьего уровня.
Вот и все основные правила обработки, выявленные опытным путём.
Так же нужно обратить внимание, что правило «Нельзя перешагивать через один уровень» и «Ограничитель срабатывает, если каждый раздел начинается с заголовка высокого уровня и за ним следуют два или более заголовков более низкого уровня» актуальны и без каких-либо тегов.
То есть можно делать так:
Какой-то заголовок 1 внутри статьи
Какой-то текст
Какой-то заголовок 1 внутри секции
Какой-то заголовок 2 внутри секции
Какой-то заголовок 3 внутри секции
Какой-то заголовок 1 внутри секции
Какой-то заголовок 2 внутри секции
Какой-то заголовок 3 внутри секции
Какой-то заголовок 4 внутри секции
> Какой-то заголовок 1 внутри секции
Какой-то заголовок 2 внутри секции
Какой-то заголовок 3 внутри секции
Какой-то заголовок 4 внутри секции
Только можно оставить тег article, потому что эта структура больше похожа на оформление большой статьи.
Практическое предназначение тега article в общем понятно, но повторюсь. Он служит для выделения какой-то части контента законченной по смыслу и похожей на статью, заметку или параграф. При помощи средств быстрой навигации можно переходить к области выделенной этим тегом. Так же им можно выделять описания товара в интернет-магазинах или использовать таким образом:
Каталог статей
В нашем каталоге…
Статья 1
В этой статье приводятся…
Читать дальше
Коменнтарии
Поделится
Статья 2
В этой статье приводятся…
Читать дальше
Коменнтарии
Поделится
Такое использование позволяет быстро переходить в каталоге к нужным статьям и при этом пользователь постоянно информируется о начале и конце статьи, когда он решил ознакомится с этой страницей классическим способом.
Тег section, как выяснилось (см. комментарии), обладает куда большими возможностями, чем тег article. При помощи этого тега можно создавать произвольные области с определённым названием. Такую возможность даёт атрибут aria-label, про который я совсем забыл ввиду крайне редкого его использования в природе интернета. Такая область доступна для средств быстрой навигации, к ней можно быстро переместиться с помощью клавиши «R». Область применения такого тега широка.
Вот пример:
Заголовок
Имя автора
Соответственно текст статьи
+2
Комментарий
На слух в браузере эта структура воспринимается так:
Статья
Заголовок уровня один заголовок
Информация об авторе область
Имя автора
Информация об авторе конец область
Текст статьи область
Соответственно текст статьи
Текст статьи конец область
Информация о статье рейтинг и пр область
Два (у меня отключено чтение знаков припенания и прочих символов)
Информация о статье рейтинг и пр конец область
Комментарии область
Комментарий
Информация об авторе пустая область
Комментарии конец область
Конец статья
Таким образом можно оформлять записи в блоге. Такое оформление позволит быстро перемещаться к интересующим областям
Пускай в этой статье приведены не самые полезные сведения, но я надеюсь, что эта информация поможет вам создать более удобный веб-сайт.
Благодарю за внимание.
Я очень благодарен ozgg, без него этой бы статьи не было и тайна тега section не была бы раскрыта.
