SSA - Single Standard for Accordion

The SSA standard defines requirements for the semantics, accessibility, and logic of accordions.

Accordion elements in this standard are called spoilers. Spoilers can be separate entities from accordions, but they are rarely used separately.

Structure and semantics

The basis is a <ul> list, which ensures that screen readers and search robots will perceive a group of spoilers as a single list of related elements.

Each spoiler contains <details>, inside which the order is strictly defined:

1. Trigger header;
2. Content with data.

<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>

The name attribute allows you to create accordions in which only one spoiler can be opened, provided that the value in name is the same for all spoilers.

Interactivity

The trigger is the entire <summary> element. Its clickable area should be as large as possible for ease of use on mobile devices.

• The trigger and content should have separate padding so that the trigger has more space to click on.
• If there is an icon, it should be a visual indicator. If there is no icon, an alternative visual response is required.

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

/* Hiding the system marker */
.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;
  /* This can be a background-image or SVG. */
}

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

aria-hidden=“true” is always added to icons, as they serve a decorative function, and screen readers read the “open/closed” status directly from the <details> tag.

Visual feedback

The user should instantly understand that an element is active or selected.

The SSA standard implies three types of feedback:

• Hover - a slight change in the background of <summary> when hovering.
• Focus - a clear frame when navigating with the keyboard via :focus-visible.
• Open - if there is no icon, an accent line or a different background color is used for an open spoiler.

.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;
}