[Draft] Module 1: Structure and Semantics
Introduction
Courses based on this module:
- demonstrate use of appropriate code to convey the structure of web page headings, regions, and content
- explain how page structure and navigational mechanisms allow people with disabilities to orient themselves and navigate within web pages
Learning Outcomes for Module
Students should be able to:
- explain how page structure allows people with different disabilities to orient themselves and navigate within web pages
- label and convey the hierarchy of sections of content by using headings
- mark up the structure of sections of content, such as paragraphs and lists
- mark up different page regions, such as header, footer, and main content
- mark up page information to facilitate identification and processing
- code mechanisms to allow people to skip over blocks of repeated content
- mark up content so that it is presented in a meaningful sequence
- mark up content so that it has a distinguishable focus indicator
Competencies
Skills required for this module.
Students
- Prerequisites for Students
- Basic knowledge of HTML5 sections
Instructors
- 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
Topics to Teach
Optional topics to achieve the learning outcomes.
Topic: Section Headings
Demonstrate use of the HTML elements h1
through h6
to distinguish and label sections of content. Demonstrate 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
throughh6
, and using the WAI-ARIA propertiesrole="heading'
andlevel="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
- 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 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
throughh6
, as well as the WAI-ARIA propertiesrole="heading"
andlevel="1-6"
. - Practical — Students are presented with a web page that contains incorrect heading ranks and are asked to use
h1
throughh6
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.
Topic: Sections of Content
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
, anddd
- mark up sections of content using the HTML elements
section
orarticle
- mark up paragraphs using the HTML element
p
- mark up lists using the HTML element
ul
,ol
, ordl
- mark up list items using the HTML elements
li
,dt
, anddd
- mark up inline or block quotes using the HTML elements
q
orblockquote
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 thesection
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 thearticle
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 theparagraph
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
orol
element, and each of the items is coded with theli
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 adt
element, and descriptions are marked up with add
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
andblockquote
respectively. Examples on 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.
Topic: Page Regions
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
, andfooter
- code regions of a page using the HTML elements
header
,nav
,main
,section
,article
,aside
, andfooter
, as well as their corresponding WAI-ARIA landmarks - label regions using HTML headings,
aria-label
, oraria-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
, oraria-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 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.
Topic: Page Structure
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 keyboard-only users 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 use of the HTML element
title
within thehead
element to convey the topic or purpose of the page. Show examples of where and how browsers and assistive technologies show the contents of thetitle
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 on 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 use of the
lang
attribute to convey the main language of a web page. Explain that it is placed within thehtml
tag, and that it takes a value from BCP47: Tags for the identification of languages. Examples on 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 thelang
attribute to convey changes in language, see H58: Using language attributes to identify changes in the human language. - Demonstrate use of HTML links that allow to bypass blocks of content that repeats on multiple pages. Explain that keyboard-only users rely on them to skip large blocks of repetitive content, such as headers and navigation bars. Examples on 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 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.
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.
Ideas to Assess Knowledge for Module
Optional ideas to support assessment:
- Practical — Students are guided to use different mechanisms that assistive technologies provide to move to next and previous heading and to show all the headings of a web page in an isolated list. Assess students’ knowledge of mechanisms of assistive technologies to move through headings.
- Short answer questions — Students are guided to use different mechanisms that assistive technologies provide to move to next and previous region and to show all the regions of a web page in an isolated list. Assess students’ knowledge of mechanisms of assistive technologies to move through regions.
- Practical — Students are guided to use different mechanisms that assistive technologies provide to check page titles. Assess students’ knowledge of mechanisms of assistive technologies to check page titles.
- Portfolio — Students build a simple web page with proper structure and semantics. Assess how students mark up different features, including regions of the page, sections of content, headings, passages of text, title, and page language.
Teaching Resources
Suggested resources to support your teaching:
- WAI Web accessibility Tutorials — Shows how to develop web content that is accessible to people with disabilities.
- How People with Disabilities Use the Web — Describes some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use.
- WCAG — Address accessibility of web content on desktops, laptops, tablets, and mobile devices.
- WAI ARIA — Provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications.
- HTML specification — The core markup language for the web, HTML, as well as numerous APIs like Web Sockets, Web Workers, localStorage, etc.
- BCP47: Tags for the identification of languages — Discusses how to specify the language (the lang attribute) of text in a document.
- Text to Speech — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
- Clear Layout and Design — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.