Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Why does `ul` have ARIA role `menu` but `menuitem` is forbidden for `li`?

Tags:

html

accessibility

wai-aria

Just covered out some strage specs regarding ARIA roles. Why does ul have ARIA role menu but menuitem is forbidden for li?

I would like to describe a navigation bar using ul, li and HTML5's nav element in combination with the ARIA roles navigation, menu and menuitem.

<!DOCTYPE html>
<html>
  <head><title>ARIA role bug?</title></head>
  <body>
    <nav role="navigation">
      <ul role="menu">
        <li role="menuitem"><a href="http://example.com/">example.com</a></li>
      </ul>
    </nav>
  </body>
</html>

W3's HTML5 validator nag me here:

Bad value menuitem for attribute role on element li.

like image 514
burnersk Avatar asked May 25 '13 16:05

burnersk

People also ask

What is the difference between role and ARIA role?

The document role is for focusable content within complex composite widgets or applications for which assistive technologies can switch reading context back to a reading mode. ARIA document-structure roles are used to provide a structural description for a section of content.

Can IMG element use all the ARIA roles?

The ARIA img role can be used to identify multiple elements inside page content that should be considered as a single image. These elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.

What is accessibility & ARIA role means in a web application?

Accessible Rich Internet Applications ( ARIA ) is a set of roles and attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

What is an ARIA menu?

The menu role is a type of composite widget that offers a list of choices to the user.

1 Answers

Jukka is incorrect here. The W3C validator does not check against the WHATWG LS, instead it checks against the W3C HTML specification. The W3C HTML spec is the authoritative source for conformance checking requirements for the W3C Validator.

In regards to menuitem not being allowed as per the HTML spec, I believe this is a bug. And as such I have filed a bug. It is now in my bug queue to be resolved.

I have filed a bug against the W3C validator and wai-aria in HTML doc as well. Until such times the validator is fixed, I suggest you use the roles as per the WAI-ARIA spec and ignore the validator.

addendum:

I looked back at history of ARIA integration into HTML could not find any reason why menuitem was not allowed, so believe it was an oversight. I fixed and resolved the bug I referenced above.

like image 83
Steve Faulkner Avatar answered Nov 25 '22 13:11

Steve Faulkner
Sign in to Comment

Related questions

Is there a way to prevent a contentEditable element from scrolling when the cursor reaches the bottom?
How to register for value change events on <input type=date> on iOS
CORS withCredentials XHR preflight not posting Cookies in Firefox
How to make elements stop from moving when resizing the window after using percentage
DataTables - Not working when added colspan for the last column
Writing file to desktop using HTML5 FileSystem API
How do I handle HTML5 Multiple File uploads in ASP.NET MVC?
Simple Button in HTML5 canvas
Change Button color onClick
python clicking a button on a webpage
Make HTML5 input type="number" accepting dashes
Bootstrap responsive table with form input min width
Hide text if it doesn't fit in one line with CSS
What is initial-scale=1.0?
Stop automatic scrolling on page content change
Disable Markdown for a block
Width of input type=text element
Force applicationCache to reload cached files
How to best display HTML5 geolocation accuracy on a google map
imagetoolbar meta tag and IE versions

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!