[Draft] Module 1: Page Structure
Introduction
Courses based on this module:
- Present several interaction patterns for an accessible user experience.
- Introduce some HTML elements to convey structure and semantics in websites.
Learning Outcomes for Module
Students should be able to:
- Understand how different assistive technology users orient and navigate web pages.
- Markup the different sections of a web page.
- Convey the structure of text passages with headings.
- Markup passages of text, for example paragraphs, lists, and tables.
- Provide contextual information to facilitate web page orientation and navigation.
Competencies
Skills required for this module.
Students:
- Basic understanding of:
- Accessibility concepts and terminology.
- How people with disabilities use the Web.
- HTML sectioning elements.
Instructors:
- In-depth knowledge of:
- How people with disabilities use the Web (including assistive technologies and adaptive strategies).
- The links between components of web accessibility.
- Accessibility principles.
- The W3C accessibility standards.
- Experience with:
- HTML5 sectioning elements.
- WAI-ARIA landmarks.
Topics to Teach
Optional topics to achieve the learning outcomes.
Topic: Different Ways of Browsing the Web
Introduce some user strategies to interact with websites and applications. For example, demonstrate how an interface can be navigated using the keyboard only, an assistive technology, or an adaptive strategy.
Learning Outcomes for Topic
Students should be able to:
- Understand the following user strategies to browse web content:
- Use of the tab, arrow, enter, or escape keys.
- Keystrokes for screen reader users to move through headings and regions.
- Different ways of interaction for screen reader users such as focus or browse mode.
- Voice commands for speech recognition software.
- Switch controls that emulate keyboard presses.
- Browser extensions to get to the main region of a website.
- Provide visual cues via the CSS
:focus
selector. - Allow for a consistent focus order, both visually and programmatically.
Teaching Ideas for Topic
Optional ideas to teach the learning outcomes:
- Explain that some people cannot use the mouse to interact with websites and applications. Discuss several browsing patterns such as using the keyboard only or using assistive devices to simulate key presses. Emphasize that some native HTML elements support these interactions by default, but custom controls generally require additional work from the developers’ side.
- Demonstrate use of the tab and shift + tab keys to move between different components of a user interface. Underline that keeping focus order allows for consistency between the visual and programmatic order of items within a user interface.
- Demonstrate how the arrow keys can be used to move within a specific component. For example, to select an item of a list, to pick up a date from a calendar, or to scroll through a web page.
- Mention that screen reader users get information in a sequential order, (from left to right and from top to bottom). Introduce the concepts of virtual buffer and focus mode. Explain that, in virtual buffer mode, users can navigate by paragraphs, lines, words, and characters, as if they were in a rich text document. Explain that, in focus mode, users only get information about focusable components and skip text and graphics which are not focusable.
- Explain that users with visual impairments may use custom CSS style sheets to navigate content. Mention that others might use magnifying solutions to enlarge portions of the content.
- Show examples of speech recognition software. Mention the use of commands to browse the Web such as “Go to next link” or “open favorites”.
- Explain that visual focus indicators help users know where they are as they browse the interface. Show examples of some default visual cues offered by browsers. Mention that it is sometimes best practice to provide custom indicators for better visibility and contrast ratios.
- Encourage students to include testing routines, both automatic and manual, into their development process. For example, encourage students to try their interfaces with the keyboard only and to make sure they always know the focused element when they navigate them.
Ideas to Assess Knowledge for Topic
Optional ideas to support assessment:
- Practice — Students use a website with their keyboard only. Assess how students use the tab and shift+tab keys to move to the next and previous item.
- Practice — Students interact with their screen reader of choice to navigate an accessible website. Assess how students use keystrokes to go to the main section of the web page and to move between the different headings and regions.
- Practice — Students try their voice recognition software of choice to navigate a website. Assess how students navigate to the next and previous item and how they open certain links of the page by voicing their label.
- Practice — Students navigate a web site and compare the visual flow with the tab order. Assess how students determine if the order of items in the page is consistent.
Topic: Semantics and Structure
Explain that semantics allow assistive technologies to communicate information about the type, purpose, and functionality of the elements of a web page. Present some HTML5 elements and WAI-ARIA attributes to convey structure and emphasize how a variety of users rely on them to perceive information.
Learning Outcomes for Topic
Students should be able to:
- Markup the main sections of a web page using HTML5 elements and WAI-ARIA roles.
- Markup the main language of a page and convey language changes.
- Markup headings, paragraphs, tables, lists, quotes, among other pieces of content with their corresponding HTML tags.
- Describe main accessibility properties and how they are communicated by assistive technologies.
Teaching Ideas for Topic
Optional ideas to teach the learning outcomes:
- Introduce the different regions of a website: header, main content, footer, search region, navigation menu, etc. Emphasize that these sections need to be distinguishable both visually and programmatically. Provide examples of HTML5 headings and sectioning elements as well as WAI-ARIA landmarks that help conveying structure and semantics. Relate these examples with how users can quickly get to them by using specific keystrokes or browser extensions.
- Introduce the
lang
attribute and explain that assistive technologies rely on its value to speak contents using the appropriate speech engine. Explain that it takes a value from the language subtag registry from the Internet Assigned Numbers Authority (IANA). Emphasize that when there is a change in the language of a page, thelang
attribute needs to be used, for example in adiv
wrapping the content with the new language. - Bring in examples of some HTML elements that inherit semantic roles and compare them with other custom components which may not. Contrast the amount of work it takes to make custom components accessible with the ease of using native HTML as much as possible. Explain that the type of element in use and its accessibility properties determine how an assistive technology communicates information to users.
- Present sections of content that are visually distinguishable from each other. Explain that, in addition to visual appearance, it is necessary to give these contents a semantic structure by using HTML elements. Demonstrate the difference between structured and not structured content by using a screen reader.
- Introduce accessibility properties such as name, role, and value. Explain that these are used by assistive technologies to communicate what the name of the element is, what it is for, and what its current status is (if any).
Ideas to Assess Knowledge for Topic
Optional ideas to support assessment:
- Practice — Students develop a template for a website using HTML5 sectioning elements and headings as well as WAI-ARIA elements to convey the structure of the page.
- Practice — Students provide appropriate HTML markup for a given piece of content. Assess how students identify and use headings, lists, paragraphs, quotes, tables, language identification, etc., to convey the structure of the content.
- Practice — Students inspect the accessibility tree for some accessible components such as links with proper texts and form elements with adequate labels. Assess how students understand the accessibility tree and its main properties.
Ideas to Assess Knowledge for Module
Optional ideas to support assessment.
- [Idea] Practice — Students interact with the keyboard only to complete a given set of form fields. For example, students fill in name, surname, check-in, check-out and payment information for a stay in a hotel.
Teaching Resources
Suggested resources to support your teaching:
- 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.
- Web Accessibility Perspectives (videos) — Is a series of 1-minute videos that demonstrate that web accessibility is essential for people with disabilities and useful for all. They show accessibility features, how they impact people with disabilities, and how they benefit everyone in a variety of situations.
- WAI Web Accessibility Tutorials (Page Structure) — Shows how to develop web content that is accessible to people with disabilities, and that provides a better user experience for everyone.
- WAI-ARIA Authoring Practices ARIA can both cloak and enhance section — provides readers with an understanding of how to use WAI-ARIA to create accessible rich internet applications.
- WAI-ARIA landmark roles – A set of roles that are regions of the page intended as navigational landmarks.
- HTML5 Specification’s 3.2.1 Semantics —
- HTML5 Sections – Present HTML5 elements for sectioning content.