[Draft] Module 2: Navigational Menus

• Prerequisites for Students
• Module 1: Structure and Semantics from Developer Modules

• Applied expertise in teaching:
  • WCAG 2 Success Criterion 1.3.1 Info and Relationships
  • WCAG 2 Success Criterion 2.1.1 Keyboard
  • WCAG 2 Success Criterion 2.1.2 No Keyboard Trap
  • WCAG 2 Success Criterion 2.4.1 Bypass Blocks
  • WCAG 2 Success Criterion 2.4.4 Link purpose (In Context)
  • WCAG 2 Success Criterion 2.4.8 Location
  • WCAG 2 Success Criterion 3.2.3 Consistent Navigation
  • HTML5 sections
  • HTML elements for grouping content
  • WAI-ARIA landmarks
• In-depth knowledge of:
  • Prerequisites for Students
  • Structure and Semantics

Refer back to Module 1: Structure and Semantics and explain the use of HTML elements to identify menus and convey their structure.

Learning Outcomes for Topic

Students should be able to:

• identify and mark up menus using headings and/or the HTML element nav
• group items of the same menu using the HTML elements ul, ol, and li
• code menu items using the HTML element a and the attribute href
• label menu items using link text, graphics with their corresponding alternative text, and/or the WAI-ARIA attributes aria-label or aria-labelledby
• describe different types of menus such as vertical, horizontal, breadcrumb trails, or application menus

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of the HTML5 element nav to mark up a region as navigational. An example of how to use this element is provided in the WAI tutorials on Identify menus.
• Refer back to the HTML elements ul, ol, and li taught in the previous module. Explain that they serve to structure and organize lists and list items. Examples of how to use these elements within a menu structure are provided in the WAI tutorials on Menu representation.
• Provide examples of labels for menu items. Mention that these labels can be either text or graphics with their corresponding alternative texts within the HTML element a. Emphasize that people with cognitive disabilities and people using screen readers rely on them to identify the purpose of each of the menu items. For examples of how to provide descriptive link texts, see technique G91: Providing link text that describes the purpose of a link.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• Practical — Students identify the layers of the page that contain the menus and mark them up. Assess students’ use of the nav element to mark up menus.
• Practical — Students code the internal structure of each of the menus in a web page. Assess how students use list and list items to programmatically convey menu structures.
• Practical — Students are presented with a menu and are asked to label its menu items. Assess how students describe the topic and purpose of the menu item using text or graphics with their corresponding alternative texts within the HTML element a.

Demonstrate the use of HTML, WAI-ARIA, and CSS to style menus so that they are recognized, operable and perceivable.

Learning Outcomes for Topic

Students should be able to:

• code menus so that they display where expected according to their function and purpose
• mark up the current state of a menu item using the WAI-ARIA property aria-current="page"
• convey other states that menu items can have using color, shape, or icons
• summarize related requirements for authors and designers to provide menu texts and styles

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of different types of menus, such as navigational, application, or breadcrumb trails. Explain that they need to be coded so that they are placed in the expected position within the page. Mention that menu location is a shared responsibility among different team members: content authors, designers, and developers. Examples of the expected positions of menus within the page are provided in the WAI tutorials on Location.
• Introduce the different states that a menu item can have, such as hover, focus, current, active, or visited. Explain how to code these states so that they are perceived by all users. Examples of how to code these states are provided in the WAI tutorials, Menu Items.
• Show examples of different layouts for menus. Explain that menus should adapt to different text sizes users may choose. Mention that menus should have enough space so that they can be operated by all users. Considerations about readability and size of menu items are provided in the WAI tutorials, General considerations.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• Practical — Students are presented with different types of menus and are asked to code them so that they are placed where expected. Assess students knowledge of the menu location within web pages.
• Practical — Students are asked to code the different states of menu items and to make them distinguishable from each other. Assess students knowledge of WAI-ARIA and CSS techniques to convey the states of menu items.

Explain the use of HTML elements and WAI-ARIA attributes to indicate the presence of submenu items, for example, aria-haspopup. Explain how to convey visible or hidden states of submenu items using WAI ARIA or text in their labels to make them operable by all users.

Learning Outcomes for Topic

Students should be able to:

• code the hierarchical relationship between a menu item and its submenus using nested lists and list items
• mark up items that contain submenu items using the WAI-ARIA attribute aria-haspopup
• code functionality of fly-out menus so that it is usable by people using only the keyboard
• mark up visible or hidden states of menu items using text in their labels or the WAI-ARIA attribute aria-expanded

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of menus that contain submenu items. Explain that the layer with the submenu items needs to be coded as a nested list, and that each of the submenu items needs to be coded as a list item. An example of the structure of menu and submenu items is provided in the WAI tutorials on Indicate submenus.
• Explain the use of the WAI-ARIA attribute aria-haspopup to mark up the presence of submenu items. Indicate that this attribute should be present in the original HTML markup. An example of how to use the WAI-ARIA attribute aria-haspopup is provided in the WAI tutorials on Indicate submenus.
• Show examples of different ways to interact with fly-out menus, such as using the mouse or the keyboard. Examples of how to make functionality of fly-out menus available to all users are provided in the WAI tutorials on Fly-Out functionality.
• Explain that the WAI-ARIA attribute aria-expanded conveys if the submenu items are visible or hidden. Explain that the attribute needs to be present in the original HTML markup. Examples of how to use the aria-expanded attribute are provided in the WAI tutorials on Indicate submenus.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• Practical — Students are presented with a visual structure of menu and submenu items and are asked to use the appropriate markup to convey that structure. Assess how students use nested lists and list items to programmatically convey the visual structure of menu and submenu items.
• Practical — Students are presented with a list of menu and submenu items and are asked to use the aria-haspopup attribute where necessary. Assess how students mark up the presence of submenu items.
• Practical — Students are presented with a fly-out menu and are ask to make it operable with mouse and keyboard. Assess how students implement functionality of fly-out menus that is usable with mouse and keyboard.
• Practical — Students are presented with a list of menu and submenu items that dynamically show or hide based on user input and are asked to code these dynamic changes. Assess how students use the WAI-ARIA attribute aria-expanded in the markup as well as icons or other visual indication of the state of the submenu items.

Show examples of specific scenarios where application menus can be used, such as recreating a desktop environment in web applications. Explain the uses of additional WAI-ARIA roles and properties to mark up application menus. Discuss additional functionality to make application menus operable by people using the keyboard only.

Learning Outcomes for Topic

Students should be able to:

• identify use cases for application menus
• code application menus using the WAI-ARIA property role="menubar"
• code individual menu items using the WAI-ARIA property role="menuitem"
• code application menu items containing submenus using the WAI-ARIA property role="menu"
• code application menus using the HTML element tabindex so that they can receive keyboard focus
• code additional functionality so that application menus can be operated with the keyboard

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of different application menus. Emphasize that these types of menus are used when desktop functionality needs to be recreated in a Web application and are not advised for navigational menu purposes. Explain that additional markup is necessary for assistive technologies to render these menus adequately. Examples of how to code application menus are provided in the WAI tutorials on Additional markup.
• Show examples of how an application menu is operated using the keyboard. Explain that additional functionality needs to be added via scripts so that keyboard patterns resemble those of a desktop menu. Examples of how to code application menus so that they can be operable by keyboard are provided in the WAI tutorials on Functionality and Keyboard behavior.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• Practical — Students are presented with an application menu and are asked to mark it up using the required WAI-ARIA properties. Assess students knowledge of the markup for application menus.
• Practical — Students are presented with an application menu and are asked to provide keyboard functionality. Assess students knowledge of common keyboard patterns for application menus.