This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.

[Draft] Module 1: Page Structure

Introduction

Courses based on this module:

Learning Outcomes for Module

Students should be able to:

Competencies

Skills required for this module.

Students:

Instructors:

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, the lang attribute needs to be used, for example in a div 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.

Teaching Resources

Suggested resources to support your teaching:

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.