[Draft] Module 3: Navigation Design in [Draft] Designer Modules, Curricula on Web Accessibility

• Foundation Prerequisites
• Designer Module 1: Visual Design
• Designer Module 2: Information Design
• Basic knowledge of:
  • Visual Design
  • Prototyping
  • Responsive Design
  • Information Architecture

• Applied expertise in teaching:
  • WCAG Success Criterion 1.3.1 Info and Relationships
  • WCAG Success Criterion 2.1.1 Keyboard
  • WCAG Success Criterion 2.1.2 No Keyboard Trap
  • 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:
  • Foundation Prerequisites
  • Designer Module 1: Visual Design
  • Designer Module 2: Information Design
  • Visual Design
  • Prototyping
  • Responsive Design
  • Information Architecture

Show different types of navigation menus, for example static, fly-out, and mega 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 tutorials on Menus.

Explain styling conventions for menus, such as expected 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 tutorial on Menu Styling.

Learning Outcomes for Topic

Students should be able to:

• identify and describe uses of different types of navigation menus, such as static, fly-out, and mega menus
• define visual and text cues to distinguish menus from other components,
• define consistent styling for menu identification across websites
• define interactions inside navigation menus, including mouse, keyboard, and touch
• design navigation menus that adapt to different text sizes, screen magnifications, and screen sizes and resolutions
• design distinguishable and consistent styles for menu items in their different states, for example in fly-out menus
• identify related requirements for developers to implement:
  • non-visual identification and naming of menus
  • semantics for different menu states and properties, such as hover, focus, current, active, and visited
  • support for different interaction methods, including keyboard, mouse, touch, and voice
  • support for different text and screen sizes

Teaching Ideas

Optional ideas to teach the learning outcomes:

• Present different types of navigation menus, such as static, fly-out, and mega menus. Explain conventions for accessible navigation menus, for example clear and consistent styling to convey menu behaviors and states.
• Demonstrate interactions with navigation menu using different input devices, including keyboard, mouse, touch, and voice. For example, activating a menu option by tapping, pressing the Enter and Space keys, and mouse clicking. Explain that defining the interactions is a designers’ responsibility, whereas providing the underlying code is a developers’ responsibility.
• Show examples of navigation menus and menu items large text. Explain that the text needs to adapt to different viewports and screen configurations, for example wrap so that it is perceived in its entirety. Explain that different languages may have different word sizes, so designers need to consider provisions for different word lengths.
• 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 designers’ responsibility, whereas providing the underlying code is a developers’ responsibility.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

• Practical — Students define mouse, keyboard, touch, and voice interactions for navigation menus. For example, how to open, navigate, activate, and close such menus using the mouse, keyboard, touch, and voice. Assess how students understand the need for different interaction patterns based on the input method in use.
• Practical — Present students with different navigation menu states, such as hover, focus, current, active, and visited, and ask them to provide visual and non-visual cues to distinguish them from one another. Assess how students communicate navigation menus and menu items states visually and non-visually.
• Practical — Present students with navigation menus containing long strings of text and ask them to ensure the text is shown irrespective of the viewport and screen configuration used. Assess how students understand the diversity among different languages, viewports, and screen configurations.

Build on Foundation Module 6: Understanding and Involving Users. Discuss strategies that people use to navigate to different pages of the same site, including menus, breadcrumb trails, search functionalities, and site maps. Explain that different groups of users rely on different navigational components. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding distractions and unnecessary noise.

Learning Outcomes for Module

Students should be able to:

• define navigational components to help navigate to different pages of the same site, including:
  • navigational menus to provide the overall site structure
  • breadcrumb trails to communicate the current location within the site
  • site maps to provide an overview of the entire website
  • search functionalities to navigate to specific parts of the site
• evaluate the amount of site navigational components in use, and select components that help users navigate and orient

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of breadcrumb trails. Explain that they provide information about the user’s location in the context of a whole website. 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.
• 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 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.

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Practical — Present students with an interface and ask them to provide multiple ways to navigate across the website. Assess how students identify the different user experiences for navigation, including search functionalities, breadcrumb trails, site maps, and tables of contents.
• Practical — Give students an interface with excessive use of navigational components and ask them to determine which of these navigational components should stay and which should be removed. Assess how students balance the use of navigational components to avoid distraction and unnecessary noise.

Build on Foundation Module 6: Understanding and Involving Users. Discuss strategies that people use to navigate to different parts of a web page, including tables of contents and methods to bypass blocks of repeated content. Explain that different groups of users rely on different navigational components. Discuss how to assess and balance which ones to use to favor various user experiences while avoiding distractions and unnecessary noise.

Learning Outcomes for Topic

Students should be able to:

• define mechanisms to identify blocks of repeated content, such as navigation bars and header contents
• define mechanisms to skip blocks of repeated content using the following approaches:
  • 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
  • tables of contents at the top of the page that go to each area of the content
  • expandable and collapsible contents to make it easier for users to skip over them
• evaluate the amount of page navigational components in use, and select components that help users navigate and orient

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 only the tab key is time consuming. For examples on how to provide a mechanism to bypass blocks of repeated content, see the following 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 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 assess knowledge:

• Practical — Students define the blocks of repeated content in a website and cooperate with developers to provide a way for users to bypass such blocks. Assess how students identify blocks of repeated content and how they work with developers to provide a mechanism to bypass such blocks.

Explain strategies that people use to identify web pages, including page titles, as well as text and visual cues in the navigational menu to indicate the current page.

Learning Outcomes for Topic

Students should be able to:

• design mechanisms for users to locate specific web pages within websites, for example:
  • descriptive page titles
  • text and visual cues in the navigation menu to indicate the current page
  • descriptive page headings
• evaluate the amount of location mechanisms in use, and select mechanisms that avoid distractions and unnecessary noise
• identify related requirements for developers to apply semantics to page titles, headings, and text cues

Teaching Ideas

Optional ideas to teach the learning outcomes:

• 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 identify the purpose of a specific web page within a website. 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. Some browsers and assistive technologies may truncate the titles or not show them at all. 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 assess knowledge:

• Practical — Give students a specific web page inside a website and ask them to provide appropriate indications about the page location with respect to the entire website. Assess how students balance the use of text and visual cues, breadcrumb trails, and descriptive titles and headings.
• Practical — Present students with a website 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.