Кратко
Скопированоpresentation
— роль структуры документа, которая удаляет семантику элемента. Другая роль none
— это синоним presentation
.
Обе роли делают одно и то же, но рекомендуется использовать presentation
вместо none
. У presentation
более стабильная поддержка.
Пример
Скопировано<h1>Говорящий мангуст Джеф</h1><hr role="presentation"><p>Загадочное существо, обитавшее на ферме Дорлиш Кэшен неподалеку от селения Дэлби на острове Мэн. История о говорящем зверьке в середине 1930-х годов активно обсуждалась на страницах британской прессы.</p>
<h1>Говорящий мангуст Джеф</h1> <hr role="presentation"> <p>Загадочное существо, обитавшее на ферме Дорлиш Кэшен неподалеку от селения Дэлби на острове Мэн. История о говорящем зверьке в середине 1930-х годов активно обсуждалась на страницах британской прессы.</p>
В этом примере тег <hr>
потерял свою семантику и стал просто декоративным разделителем.
Как пишется
СкопированоДобавьте role
или role
к семантическому тегу. Исключение — интерактивные элементы, с которыми могут взаимодействовать пользователи. К примеру, кнопки, ссылки или поля.
На самом деле современные браузеры делают исключение для кликабельных элементов вроде ссылок и полей и не отменяют их семантику, когда им заданы роли presentation
или none
. Но всё равно лучше не нарушать правила использования ARIA.
Элементам с ролями presentation
или none
можно задавать почти все ARIA-атрибуты, кроме aria
и aria
.
Если зададите глобальные ARIA-атрибуты для элемента с этими ролями, браузер использует его встроенную роль и проигнорирует явную presentation
или none
.
<img>
с presentation
или none
ведёт себя так, как если бы картинку скрыли от скринридера с помощью ARIA-атрибута aria
. Поэтому такое изображение не надо описывать в alt
.
Когда в элемент с ролями presentation
или none
вложены другие элементы, они вместе с родителем потеряют свою семантику. В таком случае в дерево доступности попадёт только их содержимое, к примеру, текст.
Как понять
СкопированоРоли presentation
или none
пригодятся, когда нужно оставить встроенные стили элемента, но скрыть его семантику от вспомогательных технологий. Это полезно в некоторых случаях:
- декоративный элемент — картинки для красоты, разделители и похожие элементы;
- таблица для раскладки, как на старых сайтах или в электронных письмах;
- кастомный элемент, внутри которого есть элементы с ненужной семантикой в этом контексте. Например, панель вкладок, меню и другие контролы.
Подсказки
Скопировано💡 presentation
и none
превращают любой семантический тег в <div>
или <span>
для скринридера. Применять эти роли к <span>
или <div>
нет смысла, так как у них нет встроенной семантики.
💡 Элементам с presentation
и none
не нужны имена. Это их краткие названия, которые скринридер читает перед ролями.
На собеседовании
СкопированоЭто вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.