Question

我使用纯css创建了一个下拉菜单，它可以用鼠标正常工作，但我想通过键盘更容易访问它。我不想使用Javascript来执行此操作。

以下是html代码的片段，以及jsfiddle：

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About us &raquo;</a>
            <ul>
                <li><a href="#">Option 1</a></li>
                <li><a href="#">Option 2</a></li>
                <li><a href="#">Option 3</a></li>
                <li><a href="#">Option 4</a></li>
                <li><a href="#">Option 5</a></li>
            </ul>
        </li>
    </ul>
</nav>

这是CSS：

 BODY {
    font-family : Arial, Helvetica, Swiss, Geneva, Sans-serif; 
    font-size: 0.8em;
    width: 795px;
    margin: 0px auto;
    padding: 0px;
    }
    nav ul ul {
        display: none;
    }
    nav ul li:hover > ul, nav ul li:focus > ul, nav ul li:active > ul {
        display: block;
    }
    nav ul {
        background: #696969; 
        padding: 0px 0px;
        list-style: none;
        position: relative;
        display: inline-table;
    }
    nav ul:after {
        content: ""; 
        clear: both; 
        display: block;
    }
    nav ul li {
        float: left;
        border-bottom: 1px solid #FFF;
    }
    nav ul li:hover, nav ul li:focus, nav ul li:active {
        background: #F8A509;
    }
    nav ul li:hover a, nav ul li:focus a, nav ul li:active a {
        color: #fff;
    }
    nav ul li a {
        display: block; 
        padding: 4px 14px;
        color: #fff; 
        text-decoration: none;
    }
    nav ul ul {
        background: #BDD575; 
        padding: 0px;
        position: absolute; 
        top: 100%;
        -moz-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.20);
        -webkit-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.20);
        box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.20);
    }
    nav ul ul li {
        float: none; 
        border-bottom: 1px solid #FFF;
        position: relative;
    }
    nav ul ul li a {
        padding: 4px 14px;
        color: #fff;
        white-space: nowrap;
        border-right: 1px solid #FFF;
    }   
    nav ul ul li a:hover, nav ul ul li a:focus, nav ul ul li a:active {
        background: #9ED112;
        color: #fff;
    }
    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

我出错的任何想法？

TIA提供任何有用的建议。

Answer 1

W3C的 Accessible Rich Internet Applications (WAI-ARIA) 规范草案使得可以使用明确传达构成菜单系统的各个部分的角色，状态和属性的属性来补充HTML。当辅助技术（AT）用户与菜单交互时，ARIA将更新的信息传递给他们的AT，然后他们的AT以有意义的方式传达该信息。

详细了解 Accessible Dropdown Menus

Working Demo

<强>标记

<nav role="navigation" aria-label="Main menu">
    <ul id="nav" role="menubar" aria-hidden="false">
        <li role="menuitem"  aria-haspopup="false"><a href="#">Home</a></li>
        <li tabindex="0" aria-haspopup="true"><a href="#">About us &raquo;</a>
            <ul data-test="true" role="menu" aria-hidden="true">
                <li role="menuitem"><a href="#" tabindex="-1">Option 1</a></li>
                <li role="menuitem"><a href="#" tabindex="-1">Option 2</a></li>
                <li role="menuitem"><a href="#" tabindex="-1">Option 3</a></li>
                <li role="menuitem"><a href="#" tabindex="-1">Option 4</a></li>
                <li role="menuitem"><a href="#" tabindex="-1">Option 5</a></li>
            </ul>
        </li>
    </ul>
</nav>

无需Javascript的无障碍HTML5 / CSS3下拉菜单

1 个答案:

Working Demo