[Draft] Module 4: Tables

Introduce strategies that some people use to navigate tables. Mention that there might be different ways in which information in a table can be presented depending on user requirements.

Learning Outcomes for Topic

Students should be able to:

• Understand the following strategies to access information in tables:
  • Key combinations to review one cell at a time.
  • Specific order in which header and data cells are spoken.
  • Custom stylesheets or different screen sizes to display table data in an alternative format.

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Introduce specific key combinations of screen readers to move through the different cells of a table. Emphasize that information on the data cells is associated with that of the header cells and both are spoken sequentially.
• Explain that information on the data cells is spoken before or after that on the header cell depending on the screen reader. Mention that column headers are spoken when moving to the next or prior column, and row headers are spoken when moving to the next or prior row.
• Explain use of custom stylesheets to enlarge part or all of the table contents. Emphasize that this might cause the table to render as a list instead. Provide examples of these alternative renderings.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

• Research — Students research screen readers’ documentation to find the keystrokes allowing to move through the different table cells. Assess students understanding of screen readers’ documentation.
• Practice — Students navigate an accessible table using their screen reader of choice and without looking at the table. Assess how students identify header and data cells as they are spoken by the screen reader.
• Practice — Students are presented with a table and are asked to break it down into several nested lists. Assess how students communicate the underlying structure of the table regardless of its visual appearance.

Provide information about techniques to associate header and data cells within tables.

Learning Outcomes for Topic

Students should be able to:

• Distinguish between simple and complex tables.
• Markup headers and data cells with the th and td elements respectively.
• Clarify the direction of the headers with the scope attribute.
• Code irregular headers for cells in complex tables with the headers attribute.

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes.

• Explain the difference between simple and complex tables. Indicate that simple tables have one column or row header, whereas complex tables have more than one column or row header.
• Introduce the th and td elements. Explain that th elements are used to denote header cells, whereas td elements are used to denote data cells.
• Introduce the scope attribute and its values (row and column) to indicate the direction of the headers.
• Introduce the headers attribute of a data cell to handle irregular headers. Explain that when this attribute is used, each of the header cells need 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.
• Explain that associating information is a WCAG requirement under success criterion 1.3.1 Info and Relationships.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

• Practice — Students are presented with a table with neither visual nor programmatic header indicators. Then they are asked to figure them out and decide if the table could be considered simple or complex. Assess how students distinguish between simple and complex tables.
• Practice — Students are presented with a simple table and are asked to identify its header cells and provide them with the corresponding th elements. Assess how students use the th elements in a table.
• Practice — Students are presented with a table containing several column or row headers and are asked to code them appropriately. Assess how students use the th and scope elements to indicate table header cells and convey their direction.
• Practice — Students are presented with an irregular table and are asked to provide its headings. Assess how students use the headers attribute in data cells together with its corresponding id references in the table headers.

Introduce techniques to provide information about the purpose of the table. Mention additional techniques to explain structure and layout for complex tables.

Learning Outcomes for Topic

Students should be able to:

• Code additional information to help users understand the structure and layout of the table with:
  • The aria-labelledby and aria-describedby attributes.
  • The figure and figcaption elements.
  • The summary element.

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Introduce the caption element. Explain that it can be used to provide descriptions for the purpose of the table. Mention that it needs to be the first child of the table element and that its contents are visible for all users by default.
• Introduce additional methods to provide further details about the structure and contents of the table. For example, the figure and figcaption elements, and the aria-labelledby and aria-describedby attributes. Explain that the table element needs to be wrapped by the figure element, and that the figcaption containing the text needs to be the first child of the figure element.
• Explain that the summary element was designed to provide screen reader users with detailed information about the structure of complex tables. Emphasize that it is not part of the HTML5 specification, thus its use is not advisable.

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 add such texts.
• 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 the above-mentioned methods to provide additional descriptions for tables.