Contrib.social

Improve accessibility of accordion titles

Open on Drupal.org →
Created on 1 March 2024, 4 months ago

Problem/Motivation

There are few acessibility issues with the accordion title:

  1. Screenreader - Accordion title is announced as link, when it is behaving as a button.
  2. Screenreader - Accordion title is missing aria-expanded to indicate visibility of content.
  3. Keyboard - Pressing spacebar while the title is active should toggle the visibility of the content.

There is a similar issue open 📌 Provide an accessible variant Needs review , but don't believe this is a duplicate. The focus of that issue is adding a variant system, with an optional accessible variant. However, accessibility improvements should be the default and not an optional add-on. I opened this issue to add the accessibility improvements in a backwards-compatible way.

Steps to reproduce

Keyboard:

  1. Tab to an accordion title and press the spacebar. The content doesn't toggle.

VoiceOver in Safari:

  1. Navigate to the accordion title, it's announced as a link
  2. Navigate to the accordion title and activate it. There's no feedback that content is revealed.

Proposed resolution

  • Add role="button" to title link
  • Add aria-expanded to title link, and update it based on accordion state
  • Toggle accordion when space bar is pressed on link

For the next major version it should be updated to use the semantic <button> element for the title.

🐛 Bug report
Status

Needs review

Version

2.0

Component

Code

Created by

🇺🇸United States hbrokmeier Wisconsin

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024