The “aria-label” attribute must not be specified on any “menu-item” element unless the element has a “role” value other than “caption”, “code”, “deletion”, “emphasis”, “generic”, “insertion”, “paragraph”, “presentation”, “strong”, “subscript”, or “superscript”.

The aria-label attribute cannot be used on a custom element like <menu-item> when it has no explicit role attribute, because it defaults to the generic role, which is in the list of roles that prohibit aria-label.

Custom elements without an explicit role are treated as having the generic role (equivalent to a <span> or <div> in terms of semantics). The WAI-ARIA specification prohibits aria-label on several roles, including generic, because naming these elements creates a confusing experience for assistive technology users — a generic container with a label doesn’t convey any meaningful purpose.

To fix this, you need to assign a meaningful role to the <menu-item> element that supports accessible naming. Common choices include role="menuitem", role="link", or role="button", depending on what the element actually does. Since this appears to represent a menu item that navigates to a page, role="menuitem" is likely the most appropriate.

HTML Examples

❌ Invalid: aria-label on an element with implicit generic role

<menu-item
  submenu-href="/page"
  label="some label"
  submenu-title="some submenu title"
  aria-label="some aria label">
</menu-item>

✅ Valid: adding an explicit role that supports aria-label

<menu-item
  role="menuitem"
  submenu-href="/page"
  label="some label"
  submenu-title="some submenu title"
  aria-label="some aria label">
</menu-item>

If the aria-label isn’t actually needed (for example, if assistive technology already receives the label through other means in your component), another valid fix is to simply remove aria-label entirely.

Learn more:

MDN Reference

ARIA: aria-label - Accessibility

→

WHATWG Spec

ARIA Roles, States, and Properties

→

MDN Reference

Using ARIA

→