Module 1: Page Structure in Developer Modules, Curricula on Web Accessibility

Introduction

Courses based on this module should:

Learning Outcomes for Module

Students should be able to:

Competencies

Skills required for this module:

Students

Instructors

Topics to Teach

Topics to achieve the learning outcomes:

Topic: Section Headings

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 HTML headings cannot be used. Explain how different people use headings for orientation and navigation.

Learning Outcomes for Topic

Students should be able to:

  • explain how headings and their rank levels are used by different types of assistive technologies and adaptive strategies, such as text to speech and custom stylesheets, to allow people with disabilities to understand and navigate the content
  • write markup for headings using the HTML elements h1 through h6, and using the WAI-ARIA properties role="heading" and level="1-6" when HTML headings cannot be used
  • rank heading levels according to the hierarchical structure of the content
  • describe related requirements for authors and designers to provide meaningful texts and distinguishable styles for headings

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 mark up 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 technologies and adaptive strategies 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 How People with Disabilities Use the Web.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

  • Short Answer Questions — Ask students 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 — Give students a web page that contains incorrect heading ranks and ask students 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 — Give students headings that do not describe the sections they entitle and ask students to replace the text of the headings 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. For example, the proper coding of sections, paragraphs, and lists.

Learning Outcomes for Topic

Students should be able to:

  • explain how properly coded sections of content can be presented in different ways; for example, read aloud using text-to-speech technologies, rendered using custom styling, and displayed in different screen and text sizes
  • describe the purpose of the HTML elements section, article, p, ul, ol, li, dl, dt, and dd
  • write markup for sections of content using the HTML elements section and article
  • write markup for paragraphs using the HTML element p
  • write markup for lists using the HTML element ul, ol, and dl
  • write markup for list items using the HTML elements li, dt, and dd
  • write markup for inline and block quotes using the HTML elements q and blockquote respectively
  • apply corresponding WAI-ARIA properties when native HTML elements cannot be used
  • describe related requirements for content 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 mark up 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 mark up 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 mark up 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, and other lists. An example of how to mark up unordered lists is provided in the WAI Tutorials on Lists.
  • Define description lists as a grouping of several terms and descriptions. Description lists are marked up with the dl element, terms are marked up with the dt element, and descriptions are marked up with the dd element. Examples of how to mark up 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 mark up quotes are provided in 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 — Give students several types of lists and ask students to code them using their corresponding HTML list element. Assess students’ knowledge of the different types of lists.
  • Practical — Give students a passage of text containing several sections, paragraphs, lists, and quotes. Ask students to code the passage using the corresponding HTML elements.

Topic: Page Regions

Explain the use of 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:

  • explain how properly coded page regions can be presented in different ways; for example, read aloud using text-to-speech technologies, rendered using custom styling, and displayed in different screen and text sizes
  • describe the purpose of the HTML elements header, nav, main, section, article, aside, and footer
  • write markup for regions of a page using the HTML elements header, nav, main, section, article, aside, and footer, as well as their corresponding WAI-ARIA landmarks when HTML structures cannot be used
  • label regions using HTML headings, aria-label, and aria-labelledby when necessary

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, and 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 technologies and adaptive strategies 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 — Ask students 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 — Give students several page layouts and ask students 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 Orientation and Navigation

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 links, visible focus indicator, meaningful sequence, and meta-information.

Learning Outcomes for Topic

Students should be able to:

  • write markup for page titles to identify web pages
  • write markup for the primary language of web pages to allow correct interpretation by assistive technologies
  • label blocks of content repeated on multiple pages with consistent names
  • write code to allow people using only the keyboard to skip over blocks of repeated content
  • write code that allows to present content in a meaningful sequence
  • write code for distinguishable focus indicators, for example by using the CSS :focus selector
  • describe related requirements for content authors to write meaningful link texts and page titles
  • describe related requirements for designers to provide distinguishable focus indicators for links and other navigational elements
  • describe related requirements for content authors and designers to provide clear layouts and designs that support different viewport sizes

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, together with a valid language tag, to convey the main language of a web page. Explain that it is placed within the html tag. 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 valid language tag 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 and other navigational elements, such as those that allow to bypass blocks of content that repeats on multiple pages. Mention that these links need to have the HTML attribute href, together with a value containing their destination in the form of a uniform resource identifier (URI). Explain that people using only the keyboard rely on bypass blocks mechanisms 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 — Give students a set of web pages. Ask students 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 — Give students several passages of text written in different languages and ask students to code them using the correct language tag. Assess students’ knowledge of 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 — Ask students about different navigational mechanisms they are aware of and request students 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:

Teaching Resources

Suggested resources to support your teaching:

Back to Top