An ARIA-enabled site navigator is made up of a container widget that enables interaction with the navigation items. The widget is wrapped in a navigation region. The requirements for the navigation widget, items, and region are as follows.

1. Navigation container widget: the navigation items need to be contained in an appropriate widget, such as a tree, menubar, toolbar, or listbox. See below for additional guidance on implementation using specific widget containers. If the navigator is for a hierarchical site or application, the hierarchy may be represented in one of two ways: by using a tree for the container widget or by using a separate widget for each level of the hierarchy. If a hierarchical site or application uses a tabbed navigation construct, it will need to use one of the patterns that implements a separate widget for each level of the hierarchy. The container widget implementation should address the following considerations and requirements.
   1. Label: The widget should be labelled by using aria-label or aria-labelledby. The label should briefly and adequately describe the scope of navigation. For example, if the navigator scope is the entire site or application, the label could be set to the name of the site or application. Labels should normally be brief, e.g., one to three words. If multiple widgets are used to provide navigation of a hierarchy, the widget label for levels below the root widget should use aria-labelledby to refer to the label of the item in the parent widget that represents the currently active navigation element.
   2. Focus management: When the widget receives focus, the item in the widget that is currently active (e.g., currently displayed) should receive the focus.
   3. aria-controls: aria-controls should be set with a value that refers to the content region that is controlled by the navigator. If multiple navigators are used to provide navigation of a hierarchy, navigation widgets that change the elements of a child navigator should have aria-controls set with a value that refers to the controlled child navigation widget.
   4. aria-multiselectable: If the navigation widget is overloaded with non-navigation functions and if those functions can be performed on multiple elements, then the widget must support aria-multiselectable and have it set to true.
2. Navigation items: each page or content container represented in the navigator should be represented by an element, such as an option, treeitem, menuitemradio, or button. If the navigator visually communicates which page is currently displayed, the navigation item must be able to programmatically communicate the currently displayed status using aria-selected, aria-checked, or aria-pressed. For this reason, a navigation item may not be a link unless the link is contained inside an option or treeitem. The states and properties of the navigation item should communicate the following.
   1. Name of the target page or function: Every item must have an accessible name.
   2. Current display status: The item representing the page that is currently displayed should have either aria-selected or, if it is a button, aria-pressed set to true. All other items in the widget must have the same state set to false. If the navigation widget is overloaded with non-navigation functions and if it supports multi-selection, then aria-checked should be used instead of aria-selected to indicate the display status.
   3. Operational selection status: If the navigator is overloaded with non-navigation functions, each selected item must have aria-selected set to true and each selectable item must have aria-selected set to false.
3. Navigation region: Each navigation widget should be wrapped in a container with role navigation and have a label that is the same as the label on the the widget. If multiple widgets are used to support a hierarchy and if the widgets are sequential in the Tab order, then the navigation regions for child widgets should be nested inside the navigation region of the parent.

The following two sections provide detailed descriptions of how to meet the above implementation requirements for site navigators using specific widgets. The Site Navigator Tree section describes how to build a hierarchical navigator using a tree widget that contains links. The Site Navigator Tabbed Style section describes how to implement tabbed style site navigation using a toolbar containing toggle buttons, a menubar containing menuitemradio elements, or a listbox containing links. These are provided as examples and are not necessarily the only implementation options that can meet all the requirements described in this section.

To build a site navigator tree, build a tree where each treeitem contains a link. The states and properties of the tree and tree items should be set as follows.

• aria-label or aria-labelledby: If the navigator has a visual label that briefly and adequately describes the scope of navigation, the element with role tree should have aria-labelledby set with a value that refers to the element containing that label. Otherwise, aria-label should be used to provide an appropriate label. See Site Navigator for more details on appropriate labelling of a navigation widget.
• aria-controls: The element with role tree should have aria-controls set with a value that refers to the content region controlled by the navigator. Typically, this is the element with role main.
• aria-multiselectable: aria-multiselectable should be set to false unless the navigator also provides non-navigation functions that require selection. An example of non-navigation function is the ability to re-arrange pages in a wiki.
• aria-selected: If aria-multiselectable is false, the treeitem containing the link to the page or content that is currently displayed should be indicated by setting aria-selected to true, and all other tree items should have aria-selected set to false. If aria-multiselectable is true, then aria-selected should be used to indicate which items are either selectable or selected for non-navigation functions.
• aria-checked: if aria-multiselectable is false, aria-checked should not be specified. If aria-multiselectable is true, then aria-checked should be set true on the tree item containing the link to the page or content that is currently displayed, and all other tree items should have aria-checked set to false.
• aria-haspopup: if aria-multiselectable is false, aria-haspopup should not be specified. If aria-multiselectable is true, one method for exposing non-navigation functions is to provide a pop-up menu containing those functions. If this is done, nodes that support non-navigation functions should have aria-haspopup set to true and the pop-up menu must also provide as its first option the default navigation function. In this way, the user can perform the navigation function simply by pressing enter twice. Or, the user can easily access non-navigation functions by pressing enter and then navigating the pop-up menu.
• Navigation region: the tree should be wrapped in a container with role navigation, which also has the same label as the tree.

