[Draft] Module 1: Page Structure

Discuss how people use page regions for better navigation. Introduce common markup for page regions.

Learning Outcomes for Topic

Students should be able to:

• Describe how people interact and move to different regions of a web page using:
  • Browser extensions and screen reader keystrokes to go to next or previous region.
  • Screen readers functionality that presents an isolated list or tree with all regions of the page.
  • Reader modes that show the reading contents of the page.
• Code regions of a page using header, nav, main, and footer, elements.
• Label regions using headings, aria-label, or aria-labelledby.
• Mark up regions with ARIA landmarks to make them available for the greatest number of browsers and assistive technologies possible.
• Ensure content within region follows a meaningful sequence.

Teaching Ideas

Optional ideas to teach the learning outcomes.

• Invite students to use screen readers to get to different regions of a web page. Introduce specific keystrokes used to get to each type of region. Demonstrate advanced functionality that presents all the regions of a web page in a tree list out of context. Mention that these structural components help users orient and navigate web pages. For reference on how screen reader users interact and navigate web pages, see Stories of Web Users, Ilya, senior staff member who is blind.
• Invite students to try the so-called reader mode built-in to some browsers. Explain that it allows to show only the most relevant content of a web page when it is marked up appropriately. Discuss with students how this can improve readability for all users. For reference on how to use the reader mode, refer to the support pages of the browsers.
• Introduce some browser extensions that allow users to move between regions of a web page using keyboard shortcuts. Explain that these help keyboard-only users to move through the different regions of a website when they are marked up appropriately.
• Show examples of header sections of web pages. Explain that the header element appears at the top of the web page, and that it contains general information about the site, the logo, and possibly main navigation for the site. For guidance on how to use the header element, see the WAI website tutorials, Page Header.
• Show content in the footer of a web page, i.e., copyright information, privacy statements, or disclaimers. For guidance on how to use the footer element, see the WAI website tutorials, Page Footer.
• Explain that the main element contains the main (and generally unique) content of the web page in the context of a set of web pages. For reference on how to use the main element, see the WAI website tutorials, Main Content.
• Explain that ARIA landmarks provide broader support for old assistive technologies and browsers. Emphasize that they can also enhance HTML 4 semantics if applied to an ordinary div element. For uses of ARIA landmarks associated to their corresponding HTML5 elements, see the WAI website tutorials Page Regions in HTML5 Using WAI ARIA.
• Show content in different layouts, for example, with different style sheets applied. Emphasize that content always needs to follow a meaningful sequence that allows to adapt the contents to different ways of presentation. For information on how to ensure a meaningful sequence, see technique G57: Ordering the content in a meaningful sequence.

Note: Screen readers are sometimes not easy to use. Give clear instructions to students about the specific steps to follow. When possible, follow students through their interactions with screen readers to avoid misunderstandings of the technologies.

Ideas to Assess Knowledge

Optional ideas to assess knowledge.

• Research — Students research the documentation of their screen reader of choice and find keystrokes to navigate regions, as well as mechanisms to reveal the list of regions in a page. Assess students’ understanding of mechanisms for screen reader users to move by regions.
• Short Answer Questions — Students are asked how many types of regions can be in a web page and how each of these can be coded. Assess students’ knowledge of the different regions of the page and how to code them.
• Practical — Students are presented with several pieces of content and are asked to mark them up with HTML section elements. Assess students’ knowledge of the different types of regions of a web page.
• Practical — Students are asked to determine how many regions a given page has. Assess how students use plugins for evaluating web accessibility.

Introduce the role of headings to identify and label page regions and sections of content. Explain that they are also used by some assistive technology users to orient and navigate.

Learning Outcomes for Topic

Students should be able to:

• Describe how users interact with headings using:
  • Specific keystrokes to go to next or previous heading.
  • Advanced functionality that presents an isolated list of all headings in the web page.
• Code headings using the h1 through h6 HTML tags, or the role="heading" and aria-level=1 through aria-level=6 attributes.
• Rank headings according to the hierarchical structure of the page.
• Describe the passages entitled by the heading with the heading’s text.

teaching Ideas

Optional ideas to teach the learning outcomes.

• Demonstrate use of screen readers to go to next or previous heading. Show advanced functionality that allows to present all headings in a list where users can select the one they want to get to. For reference on how screen reader users interact and navigate web pages, see Stories of Web Users, Ilya, senior staff member who is blind.
• Draw analogies between the hierarchical structure of headings and different types of font features, i.e., size, boldness, or italics. Explain that headings are organized in a hierarchical structure, i.e., h1 being the first rank and h6 being the last one. Show examples of how headings can be nested to entitle different sections and subsections of content. For several examples on how to structure pages using headings, see the WAI website tutorials, section Headings that Reflect the Page Organization.
• Present examples of texts that are included in headings and reflect with students if they are descriptive of the sections they entitle. For reference on how to use headings to organize passages of text, see the WAI website tutorials, section Organize Passages of Text.

Ideas to Assess Knowledge

