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

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

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

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

Основой является список <ul>, это гарантирует, что скринридеры и поисковые роботы воспримут группу спойлеров как единый перечень связанных элементов.

Каждый спойлер содержит <details>, внутри которого строго определен порядок:

1. Заголовок-триггер;
2. Контент с данными.

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

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

Интерактивность

Триггером является весь элемент <summary>. Его область нажатия должна быть максимально большой для удобства работы на мобильных устройствах.

• У триггера и контента должны быть отдельные паддинги, чтобы у триггера было больше площади для нажатия;
• Если иконка присутствует, то она должна быть визуальным индикатором. Если её нет, обязательно нужен альтернативный визуальный отклик.

.ssa-spoiler__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

/* Скрытие системного маркера */
.ssa-spoiler__summary::-webkit-details-marker { display: none; }

.ssa-spoiler__icon {
  flex-shrink: 0;
  inline-size: 24px;
  block-size: 24px;
  transition: rotate 0.3s ease-in-out;
  /* Здесь может быть background-image или SVG */
}

.ssa-spoiler__details[open] .ssa-spoiler__icon {
  rotate: 180deg;
}

Для иконки всегда добавляется aria-hidden="true", так как она несёт декоративную функцию, а состояние "открыто/закрыто" скринридеры считывают напрямую из тега <details>.

Визуальный отклик

Пользователь должен мгновенно понимать, что элемент активен или выбран.

Стандарт SSA подразумевает три типа отклика:

• Hover - лёгкое изменение фона <summary> при наведении.
• Focus - чёткая рамка при навигации с клавиатуры через :focus-visible.
• Open - если иконки нет, используется акцентная линия или другой цвет фона для открытого спойлера.

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

.ssa-spoiler__details[open] .ssa-spoiler__summary {
  background-color: #f8f9fa;
  border-block-end: 1px solid #eee;
}