I agree with Crusty that the table needs more structure (needs separate thead with tbody), but that’s more the HTML Nazi in me… it’s not necessary specifically for screen readers (I find using thead and tbody lets me style things with CSS much more easily, which can increase general usability and accessibility for sighted users). Whether you use th’s for your headers makes a big difference though.
then you shoudn’t have to say scope since THEAD basically does that anyways
Explicitly stating “scope” (or “headers” which is pretty much exactly the same) can expose more coherent information to a screen reader, such as reading out the header text before the data cell text. Simply setting th’s in a thead doesn’t necessarily do that (depends on the reader and the user’s settings). You might only want to hear the text in a data cell, or you may want it’s related headers announced before that text.
If I’m not using th’s to start my rows (because sometimes they are not actually headers) I will use scope=“row” on that first td in a tr. This means “the rest of the data in this row is specifically referring to this first item” rather than “this stuff is just in a general row”. So I can get that read out like a header too if I want. An example would be a list of students, their study subjects and their teachers for each subject.
You may have more luck using AXIS and HEADERS instead of SCOPE…
Headers should be about the exact same as scope as far as function. Axis though is a different thing which is more for when you maybe have a single header spanning more than one column… or a header heading more than one row (rowspan larger than 1). Or when you have both a header and a plain-data making up two rows (see the weird food expenses per city table example everyone uses). In other words, a so-called “complex table”. Most tables aren’t.
One page I use for getting used to any particular screen reader in a table is this one: Tables with JAWS and MAGic
As a coder, ignore the obvious DreamBeaver markup, the MM_swap junk and the inline styles (not recommended). But look at the markup. Many of the tables are deliberately bad, to show users how they can still get around the bad markup and use the table. Others are correct.
Notice the first table doesn’t have a header in the first cell, first row?
<td style="width: 22%;"></td>
I would have put in text there (“Network” probably) and would use CSS to pull it offscreen if I was forced to make it look like how it’s displayed on the screen.
See also how some of the television shows span two times, while other shows are only a single time. So look at Fox: Bones. You could say it should have three bits of information associated with it:
Fox (the network)
8pm (the time)
8.30pm (the time)
Here, you could use axis to call attention to the fact that it’s an hourlong instead of half-hour long program (I don’t think I would though). Or you could use the headers attribute or scope=“col” on the top headers to associate the times with Bones (what I would do). Or you could decide it’s more confusing to list both times with a one-hour show.
Some readers will use scope=colgroup to determine what to do when colspan is greater than 1, yes.
Keep in mind that screen readers are like browsers: they act differently, have their own bugs, and users can select particular settings.
Then, on top of that, the readers are sitting on top of regular browsers so they also get whatever settings that browser has, as well as that browser’s bugs. This includes the bugs in the browser regarding it’s accessibility layer (information it builds up when a page loads and it presents to the screen reader or other Accessibility Technology).
So even testing your table in one reader doesn’t necessarily mean it’s ok in all other readers (though tables are pretty old so you’d think one would be good enough).
But, as Crusty said, posting an empty table isn’t easy to say whether it’s “accessible” or not. Put some content in there and then people can actually test it.
You want to try a screen reader yourself? Why not?
If you’re on Windows you can download and use this one for free: NVDA
If you’re on a Mac with OSX, VoiceOver comes pre-installed (but with English voices only).
If you’re on Linux with the Gnome desktop, there’s Orca.
The Big 2 on Windows would be JAWS (referenced in link above) and Window-Eyes. These cost an arm and a leg, though I personally think JAWS sounds better and is easier to understand than NVDA and Orca (which use espeak for the voice). There are 40-minute demos of each. According to their download pages, these demos are not to be used by developers. This is a shame, really.