The reading order of documents for people using screen readers is based on the order of content in the HTML document. Table markup and styling can often make content look visually connected in a graphical rendering, but in the underlying HTML content that which is grouped visually is often not grouped in the document order. Using CSS for layout helps keep related content grouped, but not all developers are ready to move to tableless designs. Tables should keep related content in the same table cell and that content should still make sense when table markup and/or CSS layout markup is removed.
- Screen reader users
- Reducing table markup makes web pages smaller so they will download faster.
- Reduction in the use of table markup and related content kept in the same table cell makes the maintenace of websites easier to manage.
- Table Manners: Creating accessible Tables for both layout and data
- CSS Mastery: Fixed-Width, Liquid, and Elastic Layouts and Faux Columns
- Liquid Designs
tableelement can be used in combination with the
tdelements to layout blocks of content for a graphical rendering. The use of table markup for layout should be avoided in accessible design. Instead, CSS float and clear properties should be used for positioning blocks of content. If table markup is used for graphical layout, the markup should be restricted to the use of the
tdelements. Other table elements including
summaryattribute should not be used.
- position property
- The CSS position property can be used to layout content to position elements in the browser window. This property for absolute positioining can be used to layout blocks of content for a graphical rendering. However, the use of CSS absolute positioning should be avoided in accessible design and instead, CSS float and clear properties should be used for positioning blocks of content.
- Illinois Information Technology Accessibility Standards
- 1.2 Use appropriate markup to convey document structure.
- 17.1 When using tables for layout, ensure that reading order is logical.
- 17.2 When using style sheets for layout, ensure that reading order is logical.
- 17.3 Avoid horizontal scrolling.
- Section 508
- 1194.22 (d) Documents shall be organized so they are readable without requiring an associated style sheet.
- W3C Web Content Accessibility Guidelines 2.0
- 1.3.1 Info and Relationships
- 1.3.2 Meaningful Sequence
- W3C Web Content Accessibility Guidelines 1.0
- 1.2 Provide redundant text links for each active region of a server-side image map. [Priority 1]
- 9.1 Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape. [Priority 1]
- 9.4 Create a logical tab order through links, form controls, and objects. [Priority 3]
- 13.1 Clearly identify the target of each link. [Priority 2]