[Draft] Module 2: Navigational Menus
Introduction
Courses based on this module:
- demonstrate use of appropriate code to provide structure, labels, and functionality of menus
- explain how structure, labels, markup, and styling allow people with disabilities to interact with menus
Learning Outcomes for Module
Students should be able to:
- mark up menus using headings or the HTML element
nav
- code the structure of menus using the HTML elements
ul
andli
, - code menu items using the HTML element
a
and the attributehref
- label menu items using link texts or images with their corresponding alternative text
- convey the hierarchy of menu items using nested lists
- mark up and code different states of menu items, such as hover, focus, current, or active
- code additional markup and functionality for application menus
Competencies
Skills required for this module.
Students
- Prerequisites for Students
- Developing Accessible Content – module 1
- Basic knowledge of:
Instructors
- 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
- HTML elements for grouping content
- WAI-ARIA landmarks
- In-depth knowledge of:
Topics to Teach
Optional topics to achieve the learning outcomes.
Topic: Menu Structure
Explain use of HTML elements to convey the menu structure.
Learning Outcomes for Topic
Students should be able to:
- mark up menus using headings and/or the HTML element
nav
- group items of the same menu using the HTML elements
ul
,ol
, andli
- code menu items using the HTML element
a
and the attributehref
- label menu items using link text, graphics with their corresponding alternative text, and/or the WAI-ARIA attributes
aria-label
oraria-labelledby
- describe different types of menus such as vertical, horizontal, breadcrumb trails, or application menus
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
, andli
taught in the previous module. Explain that they serve to structure and organize lists and list items. Examples on 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 users with cognitive disabilities and screen reader users rely on them to identify the purpose of each of the menu items. For examples on 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 layers of the page that contain the menus and mark them up. Assess students’ use of the
nav
element 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 the structure within a menu.
- 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 or graphics with their corresponding alternative texts within the HTML element
a
.
Topic: Menu Styling
Demonstrate use of HTML, WAI-ARIA, and CSS to style menus so that they are recognized, operable and perceivable.
Learning Outcomes for Topic
Students should be able to:
- code menus so that they display where expected according to their function and purpose
- mark up the current state of a menu item using the WAI-ARIA property
aria-current="page"
, - convey other states that menu items can have using color, shape, or icons
- summarize related requirements for authors and designers to provide 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 coded 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 on 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.
Topic: Fly-out Menus
Explain 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 or text in their labels to make them operable 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 keyboard users
- mark up visible or hidden states of menu items using text in their labels or the WAI-ARIA attribute
aria-expanded
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 need 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 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 attributearia-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 or the keyboard. Examples on how to make functionality of fly-out menus available to all users are provided in the WAI tutorials on Fly-Out functionality.
- Explain that 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 thearia-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 ask 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.
Topic: Application Menus
Show examples of specific scenarios where application menus can be used, such as recreating a desktop environment in a Web application.
Explain use of additional WAI-ARIA roles and properties to mark up application menus. Discuss additional functionality to make application menus operable by keyboard users.
Learning Outcomes for Topic
Students should be able to:
- identify use cases for application 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 additional functionality so that application menus can be operated with the keyboard
Teaching Ideas for Topic
Optional ideas to teach the learning outcomes.
- Show examples of different application menus. Emphasize that these types of menus are used when desktop functionality needs to be recreated in a Web application and are not advised for navigational menu purposes. 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 the 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 application menus.
Ideas to Assess Knowledge for Module
Optional ideas to support assessment:
- Portfolio — Students add a set of web pages to the website they are building. Then they provide navigational menus so that users can go to the different web pages. Assess how students identify, organize, and label navigational menus.
Teaching Resources
Suggested resources to support your teaching:
- WAI Web accessibility Tutorials — Shows how to develop web content that is accessible to people with disabilities.
- How People with Disabilities Use the Web — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use.
- WCAG — Address accessibility of web content on desktops, laptops, tablets, and mobile devices.
- WAI ARIA — Provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications.
- HTML specification — The core markup language for the web, HTML, as well as numerous APIs like Web Sockets, Web Workers, localStorage, etc.
- Keyboard Compatibility — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.