Contrib.social

Accordion and Tabs paragraph need to be more accessible

Open on Drupal.org →
Created on 8 November 2023, 8 months ago
Updated 11 April 2024, 3 months ago

Problem/Motivation

On an accesibility test, the following issues were reported:

Accordion

1. Interactive controls must not be nested. This is due to a elements being inside a parent with role=tab.

2. Alt attribute is not valid for elements other than images. The bootstrap-paragraphs-accordion.js adds the alt attribute to links, which is not allowed for elements other than images, and it only adds it after interacting with the link once or if it's open by default. I assume this was meant to be a title.

3. Elements must only use supported ARIA attributes. The aria-expanded attribute is being added to both the a element and the div element with the contents of the section. However, div elements do not allow this attribute.

Tabs

4. ARIA attributes must conform to valid values. The aria-controls attribute of tabs is using the tab panel title instead of the ID.

5. Keyboard navigation is not working as expected. According to the Tabs Pattern , tabs should not be accessible by pressing the Tab key, but using left and key arrows instead.

Proposed resolution

1. A solution would be to turn these elements into buttons and assign the role=tab directly to them. However, the whole tab interface (tablist, tabpanel and tab) is not needed in this type of component. The recommendation is to use buttons and aria attributes according to https://www.w3.org/WAI/ARIA/apg/patterns/accordion/.
2. Remove the alt attribute. Title is not needed either since the the aria-expanded attribute informs assistive tech users whether an item is open or closed, so the title attribute text would be duplicative. In addition, the title attribute doesn’t have great accessibility support.
3. Remove the aria-expanded attribute from the div element and keep only on the a (now to be button) element.
4. Replace title with ID.
5. Add the expected keyboard interaction with JS.

Remaining tasks

Review patch.

📌 Task
Status

Fixed

Version

2.0

Component

Code

Created by

🇲🇽Mexico oscar.puente

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

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024