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

• Foundation Prerequisites
• Prior Designer Modules
• 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
  • Prior Designer Modules
  • 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:

• describe uses of different types of navigation menus, such as static, fly-out, and mega menus
• define visual and text indications to identify menus, including:
  • consistent styling for menu identification across websites
  • visual and non-visual indications about the current page in the navigation menu
• define interactions inside navigation menus, including mouse, keyboard, touch, and voice
• design navigation menus that adapt to different text sizes, screen magnifications, and screen sizes and resolutions
• define 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. Explain how to communicate the states of these menu items visually and non-visually. Explain that defining the visual presentation 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 — Give students different navigation menu states, such as hover, focus, current, active, and visited, and ask them to provide visual and non-visual methods to distinguish them from one another. Assess how students communicate navigation menus and menu items states visually and non-visually.
• Practical — Give students a navigation menu and ask them to provide visual and non-visual indications about the currently selected item. Assess how students provide appropriate indications about the page location with respect to the entire website.
• Practical — Give students 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
• design methods for users to locate specific web pages within websites, for example:
  • descriptive page titles
  • text and visual indications about the current page in the navigation menu
• evaluate the amount of site navigational components in use, and select components that help users navigate and orient
• identify related requirements for developers to apply semantics to page titles, headings, as well as visual and non-visual indications in navigation menus

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.
• Invite students to research different ways to present information in page titles. 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.
• Show examples of visual and non-visual indications in menus about the current page with respect to the website.

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Practical — Give students a website 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, and site maps.
• Practical — Give students a website and ask them to provide descriptive titles that identify each of the pages. Assess how students provide clear and descriptive page titles.
• 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 methods to identify blocks of repeated content, such as navigation bars and header contents
• define methods 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 methods 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 method 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 method to bypass such blocks.
• Practical — Give students a document and ask them to provide the table of contents. Assess how students provide table of contents for documents.