Re: Invalid ARIA necessarily a WCAG fail? (Role menuitem missing required parent role (group,menu,menubar)

Hi all,

I am resending navigation example urls again since two of them were broken. Thanks so much for such a great information to distinguish ARIA role menu and  menuitem from non ARIA, Matt.



  1.  Disclosure for Navigation Menus (ARIA Menubar and Menu item roles were NOT used.)

https://w3c.github.io/aria-practices/examples/disclosure/disclosure-navigation


  1.  Navigation Menubar Example (ARIA Menubar and Menu item roles were used.)


https://w3c.github.io/aria-practices/examples/menubar/menubar-navigation


  1.  Editor Menu bar (ARIA Menubar and Menu item roles were used.)
https://w3c.github.io/aria-practices/examples/menubar/menubar-editor.html


Best,

JaEun Jemma Ku, Ph.D.
Assistant Director of Digital Accessibility
Co-Facilitator and Editor of W3C ARIA APG<https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2Fwai-aria-practices-1.2%2F&data=04%7C01%7Cjku%40uic.edu%7Cb9abdf590f504ce8395d08d8955886e6%7Ce202cd477a564baa99e3e3b71a7c77dd%7C0%7C0%7C637423554739829165%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=TKIDL5GCLgYq964i7D5LiGQcLTc4VFDyBw8uw7R4Dvg%3D&reserved=0>

Office for Access and Equity
University of Illinois Chicago

Email: jku@uic.edu<mailto:jku@uic.edu>

Under the Illinois Freedom of Information Act any written communication to or from university employees regarding university business is a public record and may be subject to public disclosure.



From: Matt King <a11ythinker@gmail.com>
Date: Friday, February 12, 2021 at 11:23 AM
To: 'Bristow, Alan' <Alan.Bristow@elections.ca>, 'Steve Green' <steve.green@testpartners.co.uk>, w3c-wai-ig@w3.org <w3c-wai-ig@w3.org>
Subject: RE: Invalid ARIA necessarily a WCAG fail? (Role menuitem missing required parent role (group,menu,menubar)
Alan,

I agree 100% with Steve, but there is one point I think deserves a bit of
clarification:

>In the case of role="menuitem", at least 90% of the time the issue is that
the attribute should be removed from the link because it is in a navigation
menu, not an application menu.
>In the rare case that it really is an application menu, the error relates
to the parent element as you described.

In that statement, the word "menu" is being used in the colloquial sense,
not with the meaning assigned to it in ARIA. The statement could be
re-written as:

>In the case of role="menuitem", at least 90% of the time the issue is that
the attribute should be removed from the link because it is not in the
context of a UI component that is intended to behave like an ARIA menu.

The ARIA menubar and menu button patterns require specific behaviors. For
example, the menubar pattern is required to behave like native Windows or
Mac application menubars. Thus the term "application menu" in Steve's
statement. For example, the menubar is a single tab stop and it supports
arrow key and first-letter navigation within it. You are not allowed to use
the ARIA menu role or menuitem role unless your UI component conforms to all
the requirements of one of the menu patterns.

As Steve says, 90% of the time, people make a set of navigation links that
look kind of like a menubar but they don't intend to, and don't need to,
provide all the functionality of a menubar. So, they should not be using the
menuitem role. Instead, they should be doing something more like the ARIA
disclosure pattern, like this example:
https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Furldefense.com%2Fv3%2F__https%3A%2F%2Fw3c.github.io%2Faria-practices%2Fexamples%2Fdisclosure%2Fdisclosure-navigati__%3B!!DZ3fjg!tUInZ_Edodn3tncVw9wDJQNqWL4emX9hsLXhTK-FBcQpTL1LlnW7W9JwWAZdPR8%24&amp;data=04%7C01%7Cjku%40uic.edu%7C48be9248494a437c8b5908d8cf7ae1e7%7Ce202cd477a564baa99e3e3b71a7c77dd%7C0%7C0%7C637487473979342851%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&amp;sdata=OJJA4o9M7DX8xzBtxOXJKCaMU7W6%2F1JG1I7yjr22Mhg%3D&amp;reserved=0
on.html

On the other hand, if they have good reason to use menuitem, they would need
to conform to the much more complex requirements implemented in this menubar
example:
https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Furldefense.com%2Fv3%2F__https%3A%2F%2Fw3c.github.io%2Faria-practices%2Fexamples%2Fmenubar%2Fmenubar-navigation.htm__%3B!!DZ3fjg!tUInZ_Edodn3tncVw9wDJQNqWL4emX9hsLXhTK-FBcQpTL1LlnW7W9JwBVaVN5g%24&amp;data=04%7C01%7Cjku%40uic.edu%7C48be9248494a437c8b5908d8cf7ae1e7%7Ce202cd477a564baa99e3e3b71a7c77dd%7C0%7C0%7C637487473979342851%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&amp;sdata=WJ5leXolYpDVVqmOlJRG%2BQ%2Bqi1l8789cKVHwkqHoRBs%3D&amp;reserved=0
l

As noted on the example page, that pattern should typically not be used for
navigation links. More typical use of menubar is illustrated in this
example:
https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Furldefense.com%2Fv3%2F__https%3A%2F%2Fw3c.github.io%2Faria-practices%2Fexamples%2Fmenubar%2Fmenubar-editor.html__%3B!!DZ3fjg!tUInZ_Edodn3tncVw9wDJQNqWL4emX9hsLXhTK-FBcQpTL1LlnW7W9Jwv-IDwjk%24&amp;data=04%7C01%7Cjku%40uic.edu%7C48be9248494a437c8b5908d8cf7ae1e7%7Ce202cd477a564baa99e3e3b71a7c77dd%7C0%7C0%7C637487473979342851%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&amp;sdata=5YeVotthIuE1Vcz0G%2B94cS5MreQwPwZdRq7kFAFUea0%3D&amp;reserved=0

Hth,
Matt King

-----Original Message-----
From: Bristow, Alan <Alan.Bristow@elections.ca>
Sent: Wednesday, February 10, 2021 8:57 AM
To: Steve Green <steve.green@testpartners.co.uk>; w3c-wai-ig@w3.org
Subject: Re: Invalid ARIA necessarily a WCAG fail? (Role menuitem missing
required parent role (group,menu,menubar)

Thank you Steve for this most helpful advice.

I entirely understand and agree with the need to use the tool as a clue, not
an answer.

Thank you again for the advice and prompt reply.

Regards,

Alan
________________________________________
From: Steve Green <steve.green@testpartners.co.uk>
Sent: Wednesday, February 10, 2021 9:46 AM
To: Bristow, Alan; w3c-wai-ig@w3.org
Subject: RE: Invalid ARIA necessarily a WCAG fail? (Role menuitem missing
required  parent role (group,menu,menubar)

Yes, there will be a failure of SC 4.1.2 (name, role and value). Which
element the failure relates to will depend on what the intended
functionality is.

In the case of role="menuitem", at least 90% of the time the issue is that
the attribute should be removed from the link because it is in a navigation
menu, not an application menu. In the rare case that it really is an
application menu, the error relates to the parent element as you described.

The bottom line is that you can't just copy and paste the error description
from a tool into your report. You must inspect the code and find out what's
really wrong. This principle applies to every tool for every WCAG success
criterion because tools frequently misdiagnose issues even when they are
correct to report that there is an issue (i.e. it's not a false positive).

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: Bristow, Alan <Alan.Bristow@elections.ca>
Sent: 10 February 2021 14:29
To: w3c-wai-ig@w3.org
Subject: Invalid ARIA necessarily a WCAG fail? (Role menuitem missing
required parent role (group,menu,menubar)

Hi,

If I find (via an excellent ARIA checker bookmarklet) an issue such as a
link with role="menuitem" with no required parent role (group,menu,menubar)
present on the page, am I correct to record this as a WCAG fail?

Apologies in advance if this is fairly obvious and I just missed it.

Thanks.

Alan

-Alan Bristow
Web Programmer
Elections Canada
alan.bristow@elections.ca