Tables are only for tabular data. Given how they can often force users to scroll horizontally on webpages across video screen sizes, more complex tables should be in spreadsheet documents where they can be more easily navigated or reorganized into simple tables. For example, the Tarleton website’s new responsive template is best at 4 or fewer table columns, so there isn’t horizontal scrolling on mobile phones.
Where word processor functionality is possible (e.g. WYSIWYG editor), you should use lists (ordered/numeric or unordered/bulleted) for simple lists of ideas and tables for tabular data.
Proper Semantic Usage
- Use a table header, not a heading (Heading 1 – 6), to identify the contents in the column or row.
- Do not use bold (the <strong> HTML tag) to create table headers. The table cell should be defined in its properties as a header as instead of data.
- Define the scope of a table header to its column or row to assist screen readers in identifying table cell locations.
- Where word processor functionality is possible, never use spacing to format any alignment issues or special characters (e.g. *, !, -, +, #, ^) to lay out content.
- Where word processor functionality is possible, never use special characters (e.g. *, !, -, +, #, ^) to emphasize the importance of something.
- Use only one (1) space at the end of a sentence before starting a new sentence.
- Do use bold (the <strong> HTML tag) or italics (the <em> HTML tag) on important phrases.
|Bad Table Example||Why is it Ineffective?|
|Without semantic formatting, screen readers view the alignment via the period (.) as another character in the paragraph, and it reads it as just another part of the paragraph. The line breaks do not distinguish between rows. It provide no indication that it is a table or use the table mode functionality.|
|Cats – Number – Bad|
Tabby – 1 – No
Tuxedo – 12 – Some
Calico – 355 – All
|Without semantic formatting, screen readers view the separation of columns via the hyphen (-) as another character in the paragraph, and it reads it as just another part of the paragraph. The line breaks do not distinguish between rows. It provide no indication that it is a table or use the table mode functionality.|
Guides and How-To’s
- Usability.gov’s Web Standards and Usability Guidelines
- Chapter 3: Accessibility
- Chapter 9: Headings, Titles, and Labels
- Chapter 11: Text Appearance
- Chapter 12: Lists
- Chapter 15: Writing Web Content
- Chapter 16: Content Organization
- Web Accessibility Initiative (WAI)
- Designing and Developing
- Web AIM
- WCAG 2.0 Guideline 1.3 – Adaptable
- Understanding WCAG 2.0 Guideline 1.3
- Techniques for WCAG 2.0 G115: Using semantic elements to mark up structure
- User Simulation: Through Eyes of a Screen Reader
- User Simulation: Carly’s Café – Experience Autism Through Carly’s Eyes
- The National Autistic Society Simulation: Autism and sensory sensitivity