![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: accessibility
-
AuthorPosts
-
September 12, 2022 at 9:47 pm #1364826
Hello, my team updated our website to the latest version of Enfold specifically so that we can take advantage of the newest accessibility updates but after the update, we are still not seeing a role=”menu” in our main navigation when we view the source code. It looks like role=”menuitem” has been successfully added to the links with our main menu, but the <nav> is still missing the role=”menu” (it currently reads as role=”navigation”).
We are getting this error when running accessibility scans of our site:
An element with role=menuitem must be contained in, or owned by, an element with role=menu or role=menubar
HTML5
WCAG 2.0 A 4.1.1
Section 508 (2017) A 4.1.1Is there a reason why the role=”menu” is not showing up for us? Do I need to add something to the header myself?
Thanks!
September 13, 2022 at 7:57 am #1364841Hey hressl,
Thank you for the inquiry.
The role=”menu” attribute has been added to the ul.av-main-nav element. You can find it in the includes > helper-main-menu.php file around line 63.
$args = array( 'theme_location' => $avia_theme_location, 'menu_id' => $avia_menu_class, 'container_class' => $avia_menu_class, 'items_wrap' => ' <ul role="menu" class="%2$s" id="%1$s">%3$s</ul> ', 'fallback_cb' => '', 'container' => '', 'echo' => false ); $nav = wp_nav_menu( $args );
Best regards,
IsmaelSeptember 14, 2022 at 5:46 pm #1365022I see that the code you mentioned is in the backend of my website. The problem is, when I am running an accessibility scan of the site that code does not seem to be doing anything to actually add in the role=”menu” to the main nav of the website, causing us to fail our test.
Please advise on how to either overwrite the menu code so that we can place role=”menu” on the <nav role=”navigation”> element or please let us know why the code you have provided is not working for our site.
September 15, 2022 at 2:15 am #1365058Hi,
Thanks for the feedback, unfortunately in my research I can not find a difference between
role=”menu”
and
role=”navigation”
we don’t have access to a screen reader and the WCAG scanners I checked online are not free, so while we could randomly add the role=”menu”, the problem is, from past issues, is that the screen readers are not all the same, I specifically recall Jaws v15 not working on the menu when NVDA v2022 was.
We can add the role=”menu” easily anywhere with javascript for you on your site but if you can link to your testing site so I can check that it works it would help.Best regards,
MikeSeptember 19, 2022 at 4:42 pm #1365560I don’t think that I can link to our testing site as it’s a paid account. Could you tell me how to change the role=”navigation” to role=”menu” using javascript? After doing some research, it looks like the reason I may be getting this error is because the syntax of <nav role=”navigation”> is redundant, and it would be better to have it as <nav role=”menu”> because it contains “menuitems” within it.
Please advise, thank you!
September 19, 2022 at 6:50 pm #1365578Hi,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:function custom_script_change_nav_role() { ?> <script> window.addEventListener('DOMContentLoaded', function() { (function ($) { $("nav").attr('role','menu' ); })(jQuery); }); </script> <?php } add_action('wp_footer', 'custom_script_change_nav_role');
Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.