CUE template: Conformance—Behaviour

The elements specified below must appear in the order below. Elements to be nested are indicated by nested list items.

Skip links

1. At low resolutions ( viewport width below 43em) the all skip links must be visible
2. At higher resolutions:
   1. The 'access bar' must be hidden on page load.
   2. When access links are focused, the access bar becomes visible.
   3. When focus leaves the access bar, the bar becomes hidden again.

Navigation

3. ARIA style keyboard navigation must be used for menus and interfaces (tab between menus, cursor keys within).

Site navigation

4. If using drop-down menus
   1. When JavaScript is not available, only the top level menu items are available (All links must be present lower in the site IA via the section navigation menus on those pages). Otherwise…
   2. Hovering over menu links must display a drop-down menu — any other open drop-down menus must be closed (no more than one open at a time)
   3. As top level menu items gain focus, the child menu within must become visible.
   4. Pressing 'Tab' within the site navigation section must move focus through top level menu links and display a drop-down menu (ARIA style keyboard navigation treating each top level menu as a 'widget') — the right arrow key must function exactly the same way (the next menu link gains focus).
   5. Pressing 'Left arrow' or 'Shift+Tab' key must move focus through top level menu links in reverse direction (the previous menu link gains focus)
   6. Pressing 'Enter' must follow the currently focused link.
   7. Pressing 'Down arrow' within a drop-down menu will cycle focus to the next link, or if pressed while focused on the last link, will return focus to the top level menu item.
   8. Pressing 'Up arrow' within the drop-down menu will cycle focus to the previous link, or if pressed on the top level menu item, will move focus to the last link within the drop-down menu.
   9. Pressing 'Esc' within the drop-down menu will close the menu and return focus to the parent menu link.
   10. Pressing 'Right arrow' within the drop-down menu will close the menu and place focus on the next item capable of receiving focus after the parent menu link (from drop-down menu on the last menu link, this will move focus back to the first top level menu item).
   11. Pressing 'Left arrow' within the drop-down menu will close the menu and place focus on the previous item capable of receiving focus before the parent menu link (from a drop-down menu on the first menu link, this will move focus to the last top level menu item).

Section navigation

5. When this menu contains a nested list of links and JavaScript is available:
   1. Section navigation represents an expandable/collapsible tree menu.
   2. Section navigation menu starts with all nodes collapsed except for the path leading to the current page link, which must be exposed.
   3. There must be a way to specify which link is the current page if the URL or page title doesn't match the href or text/title of the link.
   4. At each submenu that collapses, add a toggle UI element (linked image) that becomes part of the tab order
   5. When a submenu is closed
      1. The toggle UI element must be an image (plus icon distributed with the template).
      2. The toggle element must contain alt and title attributes of 'Open the x submenu' (where x is the link text from the submenu's parent link).
      3. Activating the toggle (click/enter) must expand the submenu (CSS display: none).
   6. When a submenu is open
      1. The toggle UI element image src must be updated to the minus icon distributed with the template.
      2. The alt and title attributes must be updated to 'Close the x submenu' (where x is the link text from the submenu's parent link).
      3. Activating the toggle (click/enter) must collapse the submenu. (CSS display: [not none]).

Content

6. Page options
   1. May contain drop-down menus for multiple options. If JavaScript is not available all options must be available/visible.
7. Page options (post content)
   1. May contain pop-up elements (not a pop-up window) for complex options. If JavaScript is not available all options must be available/visible.