presentation, none

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.

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