search

whatwg / html

HTML Standard
https://html.spec.whatwg.org/multipage/
Other
7.85k stars 2.57k forks source link

Clarify the semantic scope of the menu element #7562

Open kantoche opened 2 years ago

kantoche commented 2 years ago

The definition of a menu element is currently rather restrictive from the point of view of its semantic scope, since it is assimilated to a type of list which is only valid for a toolbar (https://html.spec.whatwg.org/multipage/grouping-content.html#the-menu-element).

However, from an accessibility point of view, if we look at the correspondence established in the ARIA in HTML specification (https://www.w3.org/TR/html-aria/#el-menu), the implicit ARIA semantics of a menu element is that of a list, but other roles can be associated with it: directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar or tree. The toolbar role is therefore only one role among others.

So what is the coherence between the restricted scope of the current HTML specification and the extended scope proposed by WAI-ARIA?

scottaohara commented 2 years ago

@kantoche, I would submit your issue is more with understanding the scope of what the ARIA in HTML specification outlines, rather than needing clarification for the semantics of the menu element. Otherwise, your question would need to apply to every HTML element.

In reality, any ARIA role can be specified on any HTML element to overwrite its implicit ARIA semantics. ARIA in HTML is not proposing an extended scope for the semantics of HTML elements, but rather is identifying a more limited set of ARIA roles that most align with the semantics of the native HTML element. The limiting of allowed roles is to reduce potential author misuse in specifying roles that would more greatly conflict with the intended semantics for the HTML element.

Ideally, you would not choose an HTML element with specific semantics with the intent to override those semantics using ARIA. Use the HTML element as defined, and if you need something more malleable, use a <div>, <span>, or custom element which represent nothing without further authoring.