Layout Tables Rules
HTML Markup Details
tableelement and associated
tdelements 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
tbodyelements 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.
summaryelements should not be defined for the
tableelement. Web developers occasionally define the
summaryattribute 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
summaryattribute 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
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.
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.
- 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.