Title: Menu Accessibility
Last modified: October 18, 2024

---

# Menu Accessibility

 *  [astreck2](https://wordpress.org/support/users/astreck2/)
 * (@astreck2)
 * [1 year, 7 months ago](https://wordpress.org/support/topic/menu-accessibility/)
 * Hi,
 * I’m working on trying to make the default menu more accessible. For instance 
   I’m working on adding a button for the submenu, so users are not forced to tab
   through the submenus to reach the next top menu item and can bypass the submenus
   completely if desired. However, I’m struggling to get this to work. If you tab
   through the menus at [https://webdevelopmenta.com/shop/](https://webdevelopmenta.com/shop/)
   you’ll see the dropdown button opens automatically. Is there a way to fix this?
 * Here is the custom code I used to get what I have so far:
 * **Enqueue Custom JavaScript**
 *     ```wp-block-code
       function custom_enqueue_accessible_menu_script() {    wp_enqueue_script(        'accessible-menu',        get_stylesheet_directory_uri() . '/js/accessible-menu.js',        array('jquery'),        null,        true    );}add_action('wp_enqueue_scripts', 'custom_enqueue_accessible_menu_script');
       ```
   
 * **Add Accessible Menu Buttons:** Added this PHP code to the functions.php file:
 *     ```wp-block-code
       function custom_add_submenu_buttons($item_output, $item, $depth, $args) {    if (in_array('menu-item-has-children', $item->classes)) {        $button = '<button class="submenu-toggle" aria-expanded="false">';        $button .= '<span class="screen-reader-text">Open submenu</span>';        $button .= '</button>';        $item_output .= $button;    }    return $item_output;}add_filter('walker_nav_menu_start_el', 'custom_add_submenu_buttons', 10, 4);
       ```
   
 * Create JavaScript for Interaction
 *     ```wp-block-code
       jQuery(document).ready(function($) {    // Prevent default behavior when submenu button is focused    $('.submenu-toggle').on('focus', function(event) {        event.preventDefault(); // Prevent automatic behavior on focus    });    // Handle keydown events for the submenu toggle    $('.submenu-toggle').on('keydown', function(event) {        // Only respond to Enter (13) or Space (32)        if (event.key === 'Enter' || event.key === ' ' || event.keyCode === 13 || event.keyCode === 32) {            event.preventDefault(); // Prevent default key action            var $button = $(this);            var $submenu = $button.siblings('.sub-menu');            // Toggle aria-expanded and submenu visibility            var isExpanded = $button.attr('aria-expanded') === 'true';            $button.attr('aria-expanded', !isExpanded);            if (!isExpanded) {                $submenu.slideDown();            } else {                $submenu.slideUp();            }        }    });    // Handle mouse click events for the submenu toggle    $('.submenu-toggle').on('click', function(event) {        event.preventDefault(); // Prevent default click action        var $button = $(this);        var $submenu = $button.siblings('.sub-menu');        // Toggle aria-expanded and submenu visibility        var isExpanded = $button.attr('aria-expanded') === 'true';        $button.attr('aria-expanded', !isExpanded);        if (!isExpanded) {            $submenu.slideDown();        } else {            $submenu.slideUp();        }    });    // Close all open submenus when the Escape key is pressed    $(document).on('keydown', function(event) {        if (event.key === 'Escape' || event.keyCode === 27) {            $('.submenu-toggle[aria-expanded="true"]').each(function() {                $(this).attr('aria-expanded', 'false').siblings('.sub-menu').slideUp();            });        }    });});
       ```
   
 * **CSS styling**
 *     ```wp-block-code
       .submenu-toggle {    background: none;    border: none;    cursor: pointer;    margin-left: 10px;    font-size: 16px;}.submenu-toggle .screen-reader-text {    position: absolute;    width: 1px;    height: 1px;    padding: 0;    margin: -1px;    overflow: hidden;    clip: rect(0, 0, 0, 0);    border: 0;}.submenu-toggle[aria-expanded="true"]::after {    content: '▲';}.submenu-toggle[aria-expanded="false"]::after {    content: '▼';}
       ```
   
 * Any help or guidance would be appreciated. 
   Ashley
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fmenu-accessibility%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

The topic ‘Menu Accessibility’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/oceanwp/4.1.6/screenshot.png)
 * OceanWP
 * [Support Threads](https://wordpress.org/support/theme/oceanwp/)
 * [Active Topics](https://wordpress.org/support/theme/oceanwp/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/oceanwp/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/oceanwp/reviews/)

## Tags

 * [menu](https://wordpress.org/support/topic-tag/menu/)

 * 0 replies
 * 1 participant
 * Last reply from: [astreck2](https://wordpress.org/support/users/astreck2/)
 * Last activity: [1 year, 7 months ago](https://wordpress.org/support/topic/menu-accessibility/)
 * Status: not resolved