什么是导航栏/菜单的 WAI-ARIA 兼容实现 [英] What is a WAI-ARIA compliant implementation for navigation bar/menu

问题描述

我们正在为门户网站的主导航菜单实施(即添加)WAI-ARIA 支持.菜单是这里显示的那个:

Menu 是通过经典的

/
• / DOM 树实现的，样式为CSS 看起来像水平标签.

  这种小部件的 WAI-ARIA 兼容实现是什么?

  我已经阅读了 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-咏叹调实践/#menu
  • http://www.w3.org/TR/wai-aria/roles
  • http://www-03.ibm.com/able/resources/wai_aria_intro.html

  解决方案

  一个可能的实现是:

  HTML 结构:

  <!-- 外包装--><ul><!-- 主导航栏容器--><li><!-- 没有子菜单的一级项目--><a><!-- 目标网址--></a>

<li><!-- 带子菜单的一级项目--><a><!-- 目标网址--></a><ul><!-- 二级菜单容器--><li><!-- 二级项目--><a></a><!-- 目标网址-->

角色:

• role="navigation" 用于外包装
• role="menubar" 用于
  导航栏容器
  • role="menu" 用于二级
    容器
    • role="presentation" 用于第一级和第二级
    • 菜单项(在公开的可访问菜单栏结构中不需要它们)
    • role="menuitem" 用于第一级和第二级 菜单项

    属性:

    • aria-haspopup="true" 用于具有子菜单的第一级 菜单项
    • aria-labelledby="前一个菜单项的ID"，用于二级
      容器

      状态:

      • aria-selected="true" 在当前访问的第一级或第二级 项目上；aria-selected="false" 在其他 项目上.即强制执行选定的<==>当前页面"
      的概念
      • aria-expanded="true/false" 用于二级
        容器
        • aria-hidden="true/false" 用于二级
          容器
          • aria-activedescendant="" 用于主
            导航栏容器.这是使用 tabindex 的替代方法
            • tabindex=0 当前访问的 项目；tabindex=-1 在其他 项目上.那是为了在跳转到导航栏时首先关注当前页面.它是使用 aria-activedescendant 的替代方法

            键盘:

            • Tab:将焦点从 Web 应用程序中的其他点移入/移出菜单.
            • Shift+Tab:以相反的顺序将焦点从 Web 应用程序中的其他点移入/移出菜单.
            • 向右箭头:下一个导航栏项
            • 向左箭头:上一个导航栏项
            • Enter:激活当前关注的项目(即导航到相应的 URL)
            • Space:激活当前关注的项目(即导航到相应的 URL)

            2014 年 8 月:咏叹调选择与菜单项

            回复@Joshua Muheim 评论:现在我可以看到从这里，以及来自 他的参考，menuitem 角色不允许使用 >aria-selected 属性.
            正如我从最近的 SO 答案 中读到的那样，鉴于事物的当前状态，有一些解决方案，并且有一个新的提议属性

            We are in the process of implementing (i.e. adding) WAI-ARIA support to the main navigation menu of a web portal. Menu is the one shown here:

            Menu is implemented by means of classic <ul> / <li> / <a> DOM tree, styled with CSS to look like horizontal tabs.

            What is a WAI-ARIA compliant implementation for such a widget?

            I've read many parts of most recent WAI-ARIA specs from w3org for a general understanding, taxonomy, and so on. Then I've read about several examples of UI widget implementations. I could not find any example specifically targetd at such a CSS navigation menu. The closest widgets I've always found around are the Menu, the MenuBar, and the TabPanel. Of course I also looked in Free ARIA Community group (where this question was originally posted).

            I'd say that none of those widgets exactly match a (CSS) navigation menu. As an example, TabPanel may control some content in the page (--> aria-controls), maybe MenuBar too; but I'm not at all sure that a navigation menu controls content in the page (it controls the next page to show). Without going further, there are some other differences as well. References are at the end of the post. If anyone as better (or more fit) examples of navigation menu, we'd be glad to know about them.

            References

            • 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

            解决方案

            A possible implementation would be:

            HTML structure:

            <div> <!-- Outer wrapper -->
              <ul> <!-- Main navigation bar container -->
                <li> <!-- First-level item without submenu -->
                  <a> <!-- Destination URL -->
                  </a>
                </li>
                <li> <!-- First-level item with submenu -->
                  <a> <!-- Destination URL -->
                  </a>
                  <ul> <!-- Second-level menu container -->
                    <li> <!-- Second-level item -->
                      <a>
                      </a> <!-- Destination URL -->
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
            

            Roles:

            • role="navigation" for outer wrapper <div>
            • role="menubar" for <ul> navigation bar container
            • role="menu" for second-level <ul> containers
            • role="presentation" for first- and second-level <li> menu items (they are not needed in the exposed accessible menubar structure)
            • role="menuitem" for first- and second-level <a> menu items

            Properties:

            • aria-haspopup="true" for first-level <a> menu items having a submenu
            • aria-labelledby="ID of previous <a> menu item" for second-level <ul> containers

            States:

            • aria-selected="true" on currently visited first- or second-level <a> item; aria-selected="false" on the other <a> items. That is to enforce the concept "selected <==> current page"
            • aria-expanded="true/false" for second-level <ul> containers
            • aria-hidden="true/false" for second-level <ul> containers
            • aria-activedescendant="" for main <ul> navigation bar container. This is an alternative to working with tabindex
            • tabindex=0 on currently visited <a> item; tabindex=-1 on the other <a> items. That is in order to first focus on the current page when tabbing to the navigation bar. It is an alternative to working with aria-activedescendant

            Keyboard:

            • Tab: Move focus in/out of the menu from other points in the web application.
            • Shift+Tab: Move focus in/out of the menu from other points in the web application, in the reversed order.
            • Right arrow: Next navigation bar item
            • Left arrow: Previous navigation bar item
            • Enter: Activate currently focused item (i.e. navigate to corresponding URL)
            • Space: Activate currently focused item (i.e. navigate to corresponding URL)

            Aug/2014: aria-selected Vs menuitem

            In reply to @Joshua Muheim comment: now I can see from here, as well as from his reference, that aria-selected attribute is not allowed for menuitem role.
            As I read from this recent SO answer there are some solutions given the current state of things, and there is a new proposed attribute too.

            这篇关于什么是导航栏/菜单的 WAI-ARIA 兼容实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！