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

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

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

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

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

Внутри каждого элемента списка <li> располагается тег <details>, который строго содержит:

1. Заголовок-триггер <summary>;
2. Контентную область <div>.

<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 у всей группы).

Доступность

1. Семантика состояния - состояние «развернуто/свернуто» транслируется скринридерам автоматически благодаря использованию нативного тега <details>. Дополнительные ARIA-атрибуты для этого не требуются.

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

3. Управление с клавиатуры - благодаря <summary>, элемент автоматически попадает в фокус при нажатии Tab и активируется клавишами Enter или Space.

4. Визуальный фокус - обязательно использование псевдокласса :focus-visible. При навигации с клавиатуры пользователь должен видеть четкую обводку (outline) активного элемента.

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

Интерактивность и стилизация

1. Область нажатия триггера <summary> должна быть максимально большой. Это критично для мобильных устройств.

2. У триггера и контента должны быть раздельные внутренние отступы. Это увеличивает площадь активной зоны, не «схлопывая» текст.

Пользователь должен мгновенно понимать состояние элемента через три типа реакций:

1. Hover - легкое изменение фона при наведении;
2. Focus - акцентная рамка;
3. Open - изменение цвета фона или появление разделительной линии у открытого спойлера.

/* Базовые стили */
.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__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;
}

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

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

Статья будет дополнятся