P1254325941mJSfM

1
Complicated HTML Tables That Conform to the
Section 508 Standards AND Work with Assistive
Technology Design Strategies that Work
2
Relevant Section 508 Standards

• Row and column headers shall be identified for
  data tables. 1194.22(g)
• Markup shall be used to associate data cells and
  header cells for data tables that have two or
  more logical levels of rows or column headers.
  1194.22(h)

3
Problem Complicated Tables
Stock Prices Company A Company A Company A Company B Company B Company B
Stock Prices High Low Close High Low Close
2001
January 1 110 100 107 120 118 118
April 15 115 113 113 125 122 124
2002
January 1 118 115 116 127 126 126
April 15 130 128 129 130 129 129
4
Problem Complicated Tables
Stock Prices Company A Company A Company A Company B Company B Company B
Stock Prices High Low Close High Low Close
2001
January 1 110 100 107 120 118 118
April 15 115 113 113 125 122 124
2002
January 1 118 115 116 127 126 126
April 15 130 128 129 130 129 129
5
Terminology Row Stubs
Stock Prices Company A Company A Company A Company B Company B Company B
Stock Prices High Low Close High Low Close
2001
January 1 110 100 107 120 118 118
April 15 115 113 113 125 122 124
2002
January 1 118 115 116 127 126 126
April 15 130 128 129 130 129 129
Row Stubs
6
Terminology Nested Row Stubs
Stock Prices Company A Company A Company A Company B Company B Company B
Stock Prices High Low Close High Low Close
2001
January 1 110 100 107 120 118 118
April 15 115 113 113 125 122 124
2002
January 1 118 115 116 127 126 126
April 15 130 128 129 130 129 129
Nested Row Stubs
7
Terminology Column Headers
Column Headers
Stock Prices Company A Company A Company A Company B Company B Company B
Stock Prices High Low Close High Low Close
2001
January 1 110 100 107 120 118 118
April 15 115 113 113 125 122 124
2002
January 1 118 115 116 127 126 126
April 15 130 128 129 130 129 129
8
Terminology Nested Column Headers
Nested Column Headers
Stock Prices Company A Company A Company A Company B Company B Company B
Stock Prices High Low Close High Low Close
2001
January 1 110 100 107 120 118 118
April 15 115 113 113 125 122 124
2002
January 1 118 115 116 127 126 126
April 15 130 128 129 130 129 129
9
Terminology Diagonal Lookup
Stock Prices Company A Company A Company A Company B Company B Company B
Stock Prices High Low Close High Low Close
2001
January 1 110 100 107 120 118 118
April 15 115 113 113 125 122 124
2002
January 1 118 115 116 127 126 126
April 15 130 128 129 130 129 129
10
Different Types of Tables Tested

• Ordinary rectangular tables
• Nested row stubs only
• Nested column headers only
• Nested row stubs and nested column headers

11
Techniques Tested

• Table header tags ltTHgt on column headers and row
  stubs
• Scope attribute using COLGROUP
• Scope attribute without COLGROUP
• Header and ID attributes.
• Combinations of all above techniques

12
General Conclusions

• Headers / ID attributes work best.
• Scope col attribute works fine with basic
  tables.
• Avoid using Scope colgroup attribute.
• ltTHgt tags not widely supported except with basic
  tables.
• Most screen readers let you mix attributes
  without crashing.

13
Example of a Basic Table
Age Percentage Poor Percentage Near Poor
65-69 8 4
70-74 10 6
75-79 11 7
80-84 12 8
85 and older 14 12
14
Making Basic Tables Accessible

• Both scope attribute and ltTHgt tags make table
  accessible.
• No need for added complexity of headers/id
  attributes

15
Code Snippet of Using Scope Attributes
lttable border"1"gt lttr valign"bottom"gt lttdgtAgelt/
tdgt lttd align"right" scope"colgtPercentageltbrgtp
oorlt/tdgt lttd align"right" scope"colgtPercentage
ltbrgtnear poorlt/tdgt lt/trgt lttrgt lttd
scope"rowgt65-69lt/tdgt lttd align"right"gt8lt/tdgt
lttd align"right"gt4lt/tdgt lt/trgt ... lt/tablegt
16
Code Snippet Using ltTHgt Tags
lttable border"1"gt lttr valign"bottom"gt lttdgtAgelt/
tdgt ltth align"right"gtPercentageltbrgtpoorlt/thgt ltt
h align"right"gtPercentageltbrgtnear
poorlt/thgt lt/trgt lttrgt ltthgt65-69lt/thgt lttd
align"right"gt8lt/tdgt lttd align"right"gt4lt/tdgt lt/t
rgt .... lt/tablegt
17
Nested Table Headers
Stock Prices Company A Company A Company A Company B Company B Company B
Stock Prices High Low Close High Low Close
January 1, 2002 105 95 102 110 105 107
January 15, 2002 110 100 107 120 118 118
February 1, 2002 115 113 113 125 122 124
February 15, 2002 117 114 115 126 125 125
March 1, 2002 118 115 116 127 126 126
March 15, 2002 130 128 129 130 129 129
18
Making Nested Column Headers Accessible

• Dont rely on ltTHgt tags alone.
• Dont use scope colgroup
• Okay to use scope col
• Best to use headers and id attributes

19
Code Snippet Using Headers and ID Attributes
lttablegt ltTRgt...ltTD IDcoAgtCompany
Alt/TDgtlt/TRgt .... ltTRgt...ltTD ID"LowAgtHighlt/tdgtlt/t
rgt ... ltTRgt ltTD ID"Jan15gtJanuary 15,
2002lt/tdgt .... ltTD headers"Jan15 coA
LowAgt100lt/tdgtlt/trgt .... lt/tablegt
20
Nested Row Stubs
Stock Prices Company A Company B
2001
January 1 100 105
April 15 110 107
2002
January 1 115 108
April 15 120 115
21
Making Nested Row Stubs Accessible

• Use headers and id attributes to make tables
  accessible.
• Okay to mix headers and id attributes in the same
  cell.
• Scope col can be used in column headers.
• ltTHgt tags are handled unreliably by some screen
  readers.

22
Code Snippet Using Headers/ID in a Nested Row Stub
lttablegt ltTRgt...ltTD IDcoAgtCompany
Alt/TDgtlt/TRgt .... ltTRgt...ltTD ID"2001gt2001lt/tdgtlt/t
rgt ... ltTRgt ltTD ID"Apr152001" HEADERS"2001gtApri
l 15, 2001lt/tdgt .... ltTD HEADERS"coA 2001
Apr152001gt110lt/tdgtlt/trgt .... lt/tablegt
23
Nested Row Stubs AND Nested Column Headers
Stock Prices Company A Company A Company A Company B Company B Company B
Stock Prices High Low Close High Low Close
2001
January 1 110 100 107 120 118 118
April 15 115 113 113 125 122 124
2002
January 1 118 115 116 127 126 126
April 15 130 128 129 130 129 129
24
Making Complicated Tables Accessible

• Do not rely on ltTHgt tags for non-diagonal
  associations.
• Dont use scope colgroup.
• Try to use headers and id attributes.
• Try to simplify tables, where possible.
• Code snippets same as before.

25
Other Points

• Pad cells with blank spaces--- try not to use
  blank columns.
• Try to avoid blank rows.
• Try to avoid blank columns or using columns just
  for formatting spacing.
• Try to avoid blank cells where possible.
• Try to simplify table structure.
• Use anchor tags for footnotes.