This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.

[Draft] Module 2: Navigational Menus

Introduction

Courses based on this module:

Learning Outcomes for Module

Students should be able to:

Competencies

Skills required for this module.

Students:

Instructors:

Topics to Teach

Optional topics to achieve the learning outcomes.

Topic: Navigational Menus

Explain the purpose and use of HTML elements to identify, organize, and label navigational mechanisms such as menus.

Learning Outcomes for Topic

Students should be able to:

  • identify navigational menus using headings and/or the HTML element nav
  • organize items of the same navigational 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, and/or the WAI-ARIA attributes aria-label or aria-labelledby

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. For reference on how to use this element, see the WAI website tutorials, 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. For examples on how to use these elements within a menu structure, see the WAI website tutorials, Menu representation.
  • Provide examples of labels for navigational menu items. Mention that these labels can be either text or graphics with their corresponding alternative texts within the HTML element a. Emphasize that users with cognitive disabilities and screen reader users rely on them to identify the purpose of each of the navigational menu items. For reference on 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 navigational menus and mark them up. Assess students’ use of the nav element to mark up navigational menus.
  • Practical — Students code the internal structure of each of the navigational menus in a web page. Assess how students use list and list items to programmatically convey the structure within a navigational menu.
  • Practical — Students are presented with a navigational menu and are asked to label its menu items. Assess how students describe the topic and purpose of the navigational menu item using text or graphics with their corresponding alternative texts within the HTML element a.

Topic: Submenu Items

Explain 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 submenus using the WAI-ARIA attribute aria-haspopup
  • 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 need to be coded as a list item.
  • Explain 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. For reference on how to use the WAI-ARIA attribute aria-haspopup, see the WAI website tutorials, Indicate submenus.
  • 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. For reference on how to use the aria-expanded attribute, see the WAI website tutorials, 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 complex menus.
  • 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 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 and how they update its value via scripts.

Topic: Additional Information for Menu Navigation

Explain use of HTML elements to indicate where users are in a navigational mechanism, as well as ensure navigation without keyboard traps.

Learning Outcomes for Topic

Students should be able to:

  • code elements so that they follow a consistent focus order
  • mark up the current item within a menu using text or the WAI-ARIA attribute aria-current="page"
  • code navigational mechanisms so that the keyboard can be used to enter and exit them

Teaching Ideas

Optional ideas to teach the learning outcomes.

  • Provide examples of different ways to indicate the current page within a menu. For example, using text or the aria-current="page" attribute. For reference on how to indicate the current item within a menu, see the WAI website tutorials, Indicate the Current Item.
  • Show examples of how a navigational menu can be entered and exited using the keyboard. Relate this requirement to WCAG success criteria 2.1.1 Keyboard and 2.1.2 No Keyboard Trap.

Ideas to Assess Knowledge

Optional ideas to support assessment.

  • Practical — Students are presented with a navigational menu and are asked to indicate where users are. Assess how students provide clear focus indicators and markup that shows the current item in a menu.
  • Practical — Students are presented with a navigational mechanism that cannot be dismissed using the keyboard and are asked to fix it. Assess how students provide consistent keyboard navigation through the navigational.

Ideas to Assess Knowledge for Module

Optional ideas to support assessment:

Teaching Resources

Suggested resources to support your teaching:

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.