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: Navigation

Introduction

Courses based on this module should:

Learning Outcomes for Module

Students should be able to:

Competencies

Skills required for this module:

Students

Instructors

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:

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:

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/.