[Draft] Module 4: Tabular Information
in [page not found in this repository, no fallback text given]
Introduction
Courses based on this module:
- explain the use of accessible coding to associate header and data cells and to describe the topic and purpose of a table
- demonstrate how people with disabilities use table structure and markup of header and data cells to navigate and associate information in tables
Learning Outcomes for Module
Students should be able to:
- mark up tables, table headers, and data cells using the HTML elements
table
,th
, andtd
respectively - mark up data and header cell associations explicitly in complex tables
- code mechanisms to provide meaningful summaries and descriptions for tables
- explain strategies that people with disabilities use to navigate and understand information presented in tables
- explain the characteristics of simple and complex tables
- identify use cases where table summaries and descriptions are required
- summarize related requirements for authors and designers to provide information about the relationships between header and data cells in complex table cells
Competencies
Skills required for this module:
Students
- Prerequisites for Students
- Basic knowledge of the HTML element
table
Instructors
- Applied expertise in teaching:
- In-depth knowledge of Prerequisites for Students
Topics to Teach
Topics to support the teaching sequence:
Topic: Simple Tables
Explain what simple tables mean in the context of web accessibility. Explain the 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:
- define simple tables as those which contain one row or column or headers
- mark up tables using the HTML element
table
- mark up and identify table headers using the HTML element
th
- mark up and identify table data cells using the HTML element
td
- explain how table markup allows text-to-speech technologies to associate information in header and data cells
- explain how table markup allows tables to be displayed using custom style sheets or different screen sizes
- summarize related requirements for designers and content authors to use CSS techniques for avoiding table layout designs
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 speech and mainstream technologies can associate information in the header and data cells if they are marked up appropriately. Examples of simple tables are provided in the WAI tutorials on Tables with one header.
- Show examples of use of the HTML elements
table
,th
, andtd
. Explain thattable
is used to mark up the table layer,th
is used to code header cells, andtd
is used to code data cells. For examples of how to mark up a simple table, refer to technique H51: Using table markup to present tabular data. - Demonstrate the use of voice commands, keystrokes, or gestures provided by speech and mainstream technologies to navigate web pages through tables, and to move between cells in a table. Explore advanced functionality that some tools provide, such as presenting all tables in a list where users can select the table they are interested in. Examples of how people with disabilities interact with the web are provided in 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. Explain that layout tables should be avoided, and CSS techniques for visual design should be used instead. Mention that, if a layout table still needs to be used, marking up the table element using
role="presentation"
help assistive technologies present the information contained in the layout table without the table semantics.
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 simple table structure. Assess students’ knowledge of the HTML elements
table
,th
, andtd
. - Practical — A simple table is presented to Students. They are asked to identify the table’s headers and to code them using the
th
element. Assess students’ understanding of theth
element.
Topic: Complex Tables
Explain what complex tables mean in the context of web accessibility. Explain the use of additional techniques to convey structure and layout for complex tables, as well as to provide functionality that allows to sort data in a table. For example, the HTML elements colgroup
, the attributes scope
and headers
, and the WAI-ARIA attribute aria-sort
.
Learning Outcomes for Topic
Students should be able to:
- define complex tables as those which contain multiple row and column of headers
- mark up and identify the direction of the headers using the HTML attribute
scope
- mark up and identify headers that span several columns using the HTML elements
col
andcolgroup
- mark up and identify headers that span multiple rows using the HTML element
tbody
- code irregular headers for cells using the attribute
headers
- mark up headers that allow for data sorting using the WAI-ARIA attribute
aria-sort=ascending, descending, other
, ornone
- code additional functionality that allows to sort data using different input methods
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 the use of the HTML attribute
scope
and its valuesrow
,col
,rowgroup
, andcolgroup
, to code the direction of the headers. Explain that these values indicate headers for row, column, group of rows, and group of columns respectively. Examples of how to use the HTML attributescope
are provided in the WAI tutorials on 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
andtbody
, as well as the attributescolspan
,rowspan
, androwgroup
. Examples of how to code headers that span several rows or columns are provided in the WAI tutorials on Tables with irregular headers. - Show examples of uses of the
headers
attribute together with unique identifiers to associate more than two headers that relate to the same data cell. Explain that the identifiers of the corresponding header cells need to be separated by spaces in the value of the attributeheaders
. Examples of how to use theheaders
attribute are provided in the WAI tutorials on Tables with multi-level headers. - Show examples of sortable tables. Explain that the component that allows to sort the data is usually coded as a button so that it can be used with different input methods. Emphasize that additional feedback may need to be provided based on the support for the WAI-ARIA attribute
aria-sort
, so that users are aware of how data is currently sorted. Examples of how to provide sortable tables are provided in the WAI-ARIA Authoring Practices Data grid example 2.
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.
- Practical — 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 attributescope
to indicate the scope of the table headers and convey their direction. - Practical — Students are presented with an irregular table and are asked to code its headers using the attribute
headers
. Assess how students use the attributeheaders
and its corresponding identifiers in data cells. - Practical — Students are presented with a sortable table and are asked to code it. Assess students’ knowledge about how to use
aria-sort
and functionality that allows to sort data using different input methods.
Topic: Table Summaries and Descriptions
Explain the 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 HTML element
caption
- the WAI-ARIA attributes
aria-labelledby
andaria-describedby
- the HTML elements
figure
andfigcaption
- the HTML attribute
summary
(recommended for fallback purposes)
- the HTML element
- summarize related requirements for authors to write meaningful table summaries and descriptions
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 elementtable
and that its contents are visible for all users by default. Examples of how to use the elementcaption
are provided in technique H39: Using caption elements to associate data table captions with data tables. - Explain the use of methods to provide further details about the structure and contents of a table. For example, the HTML elements
figure
andfigcaption
, and the WAI-ARIA attributesaria-labelledby
andaria-describedby
. Explain that the elementtable
needs to be wrapped by the elementfigure
, and that the elementfigcaption
containing the text needs to be the first child of the elementfigure
. Examples of how to code a table summary are provided in the WAI tutorials on Caption and summary. - Explain the use of the attribute
summary
to provide people using a screen reader with detailed information about the structure of complex tables. Emphasize that it is obsolete according to the HTML5 specification. Its usage is only advisable for fallback purposes. Newer techniques (discussed above on this topic) are recommended. Examples of how to use the attributesummary
are provided in technique H73: Using the summary attribute of the table element.
Ideas to Assess Knowledge for Topic
Optional ideas to support assessment:
- Practical — 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. - Practical — 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:
- Practical — Students are guided to use mechanisms that assistive technologies provide to move to next and previous table, to move between table cells, and to show all the tables of a web page in an isolated list. Assess students’ knowledge of mechanisms of assistive technologies to move through table content and between tables.
- Short Answer Questions — Students are directed to a web page where there are several tables. Then they are asked to use an accessibility evaluation extension to find all table header and data cells and to compare these with the visual structure of the tables. 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.
- Practical — 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.