Avoid using structural markup for visual formatting |
WAI / WCAG 1.0 Priority 2 checkpoint 5.4
Issue Description The page contains a table that appears to be used to present tabular information, rather than to layout the page. ("Tabular information" means that the two-dimensional grid offered by the table is used to represent logical relationships among the data included in table cells). Make sure that the table is indeed used to present tabular information. If the table does not represent relationships between information items, but is solely used for implementing a grid on the screen, then the page fails this test.
How to check Inspect the table and its content to determine if the table is used to present tabular information. If it is used for layout purposes only, it should not use tags like CAPTION, TH, THEAD, TFOOT to obtain special formatting effects. Remove CAPTION, THEAD and TFOOT, and replace all the TH with corresponding TDs. Then define a CSS class with the formatting properties that are necessary (like "font-weight: bold; text-align: center;") and add that class to each newly created TD.
Issue Explanation Using markup like TH for its visual effect hinders accessibility. In fact, some assistive technology, like reading browsers, uses the content of the TH element when the user navigates through a table. Each time a user visits a cell of the table, the browser will try to locate the corresponding header cell (that is marked with a TH) and read its content. In this way the user is able to understand what the context is for the cell being visited. However, if THs are used for visual purposes only, then to the reading browser user the context will appear very chaotic and confusing.