Data table is a display of information in tabular form. Sighted users can quickly scan data in a table and make visual associations between data in appropriate columns and rows. Screen readers need the proper markup for column and row headers to help visually impaired users navigate through related columns and rows to access information in each cell.
A table used for layout purposes only, or aligning elements on a grid, does not need to specify column and row header.
For example: sponsors' logos aligned in a table
An accessible data table relates information across the rows and columns therefore needs row and/or column headers.
The markup for header cell is <th> and for data cell is <td>. A header cell (<th>) must have a
scope attribute which tells the browsers and screen readers whether it is a
column header (scope="col") or a
row header (scope="row").
Using the SharePoint table tool you can easily create an accessible data table without working in the HTML code. The markup will be generated by SharePoint to specify column and row headers.
Creating a table in SharePoint:
The above SharePoint command creates a table without headers such as the one below (all cells are data cells):
<td>
| <td> | <td> | <td> |
<td>
|
<td> |
<td> |
<td> |
<td> |
<td> |
<td> | <td> |
<td> |
<td> |
<td> |
<td> |
Specifying row and/or column headers
- Select the table, and then select
the
Design tab on the ribbon.
- Check a header option to add the
header markup and
scope attribute to row or column header cells.
Check "Header Row" to define column headers, and/or "First Column" to define row headers.
After the above command the table changes to one with
column and row headers:
Row Header
| Data
| Data | Data |
---|
Row Header | Data | Data | Data |
---|
Row Header | Data | Data | Data
|
---|
The table below now shows accessible content
Peter
| 188 Flower St | Santa Ana | CA
| 92706 |
---|
Lan | 2000 Culver | Irvine | CA | 92612 |
---|
Nancy
| 4011 Magnolia
| Westminster | CA | 92863 |
---|
Jimmy | 345 Main St | Garden Grove
| CA
| 92840 |
---|