Клавиша / esc

<details>, <summary>

Нативный раскрывающийся блок с контентом без магии и JavaScript.

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

Кратко

Скопировано

Блок с раскрывающимся контентом на чистом 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> — в таком случае будет только один элемент ::marker (треугольник перед легендой).

💡 Если в «аккордеоне» будет несколько <summary> подряд, браузер будет реагировать только на первый, а остальные даже не отобразятся, хотя будут стоять в разметке.

💡 Если указать просто <summary> без <details>, то он будет вести себя как обычный <div> — блочный элемент без интерактивности.

На практике

Скопировано

Лена Райан советует

Скопировано

🛠 Если присутствует тег <summary>, то псевдоэлемент ::marker можно стилизовать — правда, он реагирует не на все свойства, но как минимум вы сможете поменять цвет и размер шрифта. Раньше для его стилизации нужно было использовать ::-webkit-details-marker.

Татьяна Фокина советует

Скопировано

🛠 Можно заменить иконку по умолчанию с помощью <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>.