SSA - Single Standard for Accordion

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

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

Structure and Markup

The foundation of an accordion is a <ul> list. This ensures that assistive technologies perceive a group of spoilers as a single list of related elements.

Inside each list item <li>, there is a <details> tag, which strictly contains:

1. A header-trigger <summary>;
2. A content area <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">Trigger Text</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 where only one spoiler can be open at a time (provided all items in the group have the same name value).

Accessibility

1. State Semantics - the "expanded/collapsed" state is automatically conveyed to screen readers thanks to the use of the native <details> tag. No additional ARIA attributes are required.

2. Hiding Decorative Elements - the icon (arrow) always has aria-hidden="true" added. It serves a visual function, and voicing it would create unnecessary "noise" for the user.

3. Keyboard Navigation - thanks to <summary>, the element automatically receives focus when Tab is pressed and is activated by Enter or Space keys.

4. Visual Focus - the :focus-visible pseudo-class must be used. When navigating with the keyboard, users should see a clear outline of the active element.

5. Heading Hierarchy - the text inside the trigger should be wrapped in a heading (<h3>–<h6>) that corresponds to the page structure, so screen reader users can quickly navigate through accordion sections.

Interactivity and Styling

1. The click area of the <summary> trigger should be as large as possible. This is critical for mobile devices.

2. The trigger and content should have separate internal padding. This increases the active area without "collapsing" the text.

Users should immediately understand the state of an element through three types of reactions:

1. Hover - a subtle background change on hover;
2. Focus - an accent border;
3. Open - a background color change or the appearance of a dividing line on the open spoiler.

/* Base styles */
.ssa-spoiler__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none; /* Hide system marker */
}

.ssa-spoiler__summary::-webkit-details-marker {
  display: none;
}

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

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

/* Icon animation */
.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;
}

The article will be supplemented