Module 2: Menus  in Developer Modules, Curricula on Web Accessibility

• Foundation Prerequisites
• Developer Module 1: Page Structure

• Applied expertise in teaching:
  • WCAG 2 Success Criterion 1.3.1 Info and Relationships
  • WCAG 2 Success Criterion 2.1.1 Keyboard
  • WCAG 2 Success Criterion 2.1.2 No Keyboard Trap
  • WCAG 2 Success Criterion 2.4.1 Bypass Blocks
  • WCAG 2 Success Criterion 2.4.4 Link purpose (In Context)
  • WCAG 2 Success Criterion 2.4.8 Location
  • WCAG 2 Success Criterion 3.2.3 Consistent Navigation
  • HTML5 sections
  • HTML5 grouping content
  • WAI-ARIA landmark roles
• In-depth knowledge of:
  • Foundation Prerequisites
  • Developer Module 1: Page Structure

Build on Developer Module 1: Page Structure to explain the use of HTML and WAI-ARIA to convey structure. Relate this to the structure of menus, in particular using lists and list items.

Learning Outcomes for Topic

Students should be able to:

• explain how assistive technologies process structural HTML elements, such as lists, sub-lists, and list items, and communicate to people with disabilities these structures and their relationship to one another
• describe different types of menus such as vertical, horizontal, breadcrumb trails, and application menus
• identify menus using the HTML element nav and headings when necessary
• write markup of menus as lists, sub-lists, and list items, for example using the HTML elements ul, ol, and li
• write code that allows operation of menu functionality using keyboard only, voice interaction, and other input devices
• write code for menus to display where expected according to their function and purpose

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of the HTML5 element nav to mark up a region as navigational. An example of how to use this element is provided in the WAI tutorials on Identify menus.
• Refer back to the HTML elements ul, ol, and li taught in the previous module. Explain that they serve to structure and organize lists and list items. Examples of how to use these elements within a menu structure are provided in the WAI tutorials on Menu representation.
• Provide examples of labels for menu items. Mention that these labels can be either text or graphics with their corresponding alternative texts within the HTML element a. Emphasize that people with cognitive disabilities and people using screen readers rely on labels to identify the purpose of each of the menu items. For examples of how to provide descriptive link texts, see technique G91: Providing link text that describes the purpose of a link.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• Practical — Students identify the regions of the page that contain the menus and mark them up using navigation regions and headings as appropriate. Assess students’ use of the HTML element nav and headings as appropriate to mark up menus.
• Practical — Students code the internal structure of each of the menus in a web page. Assess how students use list and list items to programmatically convey menu structures.
• Practical — Give students a menu and ask students to label its menu items. Assess how students describe the topic and purpose of the menu item using text within the HTML element a.

Demonstrate the use of HTML, WAI-ARIA, and CSS code to achieve the desired style for menus.

Learning Outcomes for Topic

Students should be able to:

• explain how appropriate CSS styles make menus easier to identify and understand, and more usable for people with disabilities using adaptive strategies such as text resize and customization, screen magnification, and touch screens
• use styles to make menus display as needed, for example vertical, horizontal, and as breadcrumb trails
• write code to convey the state of the current menu item using the WAI-ARIA property aria-current="page"
• write code to convey other states of menu items using the appropriate semantics as well as color, shape, and styles
• describe related requirements for authors and designers to provide appropriate menu texts and styles

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of different types of menus, such as navigational, application, and breadcrumb trails. Explain that they need to be marked up and styled so that they are placed in the expected position within the page. Mention that menu location is a shared responsibility among different team members: content authors, designers, and developers. Examples of the expected positions of menus within the page are provided in the WAI tutorials on Location.
• Introduce the different states that a menu item can have, such as hover, focus, current, active, and visited. Explain how to code these states so that they are perceived by all users. Examples of how to code these states are provided in the WAI tutorials, Menu Items.
• Show examples of different layouts for menus. Explain that menus should adapt to different text sizes users may choose. Mention that menus should have enough space so that they can be operated by all users. Considerations about readability and size of menu items are provided in the WAI tutorials, General considerations.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• Practical — Give students different types of menus and ask them to code them so that they are placed where expected. Assess students’ knowledge of the menu location within web pages.
• Practical — Ask students to code the different states of menu items and to make them distinguishable from each other. Assess students’ knowledge of WAI-ARIA and CSS techniques to convey the states of menu items.

