[Draft] Module 2: Navigation
Introduction
Courses based on this module should:
- explain strategies that people with disabilities use to navigate multi page websites and applications
- present behaviors, visual affordances, and interaction patterns of menus that relate to accessible design
Learning Outcomes for Module
Students should be able to:
- explain strategies that people with disabilities use to navigate multipage websites and applications
- design user interfaces that support different types of navigations, including menus, tables of contents, and site maps
- define keyboard, mouse, and touch interactions for menus and other navigations
- provide clear and consistent visual cues for menus, menu item states, and other navigations
- define blocks of repeated content and collaborate with developers to implement mechanisms that bypass such blocks
- provide mechanisms for users to locate a specific web page within a set of web pages, such as breadcrumb trails and page titles
- identify related requirements for developers to:
- implement keyboard, mouse, and touch interactions for navigation mechanisms
- implement clear and descriptive names for navigation mechanisms
Competencies
Skills required for this module:
Instructors
- Applied expertise in teaching:
- WCAG Success Criterion 1.3.1 Info and Relationships
- WCAG 2 Success Criterion 2.4.1 Bypass Blocks
- WCAG Success Criterion 2.4.2 Page Titled
- WCAG 2 Success Criterion 2.4.5 Multiple Ways
- WCAG Success Criterion 2.4.6 Headings and Labels
- WCAG 2 Success Criterion 2.4.8 Location
- WCAG 2 Success Criterion 3.2.3 Consistent Navigation
- In-depth knowledge of:
- Prerequisites for students
- Visual Design
- Responsive Design
- Information Architecture
Topics to Teach
Topics to achieve the learning outcomes:
Topic: Menu Behaviors and Patterns
Show examples of different types of menus, such as navigational, fly-out, and application menus. Explain the different scenarios where each of them can be used. For references on the different types of menus and their uses, see the WAI website tutorials Menus.
Explain styling conventions for menus, such as location, appropriate size, and ability for menus and menu items to resize depending on different user configurations. For references on how to apply accessible menu styles, see the WAI website tutorial, Menu Styling.
Learning Outcomes for Topic
Students should be able to:
- identify and describe uses of different types of menus, for example to navigate across web pages, to select categories from a crowded web page, and to navigate across applications
- provide visual cues to distinguish menus from other components, and provide consistent styling for menu identification across a set of web pages
- define mouse, keyboard, and touch interactions within menus
- design user interfaces that support appropriate sizing of menus and menu items to fit all text in different viewports and screen configurations
- design user interfaces that communicate the state of menu items using distinguishable and consistent styles
- identify related requirements for developers to implement semantics for different menu states and properties, such as hover, focus, current, active, and visited
Teaching Ideas
Optional ideas to teach the learning outcomes:
- Explain conventions for accessible menus, such as clear and consistent styling to convey menu behaviors and states. Introduce patterns for mouse, keyboard, and touch interaction with menus.
- Demonstrate menu interaction using different input devices, such as keyboard, mouse, and touch. For example, activating a menu option by tapping, pressing the Enter key, and mouse clicking. Explain that defining the interactions is a designer’s responsibility, whereas providing the underlying code is a developer’s responsibility.
- Show examples of menu and menu items that contain large texts. Explain that, when used in smaller viewports and with different screen configurations, these texts may need to wrap so that they are perceived in their entirety.
- Show examples of different menu and submenu item states, such as hover, focus, current, active, and visited. Emphasize that the states of these menu items need to be communicated using visual cues as well as semantics. Explain that providing the visual cues is a designer’s responsibility, whereas providing the underlying code is a developer’s responsibility.
Ideas to Assess Knowledge for Topic
Optional ideas to support assessment.
- Practical — Students define mouse, keyboard, and touch interactions for menus. for example, how to open, navigate, activate, and close such menus using the mouse, keyboard, and touch. Assess how students understand the need for different interaction patterns based on the input method in use.
- Practical — Present students with different menu states, such as hover, focus, current, active, and visited, and ask them to provide visual cues to distinguish them from one another. Assess how students communicate visually the state of menus and menu items.
Topic: Other Navigation Mechanisms
Introduce other navigation mechanisms that may be used depending on the characteristics of the website or application. Emphasize that there should be multiple ways to reach a specific web page or application view, but that it is not required to use every single navigation mechanism described.
Learning Outcomes for Topic
Students should be able to:
- define blocks of repeated content, such as navigation bars and header contents, and define mechanisms to skip such blocks using at least one of the following:
- a link at the top of each page that goes directly to the main content area
- a link at the beginning of a block of repeated content to go to the end of the block
- links at the top of the page that go to each area of the content
- an expandable and collapsible menu to make it easier for users to skip the menu
- provide other navigation mechanisms to ensure web pages or application views can be reached using several of the following methods:
- search functionalities that support navigating to specific parts of the site
- site maps to provide an overview of the entire website
- tables of contents to give an overview of the whole website or document and to allow users to go to specific parts of the content
Teaching Ideas for Topic
Optional ideas to teach the learning outcomes:
- Show examples of mechanisms to bypass blocks of repeated content, such as a link at the top of the page and the use of expandable and collapsible components. Explain that navigating through sets of repeated blocks of content using the tab key only is time consuming. For examples on how to provide a mechanism to bypass blocks of repeated content, see techniques G1: Adding a link at the top of each page that goes directly to the main content area, G123: Adding a link at the beginning of a block of repeated content to go to the end of the block, and G124: Adding links at the top of the page to each area of the content.
- Show examples of search functionalities. Explain that they help users find content by supporting navigation to different parts of the site. Emphasize that some users prefer this way of navigating, especially when they are already familiar with the site and know what they are looking for. For references on how to provide a search functionality, see technique G161: Providing a search function to help users find content. ](https://www.w3.org/WAI/WCAG21/Techniques/general/G65).
- Show examples of site maps and explain that they serve the purpose of providing an overview of the whole site. Explain that some users rely on them to better understand the structure of the site and to find its way more easily through it. For references on how to provide a site map, see G63: Providing a site map.
- Show examples of tables of contents, for example in an electronic book or document. Explain that they provide an overview of the whole document and allow navigation to specific parts of the content. For references on how to provide a table of contents, see technique G64: Providing a Table of Contents.
Ideas to Assess Knowledge for Topic
Optional ideas to support assessment:
- Practical — Students define the blocks of repeated content within a website and collaborate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they provide a mechanism to bypass them.
- Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students provide multiple navigation mechanisms where appropriate, such as search functionalities, breadcrumb trails, site maps, and tables of contents.
Topic: Location
Build on foundation Module 6: Understanding and Involving Users to research strategies that people with disabilities use to locate a specific web page in a set of web pages. Discuss examples like breadcrumb trails, page titles, and visual cues to indicate the current page.
Learning Outcomes for Topic
Students should be able to:
- provide ways for users to locate a specific web page within a set of web pages, for example:
- descriptive page titles
- breadcrumb trails
- visual cues to indicate the current page within a set of web pages
- identify related requirements for developers to programmatically indicate the current page
Teaching Ideas
Optional ideas to teach the learning outcomes:
- Show examples of breadcrumb trails. Explain that they provide information about the user’s location within the context of a set of websites. Emphasize that they are useful especially in cases where the navigation contains a lot of nested levels. For reference on how to provide breadcrumb trails, see technique [G65: Providing a breadcrumb trail
- Invite students to give examples of page titles they are familiar with and reflect with them on how well the titles describe the page contents. Explain that page titles are useful to locate a specific web page within a set of web pages. Mention that it is best practice to put the title text both in the page title and in the first heading of level 1 on the page, as some mobile browsers and assistive technologies do not show the information on the title. Explain that providing page titles is a responsibility shared with the content author. For references on how to provide descriptive page titles, see technique G88: Providing descriptive titles for Web pages.
Ideas to Assess Knowledge
Optional ideas to support assessment:
- Practical — Present students with a web page that is deep in the hierarchy of a website and ask them to provide a breadcrumb trail for users to understand where a page is located with respect to the whole website. Assess how students communicate the hierarchical structure of a web page within a set of web pages.
- Practical — Present students with a set of web pages and ask them to provide descriptive titles that identify each of the pages and describe what they are about. Assess how students provide clear and descriptive page titles.
Ideas to Assess Knowledge for Module
Optional ideas to support assessment:
- Portfolio — Students design the navigation menu and other navigational mechanisms for a set of web pages. Assess how students understand accessibility features of navigation across multipage websites and applications .
Teaching Resources
Suggested resources to support your teaching:
- @@@
- Menus (WAI Web Accessibility Tutorials) — Shows how to design navigational mechanisms that are accessible to people with disabilities.
- 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.
- Keyboard Compatibility (Web Accessibility Perspectives) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
- WCAG — Address accessibility of web content on desktops, laptops, tablets, and mobile devices.