Optional ideas to assess knowledge.

• Research — Students research the documentation of their screen reader of choice and find keystrokes to navigate headings, as well as mechanisms to reveal the list of all the headings in a page. Assess students’ understanding of mechanisms for screen reader users to move by headings.
• Short Answer Questions — Students are asked how many heading levels are, and how each of the heading levels can be coded. Assess students’ knowledge of the h1 through h6 tags.
• Practical — Students are presented with a web page that contains incorrect heading ranks and are asked to use h1 through h6 tags to indicate the correct heading structure. Assess how students relate the visual layout of the page with the underlying structure.
• Practical — Students are presented with headings that do not describe the sections they entitle and are asked to replace the heading’s text with descriptive information. Assess how students provide descriptive titles for sections.

Introduce mechanisms that help identify pages and page features in the context of a website. Explain that these help users to better understand the purpose and context of the page.

Learning Outcomes for Topic

Students should be able to:

• Mark up and describe page titles with the title element.
• Mark up the main language of a page with the lang attribute.
• Mark up a passage of text in a language different than the default using the lang attribute.

Teaching Ideas

Optional ideas to teach the learning outcomes:

• Demonstrate use of the title element within the head tag to convey page topic or purpose. Show examples of where browser and assistive technologies show the contents of the title element: screen reader keystrokes, browser tabs, browser window titles, and search results. Relate this requirement to WCAG success criteria 2.4.2 Page Titled. For reference on how to provide descriptive titles, see technique G88: Providing descriptive titles for Web pages and H25: Providing a title using the title element. For best practices on how to write page titles, see the Easy Checks resource, section Page title.
• Show examples of assistive technologies and adaptive strategies speaking content in different languages. Mention that language of page and language of parts are requirements under success criterion 3.1.1 Language of Page and 3.1.2 Language of Parts.
• Demonstrate use of the lang attribute to convey the main language of a web page. Explain that it is placed within the html tag, and that it takes a value from BCP47: Tags for the identification of languages. For reference on how to convey the main language of a web page, see technique H57: Using the language attribute on the HTML element.
• Emphasize that, when there is a passage of text in a different language than the default, the lang attribute needs to be used with a value that corresponds to the language of that passage. For an explanation of how to use the lang attribute to convey changes in language, see H58: Using language attributes to identify changes in the human language.

Ideas to Assess Knowledge

Optional ideas to assess knowledge.

• Practice — Students are directed to a site and are asked to assess if page titles follow best practices. Assess students’ understanding of how to write titles for pages.
• Practice &mdash: Students are presented with a set of web pages. Students are asked to choose a title that best describes each of the pages and code it appropriately. Assess students’ knowledge of the title element and how to provide descriptive content.
• Research &mdash: Students research the tags for the identification of languages and find out the language primary tag for three languages and at least two sub codes for each of the above. Assess students’ knowledge of the different language codes available.
• Practical — Students are presented with several passages of text written in different languages and are asked to code them using the correct language tag. Assess students’ knowledge of the different language tags and how to code them.

Introduce some strategies to convey the structure of contents in a web page.

Learning Outcomes for Topic

Students should be able to:

• Mark up sections of content with the section or article elements.
• Mark up paragraphs with the p element.
• Mark up lists of items with ul, ol, or dl elements.
• Code tables with the table element, and associate header and data cells with th and td elements, respectively.

Teaching Ideas

Optional ideas to teach the learning outcomes:

• Define the section element as a thematic grouping of content. For an example of how to code the section element, see the WAI website tutorials, Sections.
• Define the article element as a self-containing unit within the web page. For an example of how to use the article element, see the WAI website tutorials, Articles.
• Explain that the p element needs to be used to mark up paragraphs of text. Explain that it improves readability for all users. For an example of how to code the paragraph element, see the WAI website tutorials, Paragraphs.
• Explain that unordered lists are used to group items where the numbering is not relevant. Explain that the list is coded with the ul element, and each of the items is coded with the li element. Emphasize that each of the list items can contain headings, paragraphs, or other lists. For an example of how to use unordered lists, see the WAI website tutorials, unordered list.
• Explain that ordered lists are used when numbering of items matters. Explain that the ol element is used to code the list, and that each of the list items is wrapped in a li item. For an example of how to use ordered list, see the WAI website tutorials, Ordered list.
• Define description lists as a grouping of several terms and descriptions. Definition lists are coded with the dl element, terms are coded with a dt element, and descriptions are marked up with a dd element. For examples of how to use description lists, see the WAI website tutorials, Description Lists.

Ideas to Assess Knowledge

Optional ideas to assess knowledge.

• Research — Students research the HTML specification and provide information about the different ways of coding sections of content. Assess students’ knowledge of the HTML elements for marking up content.
• Practical — Students are presented with several types of lists and are asked to code them using their corresponding HTML list element. Assess students’ knowledge of the different types of lists.
• Practical — Students are presented with a passage of text containing several sections, paragraphs, and lists. They are asked to code the passage using the corresponding HTML elements.