|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
|
|
| No member browsing this thread |
|
Thread Status: Active Total posts in this thread: 7
|
|
| Author |
|
|
Advanced Member Joined: May 26, 2006 Post Count: 1757 Status: Offline |
I am trying to use this example from Juicy Studio to create an accessible order form/shopping cart. In his example code, he has: <table>But I don't understand how the id and scope "connect" to the rest of the data. If you look at the headers example it seems clear enough. You have a name that may be id="header1" and the for the <td> you would be headers="header1". This makes sense to me because the data is somehow connected and I would guess that UA could read this well. I just don't get the other example. |
||
|
|
Advanced Member USA Joined: Nov 27, 2003 Post Count: 6285 Status: Offline |
Well scope basically tells the user agent that the Table header is a header for either a row or a column, in this case it says that that word is a header for a column. |
||
|
|
Advanced Member Joined: May 26, 2006 Post Count: 1757 Status: Offline |
Oh ok, I get that, I guess I don't understand how they are connected... <table> <thead> <tr> <th id="immagine" scope="col">Image</th> <th id="prodotto" scope="col">Product</th> <th id="prezzo" scope="col">Price</th> <th id="acquista" scope="col">Buy</th> </tr> </thead> <tbody> <tr> <td>Pic 1 Goes Here</td> <td>Item # 1</td> <td>$10.00</td> <td>Buy Now</td> </tr> <tr> <td>Pic 2 Goes Here</td> <td>Item # 2</td> <td>$20.00</td> <td>Buy Now</td> </tr> </tbody> </table> So would a UA automatically know that, since scope is using "col", it will read it in a column? Why wouldn't you have to put anything with the <td> tags (referring to the headers example again). |
||
|
|
Advanced Member USA Joined: Nov 27, 2003 Post Count: 6285 Status: Offline |
I have never dealt allot with accessible tables... I don't have time to really read it all either... But as i recall, the scope will cause a screen reader to read the TH each time. Remember, tables are read left to right. So I am thinking it should read: Note... Image... (alt text, maybe "Mask") Code: 0623... Product... Antiqued Lace Columnbina ... etc. So I think the scope causes the TH to be read each time... otherwise you would have to remember and guess what each section means when it is read, quite hard with many rows, so scope causes it to be read each time so it is clear what each TD holds for info. |
||
|
|
Advanced Member Joined: Sep 3, 2005 Post Count: 2206 Status: Offline |
The scope attribute in the table header will connect any cell (td) within the column with the header (th) for that column. Each time a screen reader encounters a data cell within that column it will read the table header for that column followed by the data in the cell. (Or row if you use row, or group of columns if you use colgroup, or group of rows if you use rowgroup). So there is no need to put anything in the tds. I've never seen the id used like that until now. I've always used scope to associate data with table headers. And I'm wondering why the example uses both id and the scope, it seems redundant from what I've just been reading in the WCAG from the link Chris gave. The next example associates the same header (TH) and data (TD) cells as before, but this time uses the "scope" attribute rather than "headers". "Scope" must have one of the following values: "row", "col", "rowgroup", or "colgroup." Scope specifies the set of data cells to be associated with the current header cell. This method is particularly useful for simple tables. It should be noted that the spoken rendering of this table would be identical to that of the previous example. A choice between the "headers" and "scope" attributes is dependent on the complexity of the table. It does not affect the output so long as the relationships between header and data cells are made clear in the markup. If you had a complex data table, with merged cells or sub headings where the data associated with the header may not necessarily line up in the same column or row, then using the id and header attributes would make sense. Otherwise the scope attribute should be sufficient to associate the header information with the data cells, and there's no need to add extra mark-up to each individual cell. I see no need for both. ---------------------------------------- Quiquid latine dictum sit altum viditur ---------------------------------------- [Edit 2 times, last edit by billyboy at Jul 8, 2007 10:34:22 AM] |
||
|
|
Advanced Member USA Joined: Nov 27, 2003 Post Count: 6285 Status: Offline |
By having an ID it also allows that header to be directly spoken to for filling it with database info or allow links/screen readers to jump directly to it. |
||
|
|
Advanced Member Joined: May 26, 2006 Post Count: 1757 Status: Offline |
From Kyle, So I think the scope causes the TH to be read each time... otherwise you would have to remember and guess what each section means when it is read, quite hard with many rows, so scope causes it to be read each time so it is clear what each TD holds for info. From Bill, The scope attribute in the table header will connect any cell (td) within the column with the header (th) for that column. Each time a screen reader encounters a data cell within that column it will read the table header for that column followed by the data in the cell. Thanks guys, these explanations cleared it up for me. Especially if you have a table with a lot of products, it would be better if the screen reader said read the header with it's associated data. I've never seen the id used like that until now. I've always used scope to associate data with table headers. And I'm wondering why the example uses both id and the scope, it seems redundant from what I've just been reading in the WCAG from the link Chris gave. This is my first time using the scope method as I've always used the headers method because I was dealing with simple tables. I didn't really understand what the id's had to do with it under this example. By having an ID it also allows that header to be directly spoken to for filling it with database info or allow links/screen readers to jump directly to it. Understood. |
||
|
|
|
|
|
Current timezone is GMT May 19, 2013 8:17:24 PM |