[Draft] Module 4: Tabular Information

Introduction

Courses based on this module:

explain use of HTML elements to associate header and data cells and to describe the topic and purpose of a table
explain strategies that people with disabilities use to relate information in tables

Learning Outcomes for Module

Students should be able to:

mark up tables, as well as table headers and data cells
associate data cells with header cells explicitly in complex tables
code mechanisms to provide meaningful names and descriptions for tables
explain strategies that people with disabilities use to relate information presented in tables
explain the characteristics of simple and complex tables

Competencies

Skills required for this module.

Students:

Completion of courses that include:
Basic knowledge of:
- HTML element table

Instructors:

Applied expertise in teaching:
- WCAG 2 Success Criterion 1.3.1. Info and Relationships
- WCAG 2 Success Criterion 4.1.2 Name, Role, Value
- HTML elements table, tr, th, and td
- HTML elements colgroup
- HTML element col
- HTML element tbody
- HTML attributes scope and headers
- HTML element Caption and attribute Summary
In depth knowledge of:

Topics to Teach

Optional topics to achieve the learning outcomes.

Topic: Simple Tables

Define simple tables as those which contain one row or column header. Explain use of HTML elements to mark up tables, table headers, and table cells. Explain that table markup is used by text-to-speech technologies to help people orient and navigate tables.

Learning Outcomes for Topic

Students should be able to:

explain the purpose and scope of simple tables
mark up tables using the HTML element table
mark up table headers using the HTML element th
mark up table data cells using the HTML element td
explain how table markup allow text-to-speech technologies to associate information in header and data cells
explain how table markup can be displayed using custom style sheets or different screen sizes

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

Define simple tables as those which contain one row or column header. Explain that text-to-speech functionality can associate information in the header and data cells if they are marked up appropriately. For reference on simple tables, see the WAI website tutorials, Tables with one header.
Show examples of use of the HTML elements table, th, and td. Explain that table is used to mark up the table layer, th is used to code header cells, and td is used to code data cells. For reference on how to mark up a simple table, refer to technique H51: Using table markup to present tabular data.
Demonstrate use of commands, keystrokes, or gestures of text-to-speech technologies to move to next or previous table, and to move between cells in a table. Explore advanced functionality which presents all tables in a list where users can select the table they are interested in. For reference on how people with disabilities interact and navigate web pages, see Stories of Web Users.
Provide examples of alternative renderings for tables, such as splitting the table into several lists, or showing only parts of the table in a mobile viewport.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

Short Answer Questions — Students are asked which HTML elements are needed to mark up a table structure. Assess students’ knowledge of the HTML elements table, th, and td.
Practice — Students are presented with a simple table and are asked to identify its headers and code them using the th element. Assess students’ understanding of the th element.

Topic: Complex Tables

Define complex tables as those which contain multiple row and column headers. Explain use of additional techniques to convey structure and layout for complex tables. For example, the HTML elements colgroup and the attributes scope and headers.

Learning Outcomes for Topic

Students should be able to:

explain the scope and purpose of complex tables
mark up the direction of the headers using the HTML attribute scope
mark up headers that span several columns using the HTML elements col and colgroup ‘* mark up headers that span multiple rows using the HTML element tbody
code irregular headers for cells using the attribute headers

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes.

Explain that complex tables have column or row headers that span through several columns or rows. Indicate that assistive technologies may not interpret the direction and scope of such headers, so it is necessary to explicitly associate header cells and data cells.
Demonstrate use of the HTML attribute scope and its values row and column to code the direction of the headers. For reference on how to use the HTML attribute scope, see the WAI website tutorials, Tables with two headers.
Show examples of headers that span multiple rows or columns. Explain how to code them using the HTML elements col, colgroup, thead and tbody, as well as the attributes colspan, rowspan, and rowgroup. For reference on how to code headers that span several rows or columns, see the WAI website tutorials, Tables with irregular headers.
Show examples of uses of the header attribute to associate more than two headers that relate to the same cell. Explain that when this attribute is used, each of the header cells needs to have a unique id reference. The ids of the corresponding header cells need to be separated by spaces in the value of the headers attribute. For reference on how to use the headers attribute, see the WAI website tutorials, Tables with multi-level headers.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

Short answer questions — Students are asked how table headers that span several rows or columns are coded in HTML. Assess students’ knowledge of the HTML elements to code multiple row or column headers.
Practice — Students are presented with a table containing headers that span several columns or rows and are asked to code them. Assess how students use the HTML elements th, col, tbody, and the attribute scope to indicate the scope of the table header and convey their direction.
Practice — Students are presented with an irregular table and are asked to provide its headers using the attribute headers. Assess how students use the attribute headers in data cells together with its corresponding id references in the table headers.

Topic: Table Summary and Description

Explain use of HTML elements and WAI-ARIA attributes to provide information about the purpose of a table. Mention that providing descriptions for a table is a shared responsibility among different team members: content authors, designers, and developers.

Learning Outcomes for Topic

Students should be able to:

code additional information to understand the structure and layout of the table using:
- the WAI-ARIA attributes aria-labelledby and aria-describedby
- the HTML elements figure and figcaption
- the HTML attribute summary

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

Show examples of use of the HTML element caption to provide descriptions for the purpose of a table. Mention that it needs to be the first child of the element table and that its contents are visible for all users by default. For reference on how to use the element caption , see technique H39: Using caption elements to associate data table captions with data tables.
Explain use of methods to provide further details about the structure and contents of a table. For example, the HTML elements figure and figcaption, and the WAI-ARIA attributes aria-labelledby and aria-describedby. Explain that the element table needs to be wrapped by the element figure, and that the element figcaption containing the text needs to be the first child of the element figure. For reference on several ways to provide a table summary, see the WAI website tutorials, Caption and summary.
Explain use of the attribute summary to provide screen reader users with detailed information about the structure of complex tables. Emphasize that it is obsolete according to the HTML5 specification, thus its use is only advisable for fallback purposes. For reference on how to use the attribute summary, see technique H73: Using the summary attribute of the table element.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

Practice — Students are presented with a table and are asked to provide mechanisms for authors to add a short text to describe its purpose. Assess students’ understanding of the caption element to describe the purpose of a table.
Practice — Students are presented with a complex table and are asked to include mechanisms for authors to provide extended details about its contents and overall structure. Assess students’ knowledge of HTML elements and attributes to provide table summaries.

Ideas to Assess Knowledge for Module

Optional ideas to support assessment.

Short Answer Questions — Students are directed to a web page where there are several tables and are asked to explore them using an accessibility evaluation extension. Then they are asked how many tables they have found and which their headers are. Assess how students analyze if a table is coded appropriately to reflect its structure.
Portfolio — Students add tables to the website they are building. Assess how students code table headers and table cells, as well as how they provide a table caption and additional descriptions for tables.
Practice — Students are presented with a table with neither visual nor programmatic headers. Then they are asked to figure them out and decide if the table could be considered simple or complex. Assess how students identify table headers and distinguish between simple and complex tables.

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 — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use.
Web accessibility Perspectives (videos) — Is a series of 1-minute videos that demonstrate that web accessibility is essential for people with disabilities and useful for all. They show accessibility features, how they impact people with disabilities, and how they benefit everyone in a variety of situations.
HTML specification — The core markup language for the web, HTML, as well as numerous APIs like Web Sockets, Web Workers, localStorage, etc.
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.
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.