Tables

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?
Cats………..Number Tabby……………….1 Tuxedo…………….12 Calico…………….355	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.

References

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)
  • Tutorials
    • Headings
    • Content Structure
    • Tables
  • Designing and Developing 
    • Use headings to convey meaning and structure
    • Make link text meaningful
    • Provide clear instructions
    • Keep content clear and concise
    • Provide clear and consistent navigation options
    • Create designs for different viewport sizes
    • Use mark-up to convey meaning and structure
• Web AIM
  • Creating Accessible Tables
  • Designing for Screen Reader Compatibility

Guidelines

• WCAG 2.0 Guideline 1.3 – Adaptable
• Understanding WCAG 2.0 Guideline 1.3
  • 1.3.1 Info and Relationships Level A
  • 1.3.2 Meaningful Sequence Level A
  • 1.3.3 Sensory Characteristics Level A
• Techniques for WCAG 2.0 G115: Using semantic elements to mark up structure
  • H39: Using caption elements to associate data table captions with data tables
  • H51: Using table markup to present tabular information

Simulations

• User Simulation: Through Eyes of a Screen Reader
• LevelAccess
  • Simulation: ZoomText Demo
  • Simulation: Screen Magnification & Reflow in Acrobat Reader (also example of horizontal scrolling issues)
  • Simulation: Screen Reader Language Support
  • Simulation: Web Headings for Screen Readers
  • Simulation: Readability
• User Simulation: Carly’s Café – Experience Autism Through Carly’s Eyes
• The National Autistic Society Simulation: Autism and sensory sensitivity