Layout Tables Rules

HTML Markup Details

table element

The table element and associated tr and td elements should be avoided for layout columns and other positioning. The use of tables and nesting of tables increases the likelihood that content will not linearize well for screen reader users. The th, thead and tbody elements should never be used in table markup used for layout, as these elements are reserved for tabular data tables and their use leads screen reader users to believe that layout tables may be tabular data tables.

summary attribute

summary elements should not be defined for the table element. Web developers occasionally define the summary attribute with the value "layout" or some other description of the layout; however, this confuses screen reader users who must now listen to irrelavent layout information. The summary attribute should be reserved for use with tabular data tables.

float property

The CSS float property allows block level content to "float" to the left or to the right of other content in the document, creating column effects that people often use tables for.

clear property

The CSS clear property stops the floating of block level elements to the left or right, essentially acting as a "new line" function.

width property

The CSS width property is used to determine the width of a column in a table-less design for layout. In general, percentage widths should be used to reflow support content to fit the width of the current window.

margin, border and padding properties

The CSS margin, border and padding properties can be used to set spacing between block level elements and create borders without using images or spacer text. This makes pages easier to maintain and create.

Accessibility Evaluation Rules

no.	Testing	Description	Implementation
			FAE	Firefox Accessibility Extension
1	Warning/Pass/Fail	Use CSS properties instead of tables and nested tables to visually layout blocks of related content for graphical renderings. CSS based layout designs support a wider range of rendering technologies (interoperability) than table based designs. People with disabilities use a wider range of technologies than the general population to access the web and the use of CSS helps insure that their technologies will be compatible with the page. Implementation Notes Pass: No tables or no nested table markup Warning: One level of nesting Fail: Two or more levels of nesting	1.0	1.5

FAE Rule Implemetation

Illinois Functional Accessibility Evaluator 1.0

The Illinois Functional Accessibility Evaluator is a web based tool to help developers evaluate web resources for the use of the iCITA HTML best practices.

Web interface cannot currently analyze content generated dynamically with javascript.

Illinois Firefox Accessibility Extension

The Illinois Firefox Accessibility Extension is a Firefox add-in that is designed to identify accessibility features for both static and dynamically generated html content.

Useful for identifying the location of specific accessibility problems for failures and warnings indentified in FAE reports.

Create FAE reports for a page that uses javascript to generate page content with the FAE DHTML Report feature.