[Draft] Module 1: Structure, Semantics, and Navigation

Demonstrate application of the HTML elements h1 through h6 to label page sections and passages of content, as well as the WAI-ARIA role="heading" and `level=”1-6” when standard headings cannot be used. Explain that headings are used by some text-to-speech technology users to orient and navigate.

Learning Outcomes for Topic

Students should be able to:

• code headings using the HTML elements h1 through h6, as well as the WAI-ARIA role="heading' and `level=”1-6” when standard headings cannot be used
• rank headings according to the hierarchical structure of the content
• explain how heading texts and ranks are read aloud by text-to-speech technologies such as screen readers
• explain how heading texts and styles serve as visual landmarks for people with low vision and cognitive disabilities

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Explain that headings are organized in a hierarchical structure, i.e., h1 being the first rank and h6 being the last one. Emphasize that native HTML elements are more likely to be supported by browsers and assistive technologies. 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 headings and reflect with students if they are descriptive of the sections they entitle. Mention that providing descriptive headings is a shared responsibility among different team members: content authors, designers, and developers. For reference on how to code headings to organize passages of text, see the WAI website tutorials, Organize Passages of Text.
• Demonstrate use of commands, keystrokes, or gestures of text-to-speech technologies to move to next or previous heading. Explore advanced functionality which presents all headings in a list where users can select the heading they are interested in. For reference on how people with disabilities interact and navigate web pages, see Stories of Web Users.

Note: Assistive technologies 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 assistive technologies to avoid misunderstandings of the technologies.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

• Short Answer Questions — Students are asked how many heading levels there are in the HTML specification, and how each of the heading levels can be coded. Assess students’ knowledge of the h1 through h6 elements.
• Practical — Students are presented with a web page that contains incorrect heading ranks and are asked to use h1 through h6 elements 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.

Explain the use of HTML elements to convey the structure of contents in a web page. For example, sections, paragraphs, and lists.

Learning Outcomes for Topic

Students should be able to:

• describe the purpose and scope of the HTML elements section, article, p, ul, ol, li, dl, dt, and dd
• mark up sections of content using the HTML elements section or article
• mark up paragraphs using the HTML element p
• mark up lists using the HTML element ul, ol, or dl
• mark up list items using the HTML elements li, dt, and dd

Teaching Ideas for Topic

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 code the article element, see the WAI website tutorials, Articles.
• Explain that the p element is 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, and ordered lists are used when numbering of items matters. Explain that these lists are marked up with the ul or ol 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 code unordered lists, see the WAI website tutorials, 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 code description lists, see the WAI website tutorials, Description Lists.

Ideas to Assess Knowledge for Topic

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.

Provide hands-on training for common markup to identify page regions, such as header, footer, navigation, and main. Explain how page regions allow people with disabilities to orient and navigate.

Learning Outcomes for Topic

Students should be able to:

• explain the purpose and scope of the HTML elements header, nav, main, section, article, aside, and footer
• code regions of a page using the HTML elements header, nav, main, section, article, aside, and footer, as well as their corresponding WAI-ARIA landmarks
• label regions using headings, aria-label, or aria-labelledby
• explain how page regions are read aloud by text-to-speech technologies
• explain how page regions allow more convenient rendering of contents by browser reading functionality

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of different page layouts, and their markup of the header, navigation, main content, section, article, complementary, and footer regions. Emphasize that native HTML elements are more likely to be supported by newer browsers and assistive technologies. For guidance on how to code HTML5 sections, see the WAI website tutorials, Regions.
• 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 examples of labels for regions included in headings, or using aria-label, or aria-labelledby. Explain that page regions need to be labeled to distinguish them from one another when two regions of the same type are used in a web page. For reference on how to label regions, see the WAI website tutorials, Labeling regions.
• Demonstrate use of commands, keystrokes, or gestures of text-to-speech technologies to navigate page regions. Explore advanced functionality which presents regions in a list or tree where users can select the region they are interested in. Mention that these structural components help users orient and navigate web pages. For reference on how people with disabilities interact and navigate web pages, see Stories of Web Users.
• Invite students to try out functionality built-in to some browsers to enhance reading. Explain that it changes the layout of the page, showing the main content of a web page when it is marked up appropriately. Discuss with students how this can improve readability for all users. Refer to the support pages of browsers for more information on the particular reading modes they provide.
• Show examples of 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.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

• Short Answer Questions — Students are asked about the types of regions 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 page layouts and are asked to mark them up using HTML sections. Assess students’ knowledge of the different types of regions of a web page, and the different HTML and WAI-ARIA techniques to mark up these regions.

Explain strategies that people with disabilities use to orient and navigate across web pages. For example, page titles and language, search functions, site maps, and breadcrumb trails. Indicate that these are requirements under success criterion 2.4.5 Multiple Ways.

Learning Outcomes for Topic

Students should be able to:

• code mechanisms to bypass blocks of content repeated on multiple pages
• code elements so that they follow a consistent focus order
• code focus indicators using the CSS :focus selector
• mark up contents so that they follow a meaningful sequence
• code mechanisms to orient, navigate, and find content within web pages using:
  • search functions
  • site maps
  • breadcrumb trails
• explain how page titles allow text-to-speech technologies to help users orient within a set of web pages
• explain how page language markup allows text-to-speech technologies to read page contents in the language they are written

s#### Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Demonstrate use of HTML links that allow to bypass blocks of content that repeats on multiple pages. Explain that keyboard-only users and users with motor disabilities rely on them to jump to the specific content of a web page, or to skip large blocks of navigation. For reference on how to code such links, see technique G1: Adding a link at the top of each page that goes directly to the main content area.
• Underline that keeping focus order is needed for consistency between the visual and programmatic order of items. Show examples of web pages where source order matches visual presentation and compare them with pages where it does not. Link this requirement to WCAG success criterion 2.4.3 Focus Order.
• Show examples of default and custom visual focus indicators. Explain that these indicators can help users know where they are as they browse the web page. Mention that it is sometimes best practice to provide custom indicators for better visibility and contrast ratios. Link this requirement to WCAG success criterion 2.4.7 Focus Visible.
• 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 content to different ways of presentation. For information on how to ensure a meaningful sequence, see technique G57: Ordering the content in a meaningful sequence.
• Demonstrate use of the HTML element title within the head to convey the topic or purpose of the page. Show examples of where and how browsers 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 criterion 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.
• 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 code the lang attribute to convey changes in language, see H58: Using language attributes to identify changes in the human language.
• Show examples of different mechanisms to orient, navigate, and find content within web pages, such as search functions, sitemaps, or breadcrumb trails. For references on how to build mechanisms that help people orient, navigate, and find content within pages, see techniques G161: Providing a search function to help users locate content, G63: Providing a site map, and G65: Providing a breadcrumb trail.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• Practical — Students build a mechanism to bypass blocks of content. Assess students’ understanding of the difference between repeated and specific content of a web page.
• Practical — Students are presented with a set of web pages and 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.
• 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 about how to code the different language tags.
• Short answer questions — Students are asked about different navigational mechanisms they are aware of and are asked to explain its main features. Assess students’ knowledge of how people navigate across web pages and find specific content.
• Practical — Students build the site map of a given website. Assess students’ understanding of the underlying structure of a website and the hierarchical relationship between its pages.
• Practical — Students provide the breadcrumb trail for a specific web page. Assess how students express the particular location of a web page within a site.