Data Tables

What you need to know to make your table accessible. This means your tabular data table, of course, since we’re no longer using tables for layout, right? Dennis covers summary, caption, th, scope and abbr.

Download Web Axe Episode 3

[transcript]

W3C techniques on row and column information

Sample code:

Average temperature and humidity for the United States
State Name Average Temperature Average Humidity
Alabama 50 50
Alaska 50 50

4 comments

  1. Chris Charlton

    Good show and HTML snippet shown. I find that W3 table link you provided is a great read! Yes, all should read it just to get a feel of how tabular data is read off.

    Most wonder, or may hate, getting these things done for screenreaders but it doesn’t end with screenreaders. As the web more and more get aggregated and content gets re-rendered/re-purposed or stripped from sites, those apps may utilize accessible code to its’ advantage. Who says Google can’t have a table-reader that renders table data like the text example the W3 shows.

    I doubt I made sense since I ramble, but everyone – just do it, it won’t hurt and will give your content a golden touch.

  2. Dennis Lembree

    Yes, in addition to accessibility, it’s also about “the semantic web”. And people who don’t like doing these litte extra things, in my opinion, are just afraid to learn or afraid of change. And they surely won’t be doing web coding in the (near?) future.

  3. Splash

    Thanks so much for your podcast, I just found it.

    My question is, how can you handle complex data entry tables — multiple header lines, some with rowspan and colspan, multiple summary rows, etc.

    It’s tough to find an example that’s complex like that. I ended up using the header element, some of the td’s had 5 header elements. Maybe there are better options?

    – a ColdFusion programmer

  4. Dennis Lembree

    Good question Splash. Your referring to a multidimension axis, which uses the ID attribute, and is much more time consuming to do. I’m not aware of any applications that do it easily, so if anyone knows, please let us know! Here are a couple references on how to do it though:
    WebAim
    W3C

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>