可访问 HTML 下拉菜单

Question

我需要更改我的下拉菜单，它适用于鼠标，但我想让它更易于使用键盘访问。

PHP代码是：

<div id="nav-collapsed-icon">
    <div class="icon-menu"></div>
</div>   
<div id="menu_section"> 
    <div class="opened_menu"> 
        <nav id="nav-main" class="nav-collapse cf collapse" role="navigation">
            <div class="nav-wrap">
                <div class="right_nav">
                    <?php 
                        if ( has_nav_menu( 'top_right_navigation' ) ) {
                            wp_nav_menu(array(
                                'theme_location' => 'top_right_navigation',
                                'menu_class' => 'sf-menu',
                                'link_after' => ''
                            )); 
                        }
                    ?>
                </div>
            </div>
        </nav>
    </div>
    <div class="clearfix"></div>
</div>

Answer 1

从 WAI-ARIA 1.0 创作实践开始，然后查看菜单部分。

https://www.w3.org/TR/wai-aria-practices/#menu

它告诉您键盘交互应该如何工作。

可访问 HTML 下拉菜单

Accessible HTML dropdown menu

html

php

accessibility