Кратко
СкопированоБлок с раскрывающимся контентом на чистом 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>.