Accordion

The accordion component organizes related content into collapsible sections, allowing users to expand and collapse information as needed. Use accordions to present FAQ content, help documentation, or any grouped information where users may only need specific sections. The component includes expand/collapse all controls and supports individual details elements for flexible content organization.

Do

  • Group related content logically — organize accordion items by topic, category, or user workflow to create intuitive information architecture.
  • Write clear, descriptive section titles that accurately describe the content users will find when expanded.
  • Use consistent content formatting within accordion sections to maintain visual hierarchy and readability.
  • Include expand/collapse all controls to help users quickly access or hide all content at once.
  • Keep individual sections focused — each accordion item should address a specific topic or question.
  • Test keyboard navigation to ensure all accordion controls are accessible without a mouse.
  • Provide meaningful content in each section rather than placeholder or generic text.
  • Consider content length — avoid extremely long sections that require excessive scrolling when expanded.

Don't

  • Don't nest accordions deeply — avoid accordion within accordion patterns that can confuse navigation.
  • Don't use accordions for critical information that all users must see — reserve for supplementary or contextual content.
  • Don't make section titles too vague — avoid generic titles like "More Information" or "Details" without context.
  • Don't forget mobile experience — ensure accordion controls are touch-friendly and content is readable on small screens.
  • Don't overload single sections — break very long content into multiple focused accordion items.
  • Don't rely solely on icons for expand/collapse indication — include visual and textual cues for clarity.
  • Don't ignore loading performance — be mindful of content volume when all sections are expanded simultaneously.
  • Don't use accordions for linear processes — step-by-step workflows are better served by the sequence component.

Dependencies

The Accordion component requires additional CSS dependencies to render correctly:

  • Details CSS: The Accordion component extends the Details component and requires the Details CSS file to be loaded for proper styling. For use on external platforms, ensure that the following CSS is added separate from the GNWT Design System CSS Bundle: details.css.

These dependencies are automatically resolved when using the Accordion component through Drupal's component system, but should be considered when implementing the component in other contexts or when troubleshooting styling/interactivity issues.

Standard Accordion

Basic accordion implementation with expand/collapse all controls and multiple content sections. Demonstrates the standard pattern with help content organized by topic. Use this pattern for FAQ sections, help documentation, or any content where users need selective access to information.

Help with community of residence

We ask for your current community of residence to determine which regional programs and services apply to you. If you live in a remote area or split your time between communities, use the location where you spend most of the year. This helps us direct your application to the right office.

Help with Indigenous affiliation

Providing your Indigenous affiliation helps ensure you receive the correct supports and benefits available under GNWT programs. This information is used only to connect you with relevant services and is not shared without your consent.

Help with proof of residency

To qualify for certain GNWT services, we need to confirm that you live in the Northwest Territories. You can provide a utility bill, lease agreement, or a letter from a recognized community organization. If you're unable to provide these, contact your local Regional Service Centre for help.

Open example in a new tab

Accessibility Best Practices

Accordion demonstrating comprehensive accessibility implementation with proper ARIA attributes, semantic markup, and keyboard navigation support. Shows how to structure accordion content for optimal screen reader experience and keyboard accessibility.

Screen Reader Support

  • Semantic details elements: Uses native <details> and <summary> elements for built-in accessibility support.
  • Descriptive section titles: Each accordion section has clear, specific titles that describe the content.
  • Proper heading structure: Section titles maintain appropriate heading hierarchy within the page context.
  • State announcements: Expanded/collapsed states are automatically announced by screen readers using native elements.

Keyboard Navigation

  • Full keyboard access: All accordion controls are accessible via Tab key navigation and activated with Enter or Space.
  • Logical tab order: Accordion sections follow natural reading order and expand/collapse controls are easily accessible.
  • Focus management: Focus remains on the activated control after expanding/collapsing sections.
  • Expand/collapse all functionality: Global controls are keyboard accessible and properly announce their actions.

Visual Accessibility

  • Clear visual indicators: Plus/minus icons and chevron indicators show expansion state without relying solely on color.
  • High contrast ratios: All text and interactive elements meet WCAG AA contrast requirements.
  • Focus indicators: Clear visual focus states help keyboard users identify their current position.
  • Responsive design: Accordion maintains usability and readability across all screen sizes and zoom levels.

Content Guidelines

  • Question-focused titles: Write section titles as questions users might ask or clear topic statements. Keep the titles concise, ideally 6 words or less.
  • Concise, helpful content: Provide direct answers or information without unnecessary complexity.
  • Consistent formatting: Use similar content structure across all accordion sections for predictability.
  • Actionable information: Include next steps, links, or contact information when relevant to help users take action.

Implementation Considerations

  • JavaScript dependencies: Accordion requires JavaScript for expand/collapse all functionality and enhanced interactions.
  • Content loading: Consider lazy loading for accordion sections with heavy content or media.
  • State persistence: Decide whether accordion states should persist across page reloads or reset to default.
  • Integration patterns: Accordion works well within forms, help sections, and content-heavy pages.
  • Touch targets: The entire title row for the accordion items should act as a touch target, rather than individual icons or titles, to give users the freedom to tap/click anywhere along the row.

ARIA Attributes in Use

  • aria-expanded - Automatically handled by native <details> element to indicate section state.
  • aria-controls - Connects expand/collapse all buttons to their target accordion sections.
  • role="button" - Applied to custom interactive elements when not using native button elements.
  • aria-label - Provides additional context for expand/collapse all controls when button text alone might be ambiguous.
Mis à jour: 16 décembre 2025