[wp-trac] [WordPress Trac] #58098: Empty top-level menu item to have role=button

[WordPress Trac]

#58098: Empty top-level menu item to have role=button
-------------------------------+------------------------------
 Reporter:  robanna            |       Owner:  (none)
     Type:  enhancement        |      Status:  new
 Priority:  normal             |   Milestone:  Awaiting Review
Component:  Menus              |     Version:
 Severity:  normal             |  Resolution:
 Keywords:  reporter-feedback  |     Focuses:  accessibility
-------------------------------+------------------------------

Comment (by brasofilo):

 It's my first time working with accessibility and arrived here researching
 this exact matter.
 The menu is generated by `wp_nav_menu` and I've added the role with the
 following filter:

 {{{#!php
 <?php
 add_filter( 'nav_menu_link_attributes', function ( $atts, $item, $args,
 $depth ) {
         if ( $atts['href'] === '#' || empty($atts['href']) ) {
                 $atts['role'] = 'button';
         }
     return $atts;
 }, 10, 4 );
 }}}


 [https://wordpress.org/plugins/accessibility-checker/ This plugin] has the
 [https://equalizedigital.com/accessibility-checker/improper-use-of-link
 /following documentation] that justifies the need to have "role=button" in
 empty links:

 > **Why using links for buttons is confusing**
 >
 > When a screen reader user hears “link” or “button” when they encounter
 an element, this creates an expectation both of how they can interact with
 the element and what it will do.
 >
 > For example, hearing “Link. Download” creates an expectation that
 triggering the element will redirect the user to a different area of the
 website where they can download something.
 >
 > In contrast, if you heard “Button. Download,” then you would expect a
 file to download immediately without having to go to a different page. You
 would also expect the spacebar to work to trigger the download.
 >
 > If you use a link instead of a button on elements of the website that
 are normally expected to be buttons, it can be confusing and disorienting
 for users because the element will not behave the way they expect it to.
 >
 > **Relevant WCAG 2.1 Success Criteria**
 > [https://www.w3.org/TR/WCAG21/#info-and-relationships/ 1.3.1 Info and
 Relationships – Level A]
 >
 >> This guideline requires that information and the structure of elements
 can be programmatically determined, which includes the use of proper
 semantic HTML.
 >
 > [https://www.w3.org/TR/WCAG21/#consistent-identification/ 3.2.4 –
 Consistent Identification – Level AA]
 >
 >> This guideline requires that components of a web page that have the
 same functionality be identified consistently.
 >
 > [https://www.w3.org/TR/WCAG21/#name-role-value/ 4.1.2 – Name, Role,
 Value – Level A]
 >
 >> This guideline requires all user interface components, including
 buttons, must have a name and role that can be programmatically determined
 through the code.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/58098#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform