相关疑难解决方法(0)

我们正在实施(即添加)WAI-ARIA支持到Web门户的主导航菜单.菜单如下所示:

菜单是通过经典的<ul>/ <li>/ <a>DOM树实现的,用CSS设计样式,看起来像水平标签.

对于这样的小部件,推荐的WAI-ARIA实现是什么？

我将在这里发布一个可能的实现作为答案,以便让事情顺利进行.

如果您知道/不关心WAI-ARIA上下文中的CSS导航菜单,请跳过其余段落.

TA

序言(可以这么说)

我已经阅读了来自w3org的最新WAI-ARIA规范的许多部分,以获得一般性理解,分类等.然后我读了几个UI小部件实现的例子.我找不到任何专门针对这样的CSS导航菜单的例子.我一直找到的最近的小部件是Menu,MenuBar和TabPanel.当然,我也查看过免费ARIA社区小组(这个问题最初发布的地方).

我会说这些小部件都没有与(CSS)导航菜单完全匹配.例如,TabPanel可以控制页面中的一些内容( - > aria-controls),也可以控制MenuBar; 但我完全不确定导航菜单是否控制了页面中的内容(它控制下一页显示).不进一步,还有一些其他差异.参考文献在帖子的最后.如果有人作为更好(或更合适)的导航菜单示例,我们很高兴知道它们.

参考

• https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases#Menubar_and_Menu
• http://wiki.jqueryui.com/w/page/38666403/Menubar
• http://www.oaa-accessibility.org/examplep/menubar2/
• http://test.cita.illinois.edu/aria/menubar/
• http://dev.aol.com/dhtml_style_guide#menu
• http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm
• http://www.w3.org/TR/wai-aria-practices/#menu
• http://www.w3.org/TR/wai-aria/roles
• http://www-03.ibm.com/able/resources/wai_aria_intro.html

您可能知道,Twitter引导工具提示无法访问(IE浏览器不会读取它们).要做到这一点,应该做以下事情:

1. 在调用tooltip()函数时,生成的文本元素(包含工具提示文本的元素)应该添加一个新属性:aria-hidden="true".
2. 原来的元素(一个tooltip()被称为上)应该得到添加到它的属性:aria-describedby="#<tooltip-id>",其中提示-ID是指刚在上面创建的新元素的ID.

由于目前的Javascript工作原理是选择所有与元素的方法.tooltip类和应用tooltip()功能的话,我不知道我怎么能做到这一点,而无需修改源代码tooltip()的功能.

以下是按钮代码的示例:

<span role="button" rel="tooltip" title="Add Youtube Video" class="fancyPostButton span1" tabindex="0" style="-webkit-user-select: none;padding-top: 10px">
    <div id="fancyPostVideoPicker" class="fancyPostAttachment videoAttachment glyphicons film centerMe">
        <i></i>
    </div>
</span>