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

Issue fork tb_megamenu-3535719

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

dmarcana created an issue. See original summary.

dmarcana’s picture

dmarcana commented
Issue summary: View changes

dmarcana opened merge request !99

vinodhini.e’s picture

vinodhini.e commented
Status: Active » Needs review

Hi @dmarcana,

Tested on a Drupal 11 site with the TB Mega Menu module.
Replicated the issue by creating an icon-only menu — screen readers announced buttons with no accessible name.
Inspected the HTML and confirmed missing aria-label attributes.
After applying the MR, re-tested using WAVE — no more accessibility errors related to missing labels.
Menu items are now properly announced with context (e.g., “Open main submenu”).

Thanks.

ronraney’s picture

ronraney commented

Seeing this related issue. The button here is "empty". It needs some sort of label for accessibility.

<nav class="tbm tbm-main tbm-arrows" id="tbm-main" data-breakpoint="1199" aria-label="main navigation" data-initialized="true">
Empty button
<button class="tbm-button" type="button">

What It Means
A button is empty or has no value text.

Why It Matters
When navigating to a button, descriptive text must be presented to screen reader users to indicate the function of the button.

How to Fix It
Place text content within the element or give the element a value attribute.

themodularlab’s picture

themodularlab
He/Him
Primary language English
commented
themodularlab’s picture

themodularlab
He/Him
Primary language English
commented

themodularlab’s picture

themodularlab
He/Him
Primary language English
commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.