Accessible Data Table

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

Aitken, Aitken & Cohn Angels  Baseball Foundation Citizens  Business Bank
Crevier BMW\Mini First American Financial Corporation Garden Grove Hospital

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:

​Column Header
Column HeaderColumn HeaderColumn Header
​Row Header
Data​Data​Data​
Row HeaderData​Data​Data​
Row HeaderData​Data​Data​


​The table below now shows ​accessible content 

​Name
AddressCityState​Zip Code
Peter
188 Flower St Santa AnaCA
​92706
Lan2000 CulverIrvineCA​92612
Nancy
​4011 Magnolia
WestminsterCA​92863
Jimmy345 Main StGarden Grove
CA
​92840