[Draft] Module 2: Navigation and Menus
Introduction
Courses based on this module:
- Introduce different navigation components used in web pages and applications.
- Explain how to make them accessible.
Learning Outcomes for Module
Students should be able to:
- Understand how several groups of users interact with navigational elements.
- Markup and group blocks of navigation.
- Label menu items and navigational elements.
- Provide several methods for users to get to different pages of a website
Competencies
Skills required for this module.
Students:
- Basic understanding of:
- Accessibility concepts and terminology.
- How people with disabilities use the Web.
- HTML elements for grouping content.
- CSS properties to style, show, and hide content.
- Scripts for showing and hiding content and for updating DOM object properties.
Instructors:
- In-depth knowledge of:
- How people with disabilities use the Web (including assistive technologies and adaptive strategies).
- The links between components of web accessibility.
- Accessibility principles.
- The W3C accessibility standards.
- Scripts for showing and hiding content and for updating DOM object properties.
- Experience with:
- HTML elements for grouping content.
- CSS properties to style, show, and hide content.
Topics to Teach
Optional topics to achieve the learning outcomes.
Topic: Patterns for Navigation
Introduce some navigation components such as primary and secondary menus, site maps, and breadcrumb trails. Explain why users rely on these structures. Mention some strategies to make them accessible.
Learning Outcomes for Topic
Students should be able to:
- Distinguish between different types of navigation menus, such as primary or secondary.
- Identify other navigational elements such as breadcrumb trails, site maps, and toolbars.
- Distinguish the appropriate elements, roles, and properties to convey the different parts of a navigational element.
Teaching Ideas for Topic
Optional ideas to teach the learning outcomes:
- Introduce the concept of main and secondary navigation menu. Mention that main navigation menus help users move between the first levels of the structure of the website. Explain that secondary navigation menus help users move between different subpages of a given category or section. Emphasize that there should be only one main menu, but there might be several secondary menus in a website. Underline that each of them should be distinguishable.
- Introduce the roles of
nav,list, andlistitem. Relate them to the corresponding native HTML elements carrying these roles. Give examples of their usage and introduce some WAI-ARIA properties that can be applied to non-standard HTML elements to explicitly convey these roles.
Ideas to Assess Knowledge for Topic
Optional ideas to support assessment.
- Practice — Students are presented with a website with several navigation menus and identify its main menu. Assess how students point to different menus of the website and explain their function and purpose.
- Practice — Students build the site map of a website. Assess how students understand the underlying structure of a website and the hierarchical relationship between its pages.
- Practice — Students are presented with a main menu which is visually apparent but lacks semantic structure. Assess how students include semantic information in menus.
Topic: Structuring and Labeling Navigational Elements
Introduce HTML elements that convey the structure of menus. Present strategies that allow for a consistent identification and labeling of menus, breadcrumb trails, and site maps.
Learning Outcomes for Topic
Students should be able to:
- Markup navigational sections with the
navelement or a heading. - Group items in a menu with the
ulHTML tag. - Provide adequate labels for each of the menus in a web page by means of a heading element, link text,
aria-label, oraria-labelledbyelements.
Teaching Ideas for Topic
Optional ideas to teach the learning outcomes:
- Explain that screen reader users take advantage of the nav element to distinguish the menus from other components. Emphasize that when there is more than one
navelement in a page, it is good practice to label each of them with a distinctive name by using headings, thearia-label, oraria-labelledbyattributes. - Mention that the roles
listandlistitemhelp users understand how many items the menu contains. Emphasize that screen reader users can quickly navigate between lists and list items by using specific keystrokes. - Emphasize that all menu items must be labeled with a meaningful text that allows users to identify them. Mention that these labels can be either text or graphics with their corresponding alternative texts. Emphasize that users with cognitive disabilities and screen reader users use them to identify the purpose of each of the menu items.
Ideas to Assess Knowledge for Topic
Optional ideas to support assessment.
- Practice — Students identify the layers within the page containing the navigational elements and mark them appropriately. Assess students’ use of the
navelements and thearia-labeloraria-labelledbyattributes to provide distinctive labels. - Practice — Students check the internal structure of each of the menu items in a website. Assess how students use the roles
listandlisttitemto convey the structure of menus programmatically. - Practice — Students disable images and CSS to navigate a given menu. Assess how students identify missing information and provide it using clear text or text alternatives.
Topic: Additional Functionality
Explain some aspects that help make components such as submenus and dropdown menus accessible.
Learning Outcomes for Topic
Students should be able to:
- Markup the hierarchical relationship between a menu item and its submenus with nested lists and list items.
- Provide several ways to access submenu items, such as links in the menu structure or in the first-level page.
- Markup a submenu with the
aria-haspopupattribute. - Markup expanded or collapsed states of menu items with the
aria-expandedattribute.
Teaching Ideas for Topic
Optional ideas to teach the learning outcomes.
- Introduce the concept of nesting lists to denote the presence of submenu items.
- Explain that sometimes it is hard for screen reader users or users with motor disabilities to access links of submenu items. Emphasize that these submenu links can also be provided in first level pages so that all users can access them in several ways.
- Introduce the
aria-haspopupattribute of a menu item to denote the presence of submenu items. Indicate that this attribute should be present in the original HTML markup. - Introduce the
aria-expandedattribute. Indicate that it is placed in the menu item containing the submenu, and that it serves to convey if the submenu items are visible or hidden. Explain that the attribute needs to be present in the original HTML markup. Emphasize that its value needs to be updated via scripts:truemeans that the elements are visible, andfalsemeans that the elements are hidden.
Ideas to Assess Knowledge for Topic
Optional ideas to support assessment.
- Practice — 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 list and list items to programmatically convey the visual structure.
- Practice — Students are presented with a list of menu and submenu items and are asked to use the
aria-haspopupattribute where necessary. Assess how students use thearia-haspopupattribute in the HTML markup. - Practice — Students are presented with a list of menu and submenu items that dynamically show or hide based on user input and are asked to communicate these dynamic changes to assistive technologies. Assess how students use the
aria-expandedattribute in the markup and how they update its value via scripts.
Ideas to Assess Knowledge for Module
Optional ideas to support assessment:
- [Idea] Practice — Students create an accessible primary navigation menu. Assess how students use roles for navigation, lists, and list items appropriately.
Teaching Resources
Suggested resources to support your teaching:
- How People with Disabilities Use the Web — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use.
- Web Accessibility Perspectives (videos) — Is a series of 1-minute videos that demonstrate that web accessibility is essential for people with disabilities and useful for all. They show accessibility features, how they impact people with disabilities, and how they benefit everyone in a variety of situations.
- WAI Web Accessibility Tutorials (Menus) – Provides guidance about making navigation components accessible.
- WAI-ARIA Authoring Practices ARIA can both cloak and enhance section — provides readers with an understanding of how to use WAI-ARIA to create accessible rich internet applications.
- HTML5 contents for grouping elements – Presents elements that serve to group content.