多级下拉可访问性改进

时间:2014-02-07 22:57:44

标签: javascript html5 accessibility w3c wai-aria

我正在尝试使用以下代码创建多级drodown菜单:

<nav role="navigation" class="navigation">
    <ul>
        <li><a href="index.html">Home</a>

        </li>
        <li><a href="about.html">About</a>

            <ul>
                <li><a href="company.html">Company</a>
                    <ul>
                        <li><a href="#">Brands</a></li>
                        <li><a href="#">Stuff</a></li>
                        <li><a href="#">More Stuff</a></li>
                    </ul>
                </li>
                <li><a href="team.html">Team</a>

                </li>
                <li><a href="goals.html">Goals</a>

                </li>
                <li><a href="photos.html">Photos</a>

                </li>
            </ul>
        </li>
        <li><a href="portfolio.html">Portfolio</a>

            <ul>
                <li><a href="company.html">Chairs</a>

                </li>
                <li><a href="team.html">Beds</a>

                </li>
                <li><a href="goals.html">Fireplace</a>

                </li>
                <li><a href="photos.html">Onother</a>

                </li>
            </ul>
        </li>
        <li><a href="portfolio.html">Portfolio</a>

        </li>
    </ul>
</nav>

使用一些jQuery,我隐藏了所有第二/第三级项目,并添加了一个类,通过CSS在右侧显示“+”。

演示:http://jsfiddle.net/ZJug9/1/

这适用于大多数用户,但是当我尝试在Mac上使用VoiceOver时,我无法简单地找到导航的方法。也许是因为我不知道关于VoiceOver的所有事情,或者我对HTML和JS做错了什么

我的代码中是否缺少可以改善盲人使用屏幕阅读器的可访问性的内容。我应该做些什么以及为什么这个特定的例子。

任何最新的工具或文档,可以帮助我快速了解辅助功能。我认为W3C可访问性网站太混乱和混乱。我也读了一些关于Aria的内容,但是文档非常复杂,有些人说使用适当的标记已经足够了。

请尝试回答此示例

更新 我添加了对隐藏的ul隐藏的可见性,因为屏幕阅读器不会说不可见的元素,我仍然可以使用CSS3进行高度转换 演示2:http://jsfiddle.net/ZJug9/3/

0 个答案:

没有答案