SSA - Единый стандарт для аккордеона

Определения

Стандарт SSA определяет требования к семантике, доступности и логике работы аккордеона.

Элементы аккордеона в данном стандарте называются спойлерами, спойлеры могут быть отдельными от аккордеона сущностями, но отдельно они применяются редко.

Структура и Семантика

Основой аккордеона является список <ul>, это гарантирует, что вспомогательные технологии воспримут группу спойлеров как единый перечень связанных элементов, внутри каждого <li> располагается тег <details>, который строго содержит заголовок-<summary> и контентную область <div>:

<ul class="accordion">
  <li>
    <details class="spoiler" name="faq">
      <summary class="spoiler__trigger">
        <h3 class="spoiler__title">Текст триггера</h3>
        <span class="spoiler__icon" aria-hidden="true"></span>
      </summary>
      <div class="spoiler__content"></div>
    </details>
  </li>
</ul>

Атрибут name позволяет создавать аккордеоны, где одновременно может быть открыт только один спойлер (при условии одинакового значения name у всей группы).

Доступность

Состояние «развернуто/свернуто» транслируется скринридерам автоматически благодаря использованию нативного тега <details>, дополнительные ARIA-атрибуты для этого не требуются, иконке (стрелке или плюсу) всегда добавляется aria-hidden="true", так как она несет визуальную функцию, и её озвучивание создало бы лишний «шум» для пользователя.

Благодаря <summary>, элемент автоматически попадает в фокус при нажатии Tab и активируется клавишами Enter или Space, также обязательно использование псевдокласса :focus-visible, чтобы при навигации с клавиатуры пользователь видел четкую обводку outline активного элемента.

Текст внутри триггера должен быть обернут в заголовок (<h3>–<h6>), соответствующий структуре страницы, чтобы пользователи скринридеров могли быстро перемещаться по разделам аккордеона.

Интерактивность и Визуальный отклик

Область нажатия триггера <summary> должна быть максимально большой с отдельными внутренними отступами, это критично для мобильных устройств, у контента также должны быть отдельные внутренние отступы, чтобы увеличить площадь активной зоны, не «схлопывая» текст, а для понимания состояния элемента пользователем нужно всегда использовать три типа реакции, наведение, фокус и открытие.

/* Базовые стили */
.spoiler__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none; /* Скрытие системного маркера */
}

.spoiler__trigger::-webkit-details-marker {
  display: none;
}

.spoiler__trigger:hover {
  background-color: rgb(0 0 0 / 5%);
}

/* Состояние при открытии */
.spoiler[open] .spoiler__trigger {
  background-color: #f8f9fa;
  border-block-end: 1px solid #eee;
}

/* Анимация иконки */
.spoiler__icon {
  flex-shrink: 0;
  inline-size: 24px;
  block-size: 24px;
  transition: rotate 0.3s ease-in-out;
}

.spoiler[open] .spoiler__icon {
  rotate: 180deg;
}

Плагин

Плагин Next Accordion