[Draft] Module 2: Navigational Menus
Introduction
Courses based on this module:
- specify correct use of HTML elements to identify, organize, and label navigational menus
Learning Outcomes for Module
Students should be able to:
- identify navigational menus using headings or the HTML element
nav
- convey the structure of navigational menus using the HTML elements
ul
andli
, - code menu and submenu items using the HTML element
a
and the attributehref
- label menu and submenu items using link texts or images
- convey the hierarchy of menu and submenu items using nested lists
- mark up the current element in a menu
Competencies
Skills required for this module.
Students:
- Completion of courses that include:
- 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: Navigational Menus
Explain the purpose and use of HTML elements to identify, organize, and label navigational mechanisms such as menus.
Learning Outcomes for Topic
Students should be able to:
- identify navigational menus using headings and/or the HTML element
nav
- organize items of the same navigational 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, and/or the WAI-ARIA attributes
aria-label
oraria-labelledby
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. For reference on how to use this element, see the WAI website tutorials, 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. For examples on how to use these elements within a menu structure, see the WAI website tutorials, Menu representation. - Provide examples of labels for navigational 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 navigational menu items. For reference 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 navigational menus and mark them up. Assess students’ use of the
nav
element to mark up navigational menus. - Practical — Students code the internal structure of each of the navigational menus in a web page. Assess how students use list and list items to programmatically convey the structure within a navigational menu.
- Practical — Students are presented with a navigational menu and are asked to label its menu items. Assess how students describe the topic and purpose of the navigational menu item using text or graphics with their corresponding alternative texts within the HTML element
a
.
Topic: Submenu Items
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 submenus using the WAI-ARIA attribute
aria-haspopup
- 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.
- 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. For reference on how to use the WAI-ARIA attributearia-haspopup
, see the WAI website tutorials, Indicate submenus. - 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. For reference on how to use thearia-expanded
attribute, see the WAI website tutorials, 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 complex menus.
- 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 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 and how they update its value via scripts.
Topic: Additional Information for Menu Navigation
Explain use of HTML elements to indicate where users are in a navigational mechanism, as well as ensure navigation without keyboard traps.
Learning Outcomes for Topic
Students should be able to:
- code elements so that they follow a consistent focus order
- mark up the current item within a menu using text or the WAI-ARIA attribute
aria-current="page"
- code navigational mechanisms so that the keyboard can be used to enter and exit them
Teaching Ideas
Optional ideas to teach the learning outcomes.
- Provide examples of different ways to indicate the current page within a menu. For example, using text or the
aria-current="page"
attribute. For reference on how to indicate the current item within a menu, see the WAI website tutorials, Indicate the Current Item. - Show examples of how a navigational menu can be entered and exited using the keyboard. Relate this requirement to WCAG success criteria 2.1.1 Keyboard and 2.1.2 No Keyboard Trap.
Ideas to Assess Knowledge
Optional ideas to support assessment.
- Practical — Students are presented with a navigational menu and are asked to indicate where users are. Assess how students provide clear focus indicators and markup that shows the current item in a menu.
- Practical — Students are presented with a navigational mechanism that cannot be dismissed using the keyboard and are asked to fix it. Assess how students provide consistent keyboard navigation through the navigational.
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.