(Inactive) Web Best Practices: Teleconference Details

Teleconference details


1.0 Review design patterns for tree menus and megamenus

1.1 Tree menu links

1.2 Mega menu links

2.0 Proposed WCAG 2.0 Rules


Design patterns for tree navigation menus

Design Patterns
  1. Expand/collapsing sub menus and focus
    1. Do NOT move focus when expand/collapse state changes
    2. Enter should expand/collapse
    3. How do we provide state information (visually and to a screen reader)
    4. What other key strokes should be available
    5. Should there be landing pages
  2. Unordered lists and navigation landmark
    1. Use unordered list and unordered nested lists to organize the links in the tree menu
    2. Put role=navigation on a container DIV or other container element for the entire tree menu, not on the top level UL element
    3. Do NOT use role=navigation on sub menu lists
    4. If there is only than one navigation landmark on the page, it should have a label
    5. If there is more than one navigation landmark on the page, each navigation landmark must have a uniquely descriptive label
  3. Use of headings
    1. Use headings and aria-labelledby for labeling navigation landmarks
    2. Do not use headings in the sub-lists of links
    3. The heading used for a label should be the first element inside the navigation landmark container element
    4. Headings can be position off screen if you do not want headings rendered visually
  4. Hiding sub-list of links from screen readers requires
    1. Use off screen positioning to visually hide sub links

1.2 Mega menu links