Add the aria-label attribute to module buttons to improve accessibility

Created on 13 July 2025, 2 months ago

Problem/Motivation

Currently, the buttons generated by the module lack the aria-label attribute. This hinders screen reader users from understanding the purpose of the button when it doesn't contain visible text—such as icon-only buttons.
According to WCAG 2.1, specifically Success Criterion 4.1.2 – Name, Role, Value, all interactive elements must have a programmatically determined name. The use of aria-label provides meaningful context for assistive technologies and ensures the component's function is clearly communicated.
This is especially important in megamenu structures where buttons may be reused or lack direct visible context.

Steps to reproduce

- Enable and configure the The Better Megamenu module.
- Create a menu with multiple items using icons or visual elements only (no visible text).
- Navigate to a page where the megamenu is rendered.
- Use a screen reader to explore the menu.
- Observe that buttons or tabs without visible text are announced as “button” or empty, lacking descriptive context.
- Inspect the HTML: note that the interactive element or lacks a aria-label attribute.
- Confirm that the function of those elements is unclear for assistive technologies

Proposed resolution

Add the aria-label attribute to megamenu buttons when they rely on icons or lack visible text, ensuring they comply with accessibility standards.

Remaining tasks

User interface changes

API changes

Data model changes

📌 Task
Status

Active

Version

1.9

Component

Code

Created by

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

Merge Requests

Comments & Activities

Production build 0.71.5 2024