[Draft] Module 2: Menus

• Prerequisites for Students
• Module 1: Page Structure from Developer Modules

• 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:
  • Prerequisites for Students
  • Module 1: Page Structure from Developer Modules

Build on 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
• code menus as lists, sub-lists, and list items, for example using the HTML elements ul, ol, and li
• code menu functionality so that it can be operated by keyboard only, voice interaction, and other input devices
• code menus so that they 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 them 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 or headings where appropriate. Assess students’ use of the HTML element nav or headings where 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 — Students are presented with a menu and are asked 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, or as breadcrumb trails
• mark up the state of the current menu item using the WAI-ARIA property aria-current="page"
• 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, or 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, or 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 — Students are presented with different types of menus and are asked to code them so that they are placed where expected. Assess students’ knowledge of the menu location within web pages.
• Practical — Students are asked 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 or hidden states of submenu items using WAI-ARIA to make them usable by all users.

Learning Outcomes for Topic

Students should be able to:

• code the hierarchical relationship between a menu item and its submenus using nested lists and list items
• mark up items that contain submenu items using the WAI-ARIA attribute aria-haspopup
• code functionality of fly-out menus so that it is usable by people using different input devices including the keyboard only and voice interaction
• mark up visible or 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 coded as a nested list, and that each of the submenu items needs to be coded 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, or 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 — Students are presented with a visual structure of menu and submenu items and are asked 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 — Students are presented with a list of menu and submenu items and are asked to use the aria-haspopup attribute where necessary. Assess how students mark up the presence of submenu items.
• Practical — Students are presented with a fly-out menu and are asked 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 — Students are presented with a list of menu and submenu items that dynamically show or hide based on user input and are asked to code these dynamic changes. Assess how students use the WAI-ARIA attribute aria-expanded in the markup as well as icons or other visual indication of the state of the submenu items.

Show examples of specific scenarios where application menus can be used, such as those mentioned in 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
• code application menus using the WAI-ARIA property role="menubar"
• code individual menu items using the WAI-ARIA property role="menuitem"
• code application menu items containing submenus using the WAI-ARIA property role="menu"
• code application menus using the HTML element tabindex so that they can receive keyboard focus
• code functionality so that application menus can be operated by keyboard and other input devices

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of different application menus, such as web application menus, sidebars, or toolbars. Emphasize that application menus are used when desktop functionality is recreated in a web application. Mention that application menus are not advised for navigational menus, toolbars, or sidebars, where navigation using the tab key is more predictable and expected. 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 — Students are presented with an application menu and are asked to mark it up using the required WAI-ARIA properties. Assess students’ knowledge of accessible markup for application menus.
• Practical — Students are presented with an application menu and are asked to provide keyboard functionality. Assess students’ knowledge of common keyboard patterns for accessible application menus.