Accessibility
Accessibility
Any QGDS Details component should pass these WCAG 2.2 guidelines.
Test the Details component in your space
QGDS completes tests on all components to meet accessibility requirements. While QGDS provides accessible components by default, we recommend the Details component is also tested within the tested of your own project or product to ensure an accessible experience.
Perceivable
The disclosed content must be programmatically associated with its trigger so assistive technologies can communicate the relationship to users.
Summary label or trigger has an accessible name
The <summary> element provides the accessible name for the <details> element. Do not replace <summary> with a generic <div> or <span> , this breaks the programmatic association between the trigger and the panel.
WCAG 2.2: 1.3.1 Info and Relationships (A)
Text meets 4.5:1 and icons meet 3:1 against the background
The <summary> label text and <details> content text must meet a minimum contrast ratio of 4.5:1 against its background in both the light and dark variants. The chevron icon used as a state indicator must also meet a 3:1 contrast ratio against its adjacent colours.
WCAG 2.2: 1.4.3 Contrast Minimum (AA)
Operable
Details panel toggles with keyboard interaction
The <summary> element is natively keyboard focusable and responds to Enter and Space. If you override the default browser behaviour with a custom JavaScript toggle, you must preserve keyboard operability, including focus management when the panel opens and closes.
Focus stays on the summary label on toggle
When the panel opens, focus must remain on the <summary> trigger. Do not move focus automatically into the panel content on expand, as this can disorient keyboard and screen reader users.
WCAG 2.2: 2.4.3 Focus Order (A)
Focus indicator is visible
The focused <summary> element must display a visible focus indicator. This criterion requires that a focus indicator exists and is visible, it does not specify minimum size or contrast. See 2.4.12 and 2.4.13 below for the stronger WCAG 2.2 requirements that govern focus indicator quality.
WCAG 2.2: 2.4.7 Focus Visible (AA)
Focused trigger is not covered or hidden
When the <summary> trigger receives keyboard focus, no part of it must be hidden behind other author-created content, for example, a sticky header or a floating banner. QGDS recommends meeting this enhanced standard to ensure the focused trigger is fully visible at all times during keyboard navigation.
WCAG 2.2: 2.4.12 Focus Not Obscured (Enhanced) (AAA)
Focus indicator meets contrast 3:1
The visible focus indicator on the <summary> trigger must meet minimum size and contrast requirements when rendered by the author. The indicator area must be at least as large as a 2px thick perimeter around the component, and must provide a contrast ratio of at least 3:1 between the focused and unfocused states.
WCAG 2.2: 2.4.13 Focus Appearance (AAA)
Target area is a minimum of 44 x 44px
The interactive area of the <summary> trigger must meet a minimum target size of 44 x 44 CSS pixels. QGDS recommends meeting this standard to ensure the trigger is comfortably operable for users with motor impairments or imprecise pointer input. The QGDS implementation meets this requirement by default. If you modify the component's padding or height, verify that the touch target size is preserved.
WCAG 2.2: 2.5.8 Target Size (Enhanced) (AAA)
Understandable
Details panel does not toggle on focus, hover or page scroll
The panel must only expand or collapse in response to an explicit user action on the <summary> trigger. Do not auto-expand the panel based on page scroll, focus alone, or other automatic conditions.
Robust
Assistive technology correctly reads toggle state
The native <details> element exposes a disclosure role to assistive technologies automatically. The open attribute reflects the expanded state. If you recreate this pattern using non-native elements, you must apply role="group" or role="region" and manage aria-expanded on the trigger manually.