Option 1: Listbox containing links

• To build a tabbed style navigator using a listbox, implement the Listbox design pattern where each option element contains a link. The listbox, options, and links should have the following states, properties, and behaviors.
• aria-label or aria-labelledby: If the navigator has a visual label that briefly and adequately describes the scope of navigation, the element with role listbox should have aria-labelledby set with a value that refers to the element containing that label. Otherwise, aria-label should be used to provide an appropriate label. See Site Navigator for more details on appropriate labelling of a navigation widget. If multiple navigators are used to support a hierarchy, then a navigator containing elements that are controlled by a parent navigator should have aria-labelledby set to a value that refers to the currently active navigation item in the parent navigator.
• aria-controls: The element with role listbox should have aria-controls set with a value that refers to the content region controlled by the navigator. Typically, this is the element with role main. If multiple listboxes are used to support a hierarchy, then listboxes that control another listbox should have aria-controls set with a value that refers to the controlled listbox.
• aria-multiselectable: aria-multiselectable should be set to false unless the navigator also provides non-navigation functions that require selection. An example of non-navigation function is the ability to re-arrange pages in a wiki.
• aria-selected: If aria-multiselectable is false, the option containing the link to the page or content that is currently displayed should be indicated by setting aria-selected to true, and all other options should have aria-selected set to false. If aria-multiselectable is true, then aria-selected should be used to indicate which options are either selectable or selected for non-navigation functions.
• aria-checked: if aria-multiselectable is false, aria-checked should not be specified. If aria-multiselectable is true, then aria-checked should be set to true on the option containing the link to the page or content that is currently displayed, and all other options should have aria-checked set to false.
• aria-haspopup: if aria-multiselectable is false, aria-haspopup should not be specified. If aria-multiselectable is true, one method for exposing non-navigation functions is to provide a pop-up menu containing those functions. If this is done, options that support non-navigation functions should have aria-haspopup set to true and the pop-up menu must also provide as its first item the default navigation function. In this way, the user can perform the navigation function simply by pressing enter twice. Or, the user can easily access non-navigation functions by pressing enter and then navigating the pop-up menu.
• Navigation region: the listbox should be wrapped in a container with role navigation, which also has the same label as the listbox.

Option 2: Toolbar containing toggle buttons

• To build a tabbed style navigator using a toolbar, implement the Toolbar design pattern with one button in the toolbar for each navigation item. Note that this pattern can not be overloaded with non-navigation functions. The toolbar and buttons should have the following states, properties, and behaviors.
• aria-label or aria-labelledby: If the navigator has a visual label that briefly and adequately describes the scope of navigation, the element with role toolbar should have aria-labelledby set with a value that refers to the element containing that label. Otherwise, aria-label should be used to provide an appropriate label. See Site Navigator for more details on appropriate labelling of a navigation widget. If multiple navigators are used to support a hierarchy, then a navigator containing elements that are controlled by a parent navigator should have aria-labelledby set to a value that refers to the currently active navigation item in the parent navigator.
• aria-controls: The element with role toolbar should have aria-controls set with a value that refers to the content region controlled by the navigator. Typically, this is the element with role main. If multiple toolbars are used to support a hierarchy, then toolbars that control another toolbar should have aria-controls set with a value that refers to the controlled toolbar.
• aria-pressed: The button for the page or content that is currently displayed should be indicated by setting aria-pressed true and all other buttons in the toolbar should have aria-pressed set to false.
• Navigation region: the toolbar should be wrapped in a container with role navigation, which also has the same label as the toolbar.

Option 3: Menu bar containing menuitemradio elements

• To build a tabbed style navigator using a menubar, implement the Menu bar design pattern with a group containing one menuitemradio element in the menubar for each navigation item. Note that this pattern can not be overloaded with non-navigation functions. The menubar and menuitemradio elements should have the following states, properties, and behaviors.
• aria-label or aria-labelledby: If the navigator has a visual label that briefly and adequately describes the scope of navigation, the element with role menubar should have aria-labelledby set with a value that refers to the element containing that label. Otherwise, aria-label should be used to provide an appropriate label. See Site Navigator for more details on appropriate labelling of a navigation widget. If multiple navigators are used to support a hierarchy, then a navigator containing elements that are controlled by a parent navigator should have aria-labelledby set to a value that refers to the currently active navigation item in the parent navigator.
• aria-controls: The element with role menubar should have aria-controls set with a value that refers to the content region controlled by the navigator. Typically, this is the element with role main. If multiple menubars are used to support a hierarchy, then menubars that control another menubar should have aria-controls set with a value that refers to the controlled menubar.
• aria-checked: The menuitemradio element for the page or content that is currently displayed should be indicated by setting aria-checked true and all other menuitemradio elements in the menubar should have aria-checked set to false.
• Navigation region: the menubar should be wrapped in a container with role navigation, which also has the same label as the menubar.