SC1-3-1-tables-layout

From Automated WCAG Monitoring Community Group
Jump to: navigation, search

This test case belongs to 1.3.1 Info and Relationships

Description

This test checks that tables used for layout purposes do not contain tabular data or markup.

Background

Assumptions

Tables that have no tabular mark-up are interpretted by assistive technologies as layout tables. According to WCAG this includes:

  • No header cells: that is
    <th>
    cels, or
    <td>
    cells with ARIA roles rowheader and columnheader.
  • No
    <caption>
    element.
  • No (or empty) summary attribute.
  • No scope or header attributes on table cells.
  • Tables with single column or row, or tables with less than two rows containing two valid datacells are automatically marked as layout tables by assistive technologies. A cell is considered valid
    • if its size can be obtained and is between 200 and 16000 pixels, or
    • if its size can't be obtained and it contains text (Cells only containing graphics are not considered valid).

Test properties

Property Value
Test name Tables Layout
Success Criterion 1.3.1 Info and Relationships
Test mode SemiAuto
Test environment rendered page
Test subject Entire web page
User expertise and skills no prior knowledge
User profile Does not require sight.

Test procedure

 

Selector

Test mode: earl:automatic

Select all tables on the page marked as presentational (using role="presentation" on the table element. In addition, select tables with all of the following characteristics (see conditions for layout tables listed above):

  • Tables with no designated header cells (
    <th>
    cells or
    <td>
    cells with ARIA roles rowheader and columnheader.
  • No
    <caption>
    tag
  • No (or empty) summary attribute

Step 1 - Check if actual data tables have wrongly been marked as presentational using ARIA

Test mode: earl:automatic

for each table with role="presentation". Check if table contains

  • header cels
  • a caption element or or summary attribute
  • a cell with a scope or headers attribute

If yes,

Property Value
TestCase SC1-3-1-tables-layout
Identifier SC1-3-1-tables-layout-fail1
Outcome failed
ErrorMessage A datatable is marked as presentational for assistive technologies.
Pointer position
Info


else continue with #Step 2

step 2

Test mode: earl:automatic

Check if any <td> cell has a headers attribute or a scope attribute. If yes,

Property Value
TestCase SC1-3-1-tables-layout
Identifier SC1-3-1-tables-layout-fail2
Outcome failed
ErrorMessage Layout tables cannot associate a cell with other cels.
Pointer position
Info


else continue with #Step 3

step 3

Test mode: earl:manual


For each remaining table that matches the selector, ask user to confirm that the table is not a data table.

User input question

Item presented to the user: A table (or page with location of table highlighted)

Question: Does the table look like an actual datatable?

Answer options: "yes/no"

Help text: A datatable is a table that: Visually looks like a table and, b. When you look at a cell in the table, you need to check its column header or row header to fully understand the content of that cell.

Repair suggestion: none

Properties of the test step:

  • context-sensitive = no
  • user interaction (with the web content) required = no


if yes

Property Value
TestCase SC1-3-1-tables-layout
Identifier SC1-3-1-tables-layout-fail3
Outcome failed
ErrorMessage Table containing tabular data is presented as a layout table.
Pointer position
Info


else

Property Value
TestCase SC1-3-1-tables-layout
Identifier SC1-3-1-tables-layout-pass1
Outcome passed
Pointer position
Info