[Перевод] Раздоры вокруг
Тег Эта универсальность позволяет использовать теги Грубые нарушения при использовании Тег Ладно. Притормозим немного. Прежде чем дружно задирать нос перед применением тегов Конечно, всегда, когда это возможно, нужно использовать семантические элементы. Но предлагаю проявить осторожность, создавая такую атмосферу, когда может показаться, что любой вариант использования Прежде чем об этом поговорить — ненадолго вернёмся в прошлое и заглянем туда, откуда взялся тег В HTML 3.2 элементы А именно, Интересно тут то, что исходное определение тега Но, без конкретной семантики, которую могут предложить эти элементы, нет реального способа программно определить то, как этот элемент можно или нужно использовать. Как минимум — определение этого невозможно так, чтобы его результат мог бы быть интерпретирован ассистивными технологиями. Особенно — когда в HTML5 появилась поддержка WAI-ARIA, а так же — элементы для группировки контента или для разбиения его на разделы, обладающие более специфической семантикой. В HTML5 и в материалах «живого стандарта» HTML, который актуален в настоящий момент, описание элемента В HTML AAM В результате получается, что правильное применение Но кто-то может пуститься во все тяжкие, создавая собственный элемент Выше были описаны примеры неправильного использования Для начала — пусть имеется набор абзацев или других элементов, содержащих текст на языке, который отличается от основного языка документа (веб-страницы). Тут ... Следующий пример, где в применении Тут вы можете подумать о том, что это — не такой уж и удачный пример, так как применение В некоторых случаях эти замечания имеют смысл. Как уже говорилось, элементом Если пойти немного дальше, то окажется, что есть и другие элементы, вроде Например — элемент Но в HTML Получается, что если Элементы с абстрактной ролью Доступность страницы, на которой полно region-элементов, ухудшится. Ведь если знаком «Важно!» помечено всё вокруг, то окажется, что ничего важного, на самом деле, нет. Возникает такое ощущение, что всё это очень похоже на То же самое касается и одного из первых моих примеров, который я обещал обсудить позже, где элемент Единственный HTML-элемент, который предназначен для оформления абзацев — это Нам нужно беспокоиться о великом множестве проблем, которые могут возникнуть в сфере доступности контента. Надо ли разработчикам менять элементы Не поймите меня неправильно: я не защищаю варианты использования Пишите семантический HTML-код. Используйте его как стандарт. А ещё, может быть, не стоит беспокоиться слишком сильно, когда другие не используют семантический HTML, если то, что они создают, не приводит к проблемам с доступностью? Или, если призываете кого-то пользоваться семантическим HTML, предельно чётко описывайте проблему, которую это может решить. Семантические элементы HTML — это не только доступность контента. Они помогают другим инструментам, которые работают с HTML, их гораздо легче, чем бескрайнее море Помните о том, что смысл элементов Статья с тех пор сильно изменилась, я не могу сообразить — куда мне добавить этот материал, не отклоняясь от основной цели. Но я, в любом случае, хочу привести тут ссылку на эту презентацию — для тех, кому интересна тема производительности и доступности. Делаю я так преимущественно из-за того, что не хочу рассказывать о том, о чём кто-то уже очень хорошо рассказал. Всё закончилось хорошо. Думаю, всё закончилось хорошо. Да, всё нормально. Сталкивались ли вы с примерами неправильного использования 
Семантическая (деградация) эволюция
Элемент .
Элемент
В стандарте HTML 4.01 определение . Там элемент — как универсальный контейнер для встроенного содержимого.
Современное определение
Знаете… нечто вроде «определения», но… речь идёт о
Элемент div совершенно не несёт в себе какого-то особого смысла. Он представляет свои дочерние элементы. Он может использоваться с атрибутами class, lang, title для обозначения семантики, общей для некоей последовательности элементов. Ещё его можно использовать в элементе dl, в качестве контейнера для групп элементов dt и dd.
Далее в стандарте идёт речь о следующем: Авторам документов настоятельно рекомендуется рассматривать элемент div как элемент, к которому прибегают в самом крайнем случае, когда для решения некоей задачи не подходит ни один другой элемент. Использование более подходящих элементов вместо div ведёт к улучшению доступности документов для пользователей и к упрощению поддержки этих документов для их авторов.
В MDN можно найти дальнейшие инструкции для разработчиков по использованиюgeneric. Определение этой роли в ARIA похоже на определение
Безымянный элемент-контейнер, который, сам по себе, не имеет никакого семантического значения.
Представление пустого места
Элемент
К каким проблемам может привести оформление абзаца подобным образом? Об этом мы поговорим позже, а пока давайте посмотрим на несколько сценариев использования ▍Очевидный пример неправильного использования
Самый распространённый пример того, как не надо применять
Не вникая в особые подробности (можете почитать статью про role=button на MDN), могу сказать, что click не позволяет соблюсти все условия, необходимые для воссоздания доступной кнопки.
div-button и оснащая его полноценными механизмами поддержки клавиатуры. Такой элемент может представлять себя в виде кнопки и в различных состояниях, характерных для кнопок (кнопка может быть, например, отключённой, нажатой, развёрнутой). Его создатель может, кроме того, поработать над тем, чтобы он хорошо функционировал бы в режиме высокой контрастности Windows. Если кто-то и правда решит всем этим заняться — пожелаем ему удачи. Но всё это потребует куда больше усилий, чем использование стандартного элемента . Правда, если сделать div-button хорошо, то в этом не будет ничего совершенно несовместимого с жизнью. Правда? ▍Элемент
Теперь, если говорить о структурных контейнерах содержимого, можно быстро определить, используется ли ID, используемых для элементов (если только для всего этого применяются более или менее понятные имена):
Хотя этот пример и чрезвычайно упрощён, существуют сайты, созданные в наши дни, разметка которых напоминает вышеприведённый код.). Можно, при необходимости, задействовать ARIA для назначения элементам атрибутов role, state, aria-* (например — ▍Элементы
Разберём пару примеров совершенно допустимого применения lang, содержащим подходящий языковой тег. В этот ▍...
...
Здесь применение контейнера lang гораздо легче применения этого атрибута к каждому элементу, включённому в этот контейнер. Кроме того, если исходить из предположения о том, что этот контент представляет собой нечто особенное, используемое только на конкретной странице, окажется, что применение ...
Тут элементы и другого контента, имеющегося в начальной части статьи и предваряющего её основную часть. Здесь, для размещения контента, используется flex-макет (для упрощения примера здесь применены атрибуты style).
Универсальное применение любых других HTML-тегов
Помимо role=«generic»). Среди них, например, такие, как , , , . Соответствующая роль назначается им неявным образом.
и , которые, что часто встречается в разметке страниц, выглядят как generic-элементы. Причина этого кроется в том, что роли ARIA, управляющие доступностью элементов, имеют весьма специфические цели. У HTML-элементов, кроме того, имеется чётко определённая семантика, указывающая на предполагаемый способ использования их разработчиком. Но не у всех HTML-элементов семантика в точности совпадает с ролями ARIA, которые заданы им неявным образом., становится баннером — role=banner. Это значит, что до тех пор, пока между и , элемента, предназначенного для разбиения контента на разделы, или корневого элемента раздела, элемент banner (абстрактная роль landmark) или . Но в таком контексте теги , он становится универсальным элементом, таким же, как .
Если говорить об элементе , то он, по умолчанию, тоже является универсальным. Он может быть представлен как элемент с ролью region — если ему назначено доступное имя. Например:
...
...
...
...
Причина, по которой элемент ведёт себя именно так, заключается в крайнем распространении его неправильного использования, когда в этот раздел включают всё, что нужно и не нужно.landmark предназначены для оформления особенно важных областей страниц. В частности, области с ролью region ориентированы на те ситуации, когда использование более специализированных landmark-элементов нецелесообразно.Суровость семантики
Если говорить о паре «правильных» примеров использования и
Возможно, первое, что пришло вам по этому поводу в голову, заключается в том, что такая конструкция не будет доступна тем, кто пользуется средствами для чтения с экрана. Исследуем эту идею.. Абзацы создаются неявным образом для каждого нового «блока» текста на странице. Поэтому, прежде чем разыграть карту «Используй семантический HTML и получишь в награду доступность», важно подумать о реальном воздействии на пользователя, о том, стоит ли сейчас разыгрывать эту карту. Лучше ли будет явным образом использовать ? Да, лучше. Способствует ли это тому, что пользовательские стили смогут единообразно настраивать внешний вид абзацев? Да. Об этом ли обычно говорят, обсуждая использование ? Обычно — нет.
О «супе» из
Я, когда работал над черновиком этой статьи, пользовался презентацией Эрика Бэйли о пересечении производительности и доступности.
