bannercontentinfonavigationCAUTION! Before considering use of the ARIA menubar pattern for site navigation, it is important to understand:
+menubar pattern requires complex functionality that is unnecessary for typical site navigation that is styled to look like a menubar with expandable sections or fly outs.
The following implementation of the
design pattern for menubar
- demonstrates a menubar that provides site navigation menus.
- Each item in the menubar represents a section of a web site for a mythical university and opens a submenu containing menu items that link to pages within that section.
+ demonstrates how a menubar can provide navigation menus.
+ The parent menu items in the menubar represent a section of a mythical university web site and open a submenu containing menu items that link to pages within that section.
+ The navigation system it illustrates is comparable to the navigation illustrated in the Example of Disclosure for Navigation Menus.
+ As noted above, the disclosure pattern is better suited for most web sites because few sites need the additional keyboard functionality required to support the ARIA menubar and menu roles.
Similar examples include:
currentColor value for the fill and stroke properties of the polygon element.currentColor value for the fill and stroke properties of the SVG polygon element is used to synchronize the color with text content.
+ If specific colors are used to specify the fill and stroke properties, these colors will remain the same in high contrast mode, which could lead to insufficient contrast between the icon and the background or even make the icon invisible if its color matches the high contrast mode background.
+ nav element that has an aria-label that matches the label on the menubar.| Role | +Attribute | +Element | +Usage | +
|---|---|---|---|
banner |
+ + | header |
+
+
|
+
navigation |
+ + | nav |
+ + Identifies the region containing the mythical university navigation. + | +
| + | aria-label="Mythical University" |
+ nav |
+
+ Provides an accessible name for the navigation landmark that describes the purpose of the navigation.
+ |
+
region |
+ + | section |
+
+
|
+
| + | aria-labelledby="idref" |
+ section |
+
+ Provides the region with an accessible name from the h1 element.
+ |
+
contentinfo |
+ + | footer |
+
+
|
+
- aria-label="string"
-
+ aria-label="string"
|
ul
@@ -464,10 +628,10 @@ Menubar |
||
|---|---|---|---|
- tabindex="-1"
+ tabindex="-1"
|
a
@@ -476,10 +640,10 @@ MenubarMakes thea element keyboard focusable, but not part of the tab sequence.
|
||
- tabindex="0"
+ tabindex="0"
|
a
@@ -487,43 +651,59 @@ Menubar |
|
|
| + |
+ aria-current="page"
+ |
+
+ a
+ |
+
+
|
+
- aria-haspopup="true"
+ aria-haspopup="true"
|
a
|
Indicates the menuitem has a submenu. | |
- aria-expanded="true"
+ aria-expanded="true"
|
a
|
Indicates the submenu is open. | |
- aria-expanded="false"
+ aria-expanded="false"
|
a
|
Indicates the submenu is closed. | |
none
|
@@ -564,8 +744,7 @@ |||
- aria-label="string"
-
+ aria-label="string"
|
ul
@@ -580,7 +759,7 @@ Submenu |
||
menuitem
|
@@ -595,47 +774,47 @@ |||
- tabindex="-1"
+ tabindex="-1"
|
a
|
Keeps the a element focusable but removes it from the Tab sequence. |
|
- aria-haspopup="true"
+ aria-haspopup="true"
|
a
|
Indicates the menu item has a submenu. | |
- aria-expanded="true"
+ aria-expanded="true"
|
a
|
Indicates the submenu is open. | |
- aria-expanded="false"
+ aria-expanded="false"
|
a
|
Indicates the submenu is closed. | |
none
|
diff --git a/test/tests/menubar_menubar-navigation.js b/test/tests/menubar_menubar-navigation.js
index 68565d40f7..0df4348d8b 100644
--- a/test/tests/menubar_menubar-navigation.js
+++ b/test/tests/menubar_menubar-navigation.js
@@ -1,88 +1,130 @@
const { ariaTest } = require('..');
-const { By, Key } = require('selenium-webdriver');
+const { Key } = require('selenium-webdriver');
+const assert = require('assert');
const assertAttributeValues = require('../util/assertAttributeValues');
const assertAriaLabelExists = require('../util/assertAriaLabelExists');
+const assertAriaLabelledby = require('../util/assertAriaLabelledby');
const assertAriaRoles = require('../util/assertAriaRoles');
const assertRovingTabindex = require('../util/assertRovingTabindex');
const exampleFile = 'menubar/menubar-navigation.html';
const ex = {
+ // landmark selectors
+ bannerSelector: '#ex1 header',
+ navigationSelector: '#ex1 nav',
+ regionSelector: '#ex1 section',
+ contentinfoSelector: '#ex1 footer',
+
+ // Title selector
+ titleSelector: '#id-page-title',
+
// menubar selector
menubarSelector: '#ex1 [role="menubar"]',
+ numberOfMenuitems: 31,
// menu selectors
anyMenuSelector: '#ex1 [role="menu"]',
- menuSelector: '#ex1 [role="menubar"]>li>[role="menu"]',
- // menuitem selectors
+ // Menubar menuitem selectors
menubarMenuitemSelector: '#ex1 [role="menubar"]>li>[role="menuitem"]',
+ menubarMenuitemWithPopupSelector: '#ex1 [role="menubar"]>li>[aria-haspopup]',
+
+ // Menuitem selectors
+ anyMenuitemSelector: '#ex1 [role="menubar"] [role="menuitem"]',
+ anyExpandableMenuitemSelector:
+ '#ex1 [role="menubar"] [role="menuitem"][aria-expanded]',
+
+ // Menu menuitem selectors
anyMenuMenuitemSelector: '#ex1 [role="menu"]>li>[role="menuitem"]',
- menuMenuitemSelectors: [
- '#ex1 [role="menubar"]>li:nth-of-type(1)>[role="menu"]>li>[role="menuitem"]',
- '#ex1 [role="menubar"]>li:nth-of-type(2)>[role="menu"]>li>[role="menuitem"]',
- '#ex1 [role="menubar"]>li:nth-of-type(3)>[role="menu"]>li>[role="menuitem"]',
- ],
- groupSelector: '#ex1 [role="group"]',
- numMenus: 3,
- numSubmenus: 3,
+
+ // Submenu item selectors
+ submenuMenuitemsWithHasPopup:
+ '#ex1 [role="menu"] [role="menuitem"][aria-haspopup]',
+ submenuMenuitemsWithExpanded:
+ '#ex1 [role="menu"] [role="menuitem"][aria-expanded]',
+
+ // Selectors for testing expandable menus in submenus
numTotalMenus: 6,
- submenuLocations: [
- // [