Using Headers, ID, and Axis Attributes

The table below is an example of a table that uses the ID, AXIS, and HEADERS attributes to make JAWS speak different information when navigating different areas of the table. For example, when moving up and down the Employee Name column, you hear the division name as the row header. However, when moving up and down the Phone Extension column, you hear the employee name as the row header. The employee name is actually in column two, but the HTML code is telling JAWS to treat it as the row header in this case, rather than the text in column one. In this case, JAWS reads properly without your having to change any settings for JAWS, since the author of the table took the time to use good practices for coding the HTML of the table. Any given cell can reference any other cell (or cells) anywhere in the table as a header using this technique.

**Employee Extensions and Departments**
Division Name	Employee Name	Phone Extension
Shipping	John Smith	543
Receiving	Lee Johnson	123
Accounting	Sharon Jones	222

Axis

The axis attribute is intended to provide categories for data cells. Original intent was that users could do queries of the various categories presented in tables, however they can still be useful in providing ancillary information to screen reader users.

In the table above when the JAWS user is navigating up and down column two she hears the following:
Department, Shipping, John Smith
Department, Receiving, Lee Johnson
Department, Accounting, Sharon Jones

When navigating up and down column three she hears the following:
Call, John Smith, 543
Call, Lee Johnson, 123
Call, Sharon Jones, 222

NOTE: The axis attribute is spoken, but does not appear on the screen visually. So the words "Department" and "Call" are not actually visible, but are heard when reading with a screen reader. The header and id attributes also do not appear on the screen.

Headers

The headers attribute uses the ID attribute to tell a screen reader which cell is its header.

Id

The ID attribute is a unique name for one cell that other cells use to reference it as a header.

Here is the same table, with the headers, id, and axis tabs shown as actual text in the table cells:

NOTE: Of course, the following table does not read well because of the repetition of the attributes as actual table text. It is there to show you where they are without having to look at the HTML code.

**Employee Extensions and Departments Showing Visible Text for Attributes**
Division Name	Employee Name	Phone Extension
Shipping id="d1" axis="department"	John Smith headers="d1" id="empl1" axis="call"	543 headers="empl1"
Receiving id="d2" axis="department"	Lee Johnson headers="d2" id="empl2" axis="call"	123 headers="empl2"
Accounting id="d3" axis="department"	Sharon Jones headers="d3" id="empl3" axis="call"	222 headers="empl3"

Prior page