SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    66
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Is this table accessible to screen readers?

    The table is empty right now, but each cell will have data in it.

    Can <th scope="colgroup"> be used after <th scope="col"> ?

    Would the table below makes sense to screen readers? Thanks



    <table cellspacing="1" cellpadding="3" border="1">
    <tbody>
    <tr>
    <th scope="col">Header 1</th>
    <th scope="col">Header 2</th>
    <th scope="col">Header 3</th>
    </tr>
    <tr>
    <th scope="colgroup" colspan="3">Sub Header for 3 rows below only (spans whole width) </th>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <th scope="colgroup" colspan="3">Sub Header for 3 rows below only (spans whole width)</th>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <th scope="colgroup" colspan="3">Sub Header for 3 rows below only (spans whole width)</th>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </tbody>
    </table>

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    66
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Anyone?

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Can't say without seeing what you are plugging into it for content, though a header on tabular data that spans multiple rows rarely makes sense.

    At the very least, move the first row of TH up into THEAD instead of TBODY... then you shoudn't have to say scope since THEAD basically does that anyways.

    The use of scope=colgroup makes no sense -- as you didn't DEFINE any colgroups with the COLGROUP tag.

    You may have more luck using AXIS and HEADERS instead of SCOPE... though that often seems needlessly complex - check the "tables in HTML documents" page at the W3C for some examples of that in action.

    Tables in HTML documents

    Though the colspan on a TH alone should be enough for a screen reader to handle it. I'd strip out all the scope declarations, get THEAD in there around the TR for those first three TH, and call it done.

    Though you could leave the scope's in... the example for thead on WDG's site does:
    http://htmlhelp.com/reference/html40/tables/thead.html

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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?
    Code:
    <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.

  5. #5
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme
    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.
    I am not sure how relevant this info is, but WebAIM advocates not using spanned elements. WebAIM: Creating Accessible Tables - Data Tables.
    Ryan B | My Blog | Twitter

  6. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Interesting. I dunno if my old version 7 does that, but it is stuck with IE6/7 so prolly is.

    But I think if the data makes the most sense that way, I would use them.
    We use tables like that! The one on the FS page is exactly how things like timed television programs appear. I've had school course schedules like that.
    When I get the schedule for YAPC talks it will have spanned rows and/or columns.

    I have avoided stuff because some browser x has a bug with it. I avoided inputs wrapped in labels because of the Window-Eyes bug.
    But if I wrote HTML5 would I avoid <header> because of JAWS12 and Firefox?

    I guess the developer has to decide which bugs he'll bow down to and which ones he'll tell to get lost. Like people do with IE6.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •