SSA - Single Standard for Accordion

01/19/26

2 min.

Definitions

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

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

Structure and Semantics

The accordion is based on the <ul> list, which ensures that assistive technologies will treat the group of spoilers as a single list of linked elements. Inside each <li> element is a <details> tag, which strictly contains a title-<summary> and a content area-<div>:

<ul class="accordion">
  <li>
    <details class="spoiler" name="faq">
      <summary class="spoiler__trigger">
        <h3 class="spoiler__title">Trigger Text</h3>
        <span class="spoiler__icon" aria-hidden="true"></span>
      </summary>
      <div class="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

The “expanded/collapsed” state is automatically conveyed to screen readers through the use of the native <details> tag, no additional ARIA attributes are required for this. The icon (arrow or plus sign) always has aria-hidden="true" applied, since it serves a visual function and voicing it would create unnecessary “noise” for the user.

Thanks to <summary>, the element automatically gains focus when the Tab key is pressed and is activated by the Enter or Space keys. It is also essential to use the :focus-visible pseudo-class so that, when navigating with the keyboard, the user sees a clear outline around the active element.

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

Interactivity and Visual Feedback

The clickable area of the trigger <summary> should be as large as possible with separate internal padding, this is critical for mobile devices. Content should also have separate internal padding to increase the clickable area the text should not “ squeezing” the text. To help users understand the element’s state, always use three types of interactions: hover, focus, and open.

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

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

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

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

/* Icon animation */
.spoiler__icon {
  flex-shrink: 0;
  inline-size: 24px;
  block-size: 24px;
  transition: rotate 0.3s ease-in-out;
}

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