Accessibility errors reported by lighthouse

Created on 8 October 2023, 9 months ago
Updated 8 February 2024, 5 months ago

Problem/Motivation

I'm running some lighthouse tests and it's complaining about the disclosure menu, there are two errors.

For the menu, the error is for the menu missing menuitem children:

Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.

For the menu items, the error is that the lis are not within a ul (I think this is because the ul has role=menu, changing its type):

List items (<li>) are not contained within <ul>, <ol> or <menu> parent elements.

Proposed resolution

Looking at the ARIA: menu role docs, it looks like there are two options:

First, use role=menu on the ul, but add role=presentation to the lis and role=menuitem to the as. This is demonstrated in Example 1: Navigation Menu in those docs.

However, the docs go on to state:

When including a "menu" for site navigation, do not use the menu role. Rather, for the main site navigation use the native HTML element or simply a list of links. The menu role should be reserved for composite widgets requiring focus management. See ARIA practices for disclosure navigation for an explanation and additional examples.

At the top of the Disclosure Navigation docs (same link as from the earlier quote), it states:

Although this example uses the word "menu" in the colloquial sense to refer to a set of navigation links, it does not use the WAI-ARIA menu role. This implementation of site navigation does not use the menu role because it does not provide the complex functionality that assistive technologies expect in a widget that has the menu role. Typical site navigation does not need all the keyboard interactions specified by the menu and menubar pattern.

This makes me think that the right course of action is to just drop role=menu altogether.

πŸ› Bug report
Status

Fixed

Version

2.1

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States sonfd Portland, ME

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

Comments & Activities

Production build 0.69.0 2024