Normal Browser View
Those of us who are not visually disabled view a tabular data table displayed in a browser window as shown below.
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| End table | ||
| Row A | data | data |
| Row B | data | data |
| Row C | data | data |
| Row D | data | data |
Our eyes scan through the table aligning data cells with their respective rows and columns.
- Without this cognitive ability, it would be very difficult to make sense of the tabular data.
- Our brain, via our eyes, uses a horizonal axis (row) and vertical axis (column) to give an associative meaning to the origin (data) in a table data cell.
- The origin (data) is the point where the horizontal axis (row) and vertical axis (column) intersect.
Understanding Grid Coordinates
Since some users cannot rely on their eyes to view tabular data tables, they use Assistive Technology (A.T.) software applications to identify, understand, and read them, i.e. screen readers.
- Notice the origin point of a data cell in the table shown below, for example: data (origin = Row C, Column 2) .
- Given these grid coordinates, an A.T. puts cognitive meaning to the data in the cell.
- As the A.T. progresses in a linear fashion through the data table, it identifies each data element that's intersected by a row and column heading.
- Simply said, the A.T. matches the Row heading with the Column heading and transfers this information along with the data in the Data cell to the user.
- This enables the user to know where they are in the table, as well as associate a Data cell with its respective Row and Column.
| Column 1 (vertical axis) | Column 2 (vertical axis) | Column 3 (vertical axis) |
|---|---|---|
| End table | ||
| Row A (horizontal axis) | data (origin = Row A, Column 2) | data (origin = Row A, Column 3) |
| Row B (horizontal axis) | data (origin = Row B, Column 2) | data (origin = Row B, Column 3) |
| Row C (horizontal axis) | data (origin = Row C, Column 2) | data (origin = Row C, Column 3) |
| Row D (horizontal axis) | data (origin = Row D, Column 2) | data (origin = Row D, Column 3) |
Using accessible markup
- We use the table heading element <th></th> to establish rows and columns.
- We use the scope attribute scope=" " within the opening table heading element <th scope=" "> to identify rows and columns.
- We use the table row group elements to divide the data table into three sections:
- <thead></thead> element section (contains the column headers)
- <tfoot></tfoot> element section (contains the footer at the end of the data table)
- <tbody></tbody> element section (contains all other data and elements in the data table)
- An A.T. can now align a table data element <td></td> with its associated:
- table section
- table row
- table column
- This allows the A.T. to communicate the relevant data to the user.