Web Design

246

Create Accessible Table Headings ............................

3 Add an ID attribute with an

appropriate, logical value to

each <th> tag.

4 In the <td> tag, type

headers=”?”, replacing?

with the ID of the header

for that cell.

1 In your editor, open a page

that contains a table.

2 If necessary, convert <td>

tags to <th> tags for any

cells that serve as headings.

Create Accessible Table Headings

C

omplex tables may contain multiple heading rows or columns, or might have headings in both

rows and columns. As a sighted user, you can constantly reference the headings by looking

back at them. A visually impaired user with a screen reader, however, cannot do this and so may

become confused as the table is linearized and read back. Fortunately, HTML provides a solution

with its headers and ID attributes. You can add IDs to each header cell, and then reference that ID

in the scope attribute of the cells. When the screen reader reads the page, it references the relevant

headers before reading the content of each cell.

1

2

3

4