particular cell that a screen reader is reading with the corresponding column headings and row
names. For instance, assume that a salary table includes the salaries for federal employees by
grade and step. Each row in the table may represent a grade scale and each column may
represent a step. Thus, finding the salary corresponding to a grade 9, step 5 may involve finding
the cell in the ninth row and the fifth column. For a salary chart of 15 grade scales and 10 steps,
the table will have at least 150 cells. Without a method to associate the headings with each cell,
it is easy to imagine the difficulty a user of assistive technology may encounter with the table.
Section 1194.22 (g) and (h) state that when information is displayed in a table format, the
information shall be laid out using appropriate table tags as opposed to using a preformatted
table in association with the "" tag. Web authors are also required to use one of several
methods to provide an association between a header and its related information.
How can HTML tables be made readable with assistive technology?
Using the "Scope" Attribute in Tables Using the "scope" attribute is one of the most effective
ways of making HTML compliant with these requirements. It is also the simplest method to
implement. The scope attribute also works with some (but not all) assistive technology in tables
that use "colspan" or "rowspan" attributes in table header or data cells.
Using the Scope Attribute The first row of each table should include column headings.
Typically, these column headings are inserted in | tags, although | tags can also be
used. These tags at the top of each column should include the following attribute:
scope="col"
By doing this simple step, the text in that cell becomes associated with every cell in that column.
Unlike using other approaches (notably "id" and "headers") there is no need to include special
attributes in each cell of the table. Similarly, the first column of every table should include
information identifying information about each row in the table. Each of the cells in that first
column are created by either | or | tags. Include the following attribute in these cells:
scope="row"
By simply adding this attribute, the text in that cell becomes associated with every cell in that
row. While this technique dramatically improves the usability of a web page, using the scope
attribute does not appear to interfere in any way with browsers that do not support the attribute.
Example of source code the following simple table summarizes the work schedule of three
employees and demonstrates these principles.
| |
| Spring | Summer | Autumn |
| Winter |
| Betty | 9 5 | 10 6 | 8 4 | 7 3 |
| Wilma | 10 6 | 10 6 | 9 5 | 9 5 |
| Fred | 10 6 | 10 6 | 10 6 | 10 6 |
National GACC Website and GACC Website Template
30
Implementation Guidelines
| |