Accessibility UI Guidelines: Accessible Accordions

Components

3.8 Accordions

Accordions are UI components that allow users to expand and collapse content sections, making it easier to present large amounts of information in a compact space. Ensuring accordions are accessible is critical for providing an inclusive experience for all users.

3.8.1 Semantic Markup

Use semantic HTML with proper ARIA roles and attributes to create accessible accordions. Each accordion header should be a button with aria-expanded, and its content section should be associated using aria-controls.

<!-- Accessible Accordion -->
<div id="accordion">
    <h3>
        <button aria-expanded="false" aria-controls="section1" id="header1">Section 1</button>
    </h3>
    <div id="section1" role="region" aria-labelledby="header1" hidden>
        <p>Content for Section 1.</p>
    </div>
    <h3>
        <button aria-expanded="false" aria-controls="section2" id="header2">Section 2</button>
    </h3>
    <div id="section2" role="region" aria-labelledby="header2" hidden>
        <p>Content for Section 2.</p>
    </div>
</div>

3.8.2 Keyboard Accessibility

Ensure accordions are fully operable using the keyboard. Users should be able to navigate between headers using the Tab key and expand or collapse sections using the Enter or Space keys.

// Keyboard Navigation for Accordions
const accordionHeaders = document.querySelectorAll('#accordion button');

accordionHeaders.forEach((header) => {
    header.addEventListener('click', () => toggleAccordion(header));
    header.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            toggleAccordion(header);
        }
    });
});

function toggleAccordion(header) {
    const isExpanded = header.getAttribute('aria-expanded') === 'true';
    header.setAttribute('aria-expanded', !isExpanded);
    const section = document.getElementById(header.getAttribute('aria-controls'));
    section.hidden = isExpanded;
}

3.8.3 ARIA Attributes

Use ARIA attributes to enhance the accessibility of accordions. Apply aria-expanded on headers to indicate their state, and use role="region" for content sections to define them as accessible regions.

<!-- Accordion with ARIA Attributes -->
<h3>
    <button aria-expanded="true" aria-controls="content1" id="header1">Item 1</button>
</h3>
<div id="content1" role="region" aria-labelledby="header1">
    <p>Details for Item 1.</p>
</div>
<h3>
    <button aria-expanded="false" aria-controls="content2" id="header2">Item 2</button>
</h3>
<div id="content2" role="region" aria-labelledby="header2" hidden>
    <p>Details for Item 2.</p>
</div>

3.8.4 Responsive Design

Ensure accordions are responsive and adapt to different screen sizes. Consider styling them for both desktop and mobile layouts.

/* Basic Accordion Styles */
#accordion h3 {
    margin: 0;
}

#accordion button {
    width: 100%;
    text-align: left;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 1rem;
    font-size: 1rem;
    cursor: pointer;
}

#accordion button[aria-expanded="true"] {
    background-color: #005fcc;
    color: white;
}

#accordion div {
    padding: 1rem;
    border: 1px solid #ccc;
    border-top: none;
}

3.8.5 Visible Focus Indicators

Provide clear focus indicators for accordion headers to help keyboard users identify the currently focused element.

/* Focus Styles for Accordion Buttons */
#accordion button:focus {
    outline: 2px solid #005fcc;
    background-color: #e0f0ff;
}

3.8.6 Testing Accordions for Accessibility

Test accordions with assistive technologies to ensure they are accessible. Verify proper use of ARIA attributes, keyboard navigation, and focus management.

// Test Checklist
// - Verify that accordion headers are keyboard operable.
// - Ensure ARIA roles and attributes are correctly implemented.
// - Check screen reader announcements for headers and content sections.
// - Validate visible focus indicators for headers.

Best Practices for Accordions

• Use Semantic Markup: Structure accordions with headers and content sections, using ARIA attributes to indicate states.
• Ensure Keyboard Accessibility: Allow users to navigate and operate accordions using only the keyboard.
• Provide Clear ARIA Roles: Use attributes like aria-expanded, aria-controls, and role="region" for accessibility.
• Design for Responsiveness: Ensure accordions adapt to different screen sizes and layouts.
• Provide Visible Focus Indicators: Highlight the currently focused header for better usability.
• Test Thoroughly: Regularly test accordions with assistive technologies and automated tools to identify and resolve issues.