Кратко
СкопированоБлок с раскрывающимся контентом на чистом HTML.
У <details>
есть групповая роль group
.
Пример
СкопированоСамый простой раскрывающийся блок выглядит вот так:
<details> <summary>Легенда</summary> <p>Раскрывающийся текст</p></details>
<details> <summary>Легенда</summary> <p>Раскрывающийся текст</p> </details>
Как понять
СкопированоИногда нужно скрывать какую-то информацию на странице в специальном блоке. Чтобы в любой момент можно было кликнуть на этот блок и развернуть информацию. И свернуть обратно таким же кликом. Такой блок ещё называют «аккордеоном».
Как пишется
СкопированоТег <details>
— это интерактивный элемент, при нажатии на который открывается блок с информацией — текстом или картинками. Нередко такие элементы можно встретить на страницах с часто задаваемыми вопросами (FAQ), где в заголовке (или легенде) написан вопрос, а ответом является содержимое «аккордеона».
Тег <summary>
— это заголовок «аккордеона», так называемая легенда. Он необязателен — без него в качестве легенды будет написан текст «Подробнее», «Details» или нечто подобное — в зависимости от выбранного языка и браузера.
Собирается «аккордеон» очень просто: в <details>
вкладываем <summary>
и теги с информацией, которая будет показываться при нажатии.
По умолчанию «аккордеон» закрыт, но если мы хотим, чтобы его содержание показывалось сразу при загрузке страницы или открывать его из JavaScript, нужно добавить к нему атрибут open
.
<details open> <summary>Легенда</summary> <p>Раскрывающийся текст</p></details>
<details open> <summary>Легенда</summary> <p>Раскрывающийся текст</p> </details>
Подсказки
Скопировано💡 Можно вкладывать <details>
в <details>
.
💡 <details>
— это интерактивный элемент, но вкладывать другие интерактивные элементы в него можно.
💡 В HTML-стандарте написано, что <summary>
должен быть первым ребёнком в <details>
, но на деле всё прекрасно работает, даже если <summary>
находится между тегами содержательной части «аккордеона».
💡 Вёрстка не ломается, если вложить <summary>
в <summary>
— в таком случае будет только один элемент :
(треугольник перед легендой).
💡 Если в «аккордеоне» будет несколько <summary>
подряд, браузер будет реагировать только на первый, а остальные даже не отобразятся, хотя будут стоять в разметке.
💡 Если указать просто <summary>
без <details>
, то он будет вести себя как обычный <div>
— блочный элемент без интерактивности.
На практике
Скопированосоветует Скопировано
🛠 Если присутствует тег <summary>
, то псевдоэлемент :
можно стилизовать — правда, он реагирует не на все свойства, но как минимум вы сможете поменять цвет и размер шрифта. Раньше для его стилизации нужно было использовать :
.
советует Скопировано
🛠 Можно заменить иконку по умолчанию с помощью <img>
. В этом случае оставьте значение атрибута alt
пустым, так как это декоративное изображение.
<details open> <summary> <img src="images/arrow-down.svg" alt=""> Сроки доставки </summary> <p> Если закажите экспресс-доставку голубями, она займёт от 6 до 8 дней. Обычная доставка улиткой занимает примерно 20 дней. </p></details>
<details open> <summary> <img src="images/arrow-down.svg" alt=""> Сроки доставки </summary> <p> Если закажите экспресс-доставку голубями, она займёт от 6 до 8 дней. Обычная доставка улиткой занимает примерно 20 дней. </p> </details>
🛠 У <summary>
есть встроенная роль button
. На практике скринридеры определяют роль тега по-разному. NVDA считает его кнопкой, Narrator — раскрывающим треугольником (disclosure triangle), десктопный VoiceOver — саммари (summary), а TalkBack в Firefox и мобильный VoiceOver в Safari вообще не определяют роль <summary>
.
Можно использовать явную роль button
для <summary>
, но так лучше не делать:
- Это не та ситуация, где стоит явно задавать ARIA-роль и нарушать одно из правил использования WAI-ARIA.
- VoiceOver перестанет определять состояние
<details>
— развёрнут или свёрнут элемент. - Не решит проблему с неопределяемой ролью
<details>
для TalkBack в Firefox и мобильного VoiceOver в Safari.
🛠 Если заменить на свою иконку с треугольником по умолчанию у <summary>
, это может привести к проблемам с объявлением VoiceOver, NVDA и JAWS состояния, в котором сейчас находится элемент.
🛠 В Firefox есть баг, из-за которого VoiceOver читает название иконки по умолчанию и считает его частью имени элемента — краткого названия, которое скринридеры объявляют вместе с ролью.
🛠 VoiceOver в Safari и JAWS в Chrome, Edge или Firefox не считают <h1>
–<h6>
заголовками, если они вложены в <summary>
.
🛠 Может показаться, что <details>
и <summary>
подходят для выпадающего меню. Они ведут себя похоже, но это не самое доступное решение. Вот несколько причин:
- Пользователи голосового управления не смогут открыть такой элемент с помощью привычных команд. К примеру, «Нажать на кнопку».
- Скринридеры не всегда понимают, раскрыт сейчас такой элемент или нет.
- Содержимое
<summary>
не попадает в список всех кнопок или других интерактивных элементов на странице, который есть у скринридеров. - У пользователей скринридеров нет шортката для быстрого перехода к
<details>
или<summary>
.