Tables
Caption and Summary
- The caption element can be used to give the table a title. This helps the user to identify the title of the table, since assistive technology will let them know that there is a caption available.
- The summary attribute on the table tag can be used to provide an overall summary of the table to some one using assistive technology. This summary is read to a user when they first encounter the table.
Row and Column Headers
As they navigate through data table, screen reader users need to know what column and row they are in. If this information were not available, it would be very disorienting to navigate a table. The following techniques are available:
- Every row must have a header in the first column.
- Every column must have a header in the first row.
- Use the <th> element to inform screen readers that they are dealing with a heading. Headers will appear as bold and centered – unless styled otherwise by CSS.
- Use the scope attirbute on the <th> element to provide further
programatic help to a screen reader.
- For column headers use scope="col"
- For row headers, use scope="row".