[Draft] Module 2: Navigation and Menus

Introduction

Courses based on this module:

Explain strategies that people use to navigate across web pages and to find contents.
Explain how to organize, identify, and label navigational mechanisms.

Learning Outcomes for Module

Students should be able to:

Describe mechanisms that people use to navigate across websites.
Implement different navigational mechanisms in websites. For example menus, search functions, or site maps.
Mark up and group navigational mechanisms.
Label items of navigational mechanisms. For example links, buttons, or search boxes.

Competencies

Skills required for this module.

Students:

Knowledge of:
Basic understanding of:
- HTML elements for grouping content.
- CSS properties to style, show, and hide content.
- Scripts for manipulating HTML and CSS.

Instructors:

In-depth knowledge of:
Experience with:
- HTML elements for grouping content.
- CSS properties to style, show, and hide content.
- Scripts for manipulating HTML and CSS.

Topics to Teach

Optional topics to achieve the learning outcomes.

Topic: Finding Pages and Content

Introduce some strategies to navigate across web pages. For example, menus, search functions, site maps, and breadcrumb trails. Indicate that these are requirements under success criterion 2.4.5 Multiple Ways.

Learning Outcomes for Topic

Students should be able to:

Describe how users navigate across web pages and find content using:
- Search functions.
- Primary menus.
- Secondary menus.
- Breadcrumb trails.
- Site maps.
Provide mechanisms to bypass blocks of content.
Allow for a consistent focus order.
Provide visual cues using the CSS :focus selector.

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

Introduce mechanisms to bypass blocks of content. Explain that they can be used to help keyboard-only users and users with motor disabilities to jump to the specific content of a web page, or to skip large blocks of navigation. Link this requirement to WCAG success criterion 2.4.1 Bypass Blocks.
Demonstrate use of search functions. Explain that they allow users to find content by typing words that are part of the website. Explain that they can be included using either a form field with a button to trigger the search, or a link that takes to the search form. For examples of search functions, see technique G161: Providing a search function to help users find content.
Introduce the concept of main and secondary navigation menus. Mention that main navigation menus help users move between the first-level pages 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 web page. For reference on how to code menus in an accessible way, see the WAI website tutorials, Menus.
Define site maps as web pages that provide links to different sections of the site. Explain that they can be ordered alphabetically, by topic, or by category. For reference on how to provide a site map, see technique G63: Providing a site map.
Define breadcrumb trails as a way for users to keep track of the hierarchical structure of a particular web page within a set of web pages. Present examples of its structure and common patterns to include them. For reference on how to provide breadcrumb trails, see technique G65: Providing a breadcrumb trail.
Underline that keeping focus order is needed for consistency between the visual and programmatic order of items. Show examples of web pages where source order matches visual presentation and compare them with pages where it does not. Link this requirement to WCAG success criterion 2.4.3 Focus Order.
Show examples of default and custom visual focus indicators. Explain that these indicators can help users know where they are as they browse the web page. Mention that it is sometimes best practice to provide custom indicators for better visibility and contrast ratios. Link this requirement to WCAG success criterion 2.4.7 Focus Visible.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

Short answer questions — Students are asked how many different navigational mechanisms they are aware of and are asked to explain its main features. Assess students’ knowledge of how people navigate across web pages and find specific content.
Practical &mdash: Students build a mechanism to bypass blocks of content. Assess students’ understanding of the difference between repeated and specific content of a web page within a set of web pages.
Practical — Students build the site map of a given website. Assess students’ understanding of the underlying structure of a website and the hierarchical relationship between its pages.
Practical — Students provide the breadcrumb trail for a specific web page within a site. Assess how students’ express the particular location of a web page within a set of web pages.

Topic: Labeling Navigational Mechanisms

Discuss how to identify, group, and label navigational mechanisms.

Learning Outcomes for Topic

Students should be able to:

Mark up navigational sections using headings and/or the nav element.
Group items of the same navigational mechanism using the ul, ol, and li HTML tag.
Provide adequate labels for each of the navigational mechanisms in a web page by means of a heading element, link text, aria-label, or aria-labelledby elements.

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

Introduce the HTML5 nav element. Explain that it serves 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 ul, ol, and li elements taught in previous module. Explain that they serve to structure and organize lists and list items. Emphasize that screen reader users can quickly navigate between lists and list items by using specific keystrokes. Explain that this is a WCAG requirement under success criterion 4.1.2 Name, Role, Value. For examples on how to use these elements within a menu structure, see WAI website tutorials Menu Representation.
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. Explain that this is a WCAG requirement under success criterion 2.4.6 Headings and Labels.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

Practical — Students identify the layers of the page that contain the navigational mechanisms and mark them up. Assess students’ use of the nav elements and the aria-label or aria-labelledby attributes to provide distinctive labels.
Practical — Students check the internal structure of each of the navigation items in a website. Assess how students use list and list items to programmatically convey the structure of menus.
Practical — Students are presented with a main menu that does not contain clear labels and are asked to label its items. Assess how students describe the topic and purpose of the navigation item.

Topic: Menus and Submenus

Explain how to convey the state of menu and submenu items and how to make them operable by all users.

Learning Outcomes for Topic

Students should be able to:

Mark up the hierarchical relationship between a menu item and its submenus using nested lists and list items. a Mark up the current item within a menu using invisible text or the aria-current="page" attribute.
Mark up items that contain submenus using the aria-haspopup attribute.
Mark up visible or hidden states of menu items with the aria-expanded attribute.

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes.

Introduce the concept of nested lists to denote the presence of submenu items. Emphasize 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.
Show different ways to indicate the current page within a menu. For example, using invisible 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.
Introduce the aria-haspopup attribute. Explain that it serves to denote the presence of submenu items. Indicate that this attribute should be present in the original HTML markup. Emphasize that a value of true means the item contains submenu items, and a value of false indicates that the item does not contain submenu items. For reference on how to use the aria-haspopup attribute, see the WAI website tutorials, Indicate submenus.
Introduce the aria-expanded attribute. 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: true means that the elements are visible, and false means that the elements are hidden. 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 list and list items to programmatically convey the visual structure.
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 use the aria-haspopup attribute in the HTML markup.
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 communicate these dynamic changes to assistive technologies. Assess how students use the aria-expanded attribute in the markup and how they update its value via scripts.

Ideas to Assess Knowledge for Module

Optional ideas to support assessment:

Practical — Students are asked to use an assistive technology to get to a specific web page of a website using at least two different mechanisms. Assess students’ knowledge of the different ways to move between web pages within a set of web pages.
Portfolio — Students add a set of web pages to the website they are building. Then they provide navigational mechanisms so that users can go to the different web pages and can find content. Assess how students implement navigational mechanisms and how they label the items within such mechanisms.

Teaching Resources

Suggested resources to support your teaching:

WAI Web Accessibility Tutorials (Menus) – Provides guidance about making navigation components accessible.
WCAG Success Criterion 1.3.1 Info and Relationships — Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
WCAG Success Criterion 2.1.1 Keyboard — All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints.
WCAG Success Criterion 2.4.1 Bypass Blocks. — A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
WCAG Success Criterion 2.4.3 Focus Order — If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
WCAG Success Criterion 2.4.5 Multiple Ways — More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.
WCAG Success Criteria 2.4.6 Headings and Labels — Headings and labels describe topic or purpose.
WCAG Success Criterion 2.4.7 Focus Visible — Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
WCAG Success Criteria 4.1.2 Name, Role, Value — For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.