presentation, none

Роли для удаления семантики элементов.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

presentationроль структуры документа, которая удаляет семантику элемента. Другая роль none — это синоним presentation.

Обе роли делают одно и то же, но рекомендуется использовать presentation вместо none. У presentation более стабильная поддержка.

Пример

Секция статьи "Пример"
        
          
          <h1>Говорящий мангуст Джеф</h1><hr role="presentation"><p>Загадочное существо, обитавшее на ферме Дорлиш Кэшен неподалеку от селения Дэлби на острове Мэн. История о говорящем зверьке в середине 1930-х годов активно обсуждалась на страницах британской прессы.</p>
          <h1>Говорящий мангуст Джеф</h1>
<hr role="presentation">
<p>Загадочное существо, обитавшее на ферме Дорлиш Кэшен неподалеку от селения Дэлби на острове Мэн. История о говорящем зверьке в середине 1930-х годов активно обсуждалась на страницах британской прессы.</p>

        
        
          
        
      
Открыть демо в новой вкладке

В этом примере тег <hr> потерял свою семантику и стал просто декоративным разделителем.

Как пишется

Секция статьи "Как пишется"

Добавьте role="presentation" или role="none" к семантическому тегу. Исключение — интерактивные элементы, с которыми могут взаимодействовать пользователи. К примеру, кнопки, ссылки или поля.

На самом деле современные браузеры делают исключение для кликабельных элементов вроде ссылок и полей и не отменяют их семантику, когда им заданы роли presentation или none. Но всё равно лучше не нарушать правила использования ARIA.

Элементам с ролями presentation или none можно задавать почти все ARIA-атрибуты, кроме aria-label и aria-labelledby.

Если зададите глобальные ARIA-атрибуты для элемента с этими ролями, браузер использует его встроенную роль и проигнорирует явную presentation или none.

<img> с presentation или none ведёт себя так, как если бы картинку скрыли от скринридера с помощью ARIA-атрибута aria-hidden. Поэтому такое изображение не надо описывать в alt.

Когда в элемент с ролями presentation или none вложены другие элементы, они вместе с родителем потеряют свою семантику. В таком случае в дерево доступности попадёт только их содержимое, к примеру, текст.

Как понять

Секция статьи "Как понять"

Роли presentation или none пригодятся, когда нужно оставить встроенные стили элемента, но скрыть его семантику от вспомогательных технологий. Это полезно в некоторых случаях:

  • декоративный элемент — картинки для красоты, разделители и похожие элементы;
  • таблица для раскладки, как на старых сайтах или в электронных письмах;
  • кастомный элемент, внутри которого есть элементы с ненужной семантикой в этом контексте. Например, панель вкладок, меню и другие контролы.

Подсказки

Секция статьи "Подсказки"

💡 presentation и none превращают любой семантический тег в <div> или <span> для скринридера. Применять эти роли к <span> или <div> нет смысла, так как у них нет встроенной семантики.

💡 Элементам с presentation и none не нужны имена. Это их краткие названия, которые скринридер читает перед ролями.

На собеседовании

Секция статьи "На собеседовании"

Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.