[Draft] Module 1: Structure and Semantics

• Prerequisites for Students
• Basic knowledge of:
  • HTML5 sections
  • HTML5 grouping content

• Applied expertise in teaching:
  • WCAG 2 Success Criterion 1.3.1 Info and Relationships
  • WCAG 2 Success Criterion 1.3.2 Meaningful Sequence
  • WCAG 2 Success Criterion 2.1.1 Keyboard
  • WCAG 2 Success Criterion 2.4.1 Bypass Blocks
  • WCAG 2 Success Criterion 2.4.2 Page Titled
  • WCAG 2 Success Criterion 2.4.3 Focus Order
  • WCAG 2 Success Criterion 2.4.6 Headings and Labels
  • WCAG 2 Success Criterion 2.4.7 Focus Visible
  • WCAG 2 Success Criterion 2.4.10 Section Headings
  • WCAG 2 Success Criterion 3.1.1 Language of Page
  • WCAG 2 Success Criterion 3.1.2 Language of Parts
  • WCAG 2 Success Criterion 3.2.4 Consistent Identification
  • WCAG 2 Success Criterion 4.1.1 Parsing
  • WCAG 2 Success Criterion 4.1.2 Name, Role, Value
  • HTML5 sections
  • WAI-ARIA landmarks
• In-depth knowledge of Prerequisites for Students

Demonstrate the use of the HTML elements h1 through h6 to distinguish and label sections of content. Demonstrate the use of the WAI-ARIA properties role="heading" and level="1-6" when standard headings cannot be used. Explain how different people use headings for orientation and navigation.

Learning Outcomes for Topic

Students should be able to:

• code headings using the HTML elements h1 through h6, and using the WAI-ARIA properties role="heading' and level="1-6" when standard headings cannot be used
• rank heading levels according to the hierarchical structure of the content
• explain how heading texts and rank levels 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
• explain how headings provide a summary of page content that can be navigated by assistive technologies such as screen readers
• summarize related requirements for authors and designers to provide heading texts and styles

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 distinguish and label different sections and subsections of content. Examples of how to structure pages using headings are provided in the WAI Tutorials on 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. Descriptions of how to code headings to organize passages of text are provided in the WAI Tutorials on Organize Passages of Text.
• Demonstrate the use of voice commands, keystrokes, and gestures provided by assistive and mainstream technologies to navigate web pages through headings. Explore advanced functionality that some tools provide, such as presenting all headings in a list where users can select the heading they are interested in. Examples of how people with disabilities interact with the Web are provided in Stories of Web Users.

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 HTML elements h1 through h6, as well as the WAI-ARIA properties role="heading" and level="1-6".
• 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 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
• mark up inline or block quotes using the HTML elements q or blockquote respectively
• apply corresponding WAI-ARIA properties when native HTML elements cannot be used
• explain how properly coded sections of content can be presented in different ways, including being read aloud using text-to-speech technologies, with custom or without any styling, and in different screen and text sizes
• summarize related requirements for authors to use appropriate structures to convey content meaning, such as paragraphs and lists

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Define the section element as a thematic grouping of content. An example of how to code the section element is provided in the WAI Tutorials on Sections.
• Define the article element as a self-containing unit within the web page. An example of how to code the article element is provided in the WAI Tutorials on Articles.
• Explain that the p element is used to mark up paragraphs of text. An example of how to code the paragraph element is provided in the WAI Tutorials on 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. An example of how to code unordered lists is provided in the WAI Tutorials on Lists.
• Define description lists as a grouping of several terms and descriptions. Description lists are coded with the dl element, terms are coded with a dt element, and descriptions are marked up with a dd element. Examples of how to code description lists are provided in the WAI Tutorials on Description Lists.
• Define quotes as text attributed to another author. Explain that there can be inline or block quotes, and that they are marked up using the HTML elements q and blockquote respectively. Examples of how to code quotes, see the WAI tutorials on Quotes.

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,, lists, and quotes. 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 content areas. Explain how page regions support orientation and navigation for people with disabilities.

Learning Outcomes for Topic

Students should be able to:

• describe the purpose 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 HTML headings, aria-label, or aria-labelledby
• explain how properly coded page regions can be presented in different ways, including being read aloud using text-to-speech technologies, with custom or without any styling, and in different screen and text sizes

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. Examples of using HTML elements to code page regions are provided in the WAI Tutorials on Regions.
• Explain that WAI-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. Examples of using WAI-ARIA landmarks to code page regions are provided in the WAI Tutorials on Page Regions in HTML5 Using WAI ARIA.
• Show examples of providing labels for page regions, included by using HTML headings, aria-label, or aria-labelledby. Explain that page regions need to be labeled to distinguish them from one another, for example when two regions of the same type are used in a web page. Descriptions of how to label page regions are provided in the WAI Tutorials on Labeling regions.
• Demonstrate the use of voice commands, keystrokes, and gestures provided by assistive and mainstream technologies to navigate page regions. Explore advanced functionality that some tools provide, such as presenting all page regions in a list or tree where users can select the region they are interested in. Examples of how people with disabilities interact with the Web are provided in Stories of Web Users.
• Invite students to try out functionality built-in to some browsers to facilitate 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.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

• Short Answer Questions — Students are asked about the types of page regions and how each of these can be coded in HTML and WAI-ARIA. Assess students’ knowledge of the different coding techniques for page regions.
• Practical — Students are presented with several page layouts and are asked to mark them up using HTML elements and WAI-ARIA landmarks. Assess students’ knowledge of the different types of page regions and the different coding techniques to mark them up.

Explain how page regions, sections of content, and section headings (described in prior topics) are combined to provide a coherent over-arching page structure. Explain how orientation and navigation across the page is facilitated by additional mechanisms, such as visible focus indicator, meaningful sequence, and meta-information.

Learning Outcomes for Topic

Students should be able to:

• mark up page titles to allow people to identify different web pages
• code the primary language of web pages to allow correct processing
• label blocks of content repeated on multiple pages with consistent names
• code mechanisms to allow people using only the keyboard to skip over blocks of repeated content
• mark up content so that it is presented in a meaningful sequence
• code distinguishable focus indicators using the CSS :focus selector
• summarize related requirements for designers to create designs for different viewport sizes
• summarize related requirements for authors to write meaningful page titles

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Demonstrate the use of the HTML element title within the head element 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. Examples of how to provide descriptive titles are provided in techniques G88: Providing descriptive titles for Web pages and H25: Providing a title using the title element. Examples of how to write page titles are provided in the Easy Checks resource, section Page title.
• Demonstrate the 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. Examples of how to convey the main language of a web page are provided in 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.
• Demonstrate the use of HTML links that allow to bypass blocks of content that repeats on multiple pages. Explain that people using only the keyboard rely on them to skip large blocks of repetitive content, such as headers and navigation bars. Examples of how to code such links are provided in technique G1: Adding a link at the top of each page that goes directly to the main content area.
• 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.
• Emphasize 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 people 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.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• Practical — Students are presented with a set of web pages. They 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.
• Practical — Students build a mechanism to bypass blocks of content. Assess students’ understanding of the difference between repeated blocks and content specific to a web page.
• Short answer questions — Students are asked about different navigational mechanisms they are aware of and are asked to explain their main features. Assess students’ knowledge of how people navigate within web pages and find specific content.