Explain the use of HTML elements and WAI-ARIA attributes to indicate the presence of submenu items, for example, aria-haspopup. Explain how to convey visible and hidden states of submenu items using WAI-ARIA to make them usable by all users.

Learning Outcomes for Topic

Students should be able to:

• write markup to convey the hierarchical relationship between a menu item and its submenus using nested lists and list items
• write markup for items that contain submenu items using the WAI-ARIA attribute aria-haspopup
• write code for fly-out menus that support different input devices, including keyboard only and voice interaction
• write code to convey visible and hidden states of menu items using the WAI-ARIA attribute aria-expanded, and updating related labels accordingly
• describe related requirements for designers to ensure that fly-out menus can be used effectively in different situations, such as using screen magnification and voice interaction

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of menus that contain submenu items. Explain that the layer with the submenu items needs to be marked up as a nested list, and that each of the submenu items needs to be marked up as a list item. An example of the structure of menu and submenu items is provided in the WAI tutorials on Indicate submenus.
• Explain the use of the WAI-ARIA attribute aria-haspopup to mark up the presence of submenu items. Indicate that this attribute should be present in the original HTML markup. An example of how to use the WAI-ARIA attribute aria-haspopup is provided in the WAI tutorials on Indicate submenus.
• Show examples of different ways to interact with fly-out menus, such as using the mouse, keyboard, and voice interaction. Examples of how to make functionality of fly-out menus available to all users are provided in the WAI tutorials on Fly-Out functionality.
• Explain what the WAI-ARIA attribute aria-expanded conveys: if the submenu items are visible or hidden. Explain that the attribute needs to be present in the original HTML markup. Examples of how to use the aria-expanded attribute are provided in the WAI tutorials on Indicate submenus.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• Practical — Give students a visual structure of menu and submenu items and ask students to use the appropriate markup to convey that structure. Assess how students use nested lists and list items to programmatically convey the visual structure of menu and submenu items.
• Practical — Give students a list of menu and submenu items and ask students to use the aria-haspopup attribute where necessary. Assess how students mark up the presence of submenu items.
• Practical — Give students a fly-out menu and ask students to make it operable with mouse and keyboard. Assess how students implement functionality of fly-out menus that is usable with mouse and keyboard.
• Practical — Give students a list of menu and submenu items that dynamically show and hide based on user input and ask students to code these dynamic changes. Assess how students use the WAI-ARIA attribute aria-expanded in the markup as well as icons and other visual indication of the state of the submenu items.

Show examples of specific scenarios where application menus can be used. Application menus are commonly used in rich applications, which are further discussed in Developer Module 7 Rich Applications. Explain the uses of additional WAI-ARIA roles and properties to mark up application menus. Refer to coding techniques to make application menus operable using various input devices, including keyboard only.

Learning Outcomes for Topic

Students should be able to:

• identify situations in which it is appropriate to use application menus, such as for web applications, and explain the potential accessibility challenges of using application menus, including defining the appropriate keyboard commands for operating such menus
• write markup for application menus using the WAI-ARIA property role="menubar"
• write markup for individual menu items using the WAI-ARIA property role="menuitem"
• write markup for application menu items containing submenus using the WAI-ARIA property role="menu"
• write code for application menus using the HTML element tabindex so that they can receive keyboard focus
• write code that supports functionality of application menus using keyboard and other input devices

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of different types of menus in web applications. Emphasize that navigational menus require specific (desktop-like) keyboard interactions that are different from the tab key used in websites. Explain that additional markup is necessary for assistive technologies to render these menus adequately. Examples of how to code application menus are provided in the WAI tutorials on Additional markup.
• Show examples of how an application menu is operated using the keyboard. Explain that additional functionality needs to be added via scripts so that keyboard patterns resemble those of a desktop menu. Examples of how to code application menus so that they can be operable by keyboard are provided in the WAI tutorials on Functionality and Keyboard behavior.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• Practical — Give students an application menu and ask students to mark it up using the required WAI-ARIA properties. Assess students’ knowledge of accessible markup for application menus.
• Practical — Give students an application menu and ask students to provide keyboard functionality. Assess students’ knowledge of common keyboard patterns for accessible application menus.