Accessibility Fixes: ARIA Role Compliance and Proper List Item Structuring

Created on 12 March 2024, 4 months ago

Updated 15 March 2024, 3 months ago

This issue report addresses accessibility issues found with Axe Dev Tools related to ARIA roles and proper structuring of list items.

Certain ARIA roles do not contain their required children, leading to a miscommunication of UI controls for screen reader users.
Elements are not properly contained within <ul> or <ol> tags, which can cause navigation issues for keyboard and screen reader users.

Navigate to the component/page containing the <ul id="disclosure-menu" role="menu"> and observe that it contains <li> elements with tabindex attributes, which is not permitted.
Use an accessibility testing tool like Axe to confirm that the element improperly uses aria-busy="true" while displaying a loader.
Identify <li class="menu__item menu__item--level-1"> elements outside of a <ul> or <ol> container.

For the ARIA role issue, review the child elements of components with the menu role to ensure they meet ARIA requirements. Remove any tabindex attributes from <li> elements within these roles and correct usage of aria-busy="true".
For the list item issue, ensure all <li> elements are properly nested within <ul> or <ol> tags to comply with HTML standards and improve accessibility.

These fixes should not result in visual changes. The focus is on improving accessibility and compliance with web standards.

Additional Links as resources:

🐛 Bug report

Status

Closed: cannot reproduce

Version

2.1

Component

Code

Created by

JessicaN

Live updates comments and jobs are added and updated live.

Accessibility
It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Comments & Activities

Issue created by @JessicaN
First commit to issue fork.
Status changed to Closed: cannot reproduce 3 months ago7:42pm 15 March 2024
Comment 3 months ago →
🇺🇸United States jayhuskins
I was unable to reproduce these errors using Axe Dev Tools, nor do I see how an li could appear outside of a ul.

Production build 0.69.0 2024