1 / 12

Accessible Tables

Accessible Tables. Making a table accessible. How does a screen reader read a table? Some people who access the web use screen readers. Most screen readers don't read the screen They read the underlying source code for the page rather than the content on the screen.

colorado-dunlap
Download Presentation

Accessible Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Accessible Tables

  2. Making a table accessible How does a screen reader read a table? • Some people who access the web use screen readers. • Most screen readers don't read the screen • They read the underlying source code for the page rather than the content on the screen. • So tabular data can be problematic

  3. How does a screen reader read a table? • A data table presented in the following ways if coded correctly: • The whole table can be read line by line, either continuously or with sections selected manually. • Using keyboard commands, the user can move along rows and JAWS reads out the heading of the actual column plus the content of the cell. • Users can also read up and down columns in a similar way. • Users can select a cell and JAWS will present the information relating to the selected cell. That is, the cell content and, if the table has been coded correctly, the associated row and column headings. <table> <tr> <td> 9.30pm – 10.00pm</td> <td> 9.30pm – 10.00pm</td> <td>9.30pm – 10.00pm</td> </tr> <tr> <td> 9.30pm – 10.00pm</td> <td> 9.30pm – 10.00pm</td> <td>9.30pm – 10.00pm</td> </tr> </table>

  4. Table attributes: summary To add more information to elements and cells first add a summary attribute to the table element • This adds additional meaning for the screen reader software • it provides a summary of the table’s purpose and structure which may be read by screen-reading software. <table summary="This table gives the names and times of some shows on Space – The Imagination Station."> <caption>Space TV</caption> <tr><td>Buffy the Vampire Slayer </td><td>19:00</td></tr> <tr><td>Stargate SG-1</td><td>20:00</td></tr> <tr><td>Angel </td><td>23:00</td></tr> </table>

  5. Table <caption> You should already have the caption element. This ensures the caption is always displayed with the table data • <caption> text</caption> • Must follow the <table> start tag: • <table> • <caption>Single Celled Table</caption> • <tr><td>One</td></tr> • </table> • Can only be one

  6. Example with basic markup <table border="1" summary="lemons and pears table with one level of row and column headers"> <caption>Prices for lemons and pears in Sydney</caption> <tr> <td></td> <th>Lemons</th> <th>Pears</th> </tr> <tr> <th>Wholesale</th> <td>$1.00</td> <td>$1.50</td> </tr> <tr> <th>Retail</th> <td>$2.00</td> <td>$2.50</td> </tr> </table>

  7. Add the table structure • <thead></thead> • Allows grouping of header rows • <tbody></tbody> • Allows grouping of body rows • <tfoot></tfoot> • Allows grouping of footer rows

  8. Elements Elements add extra semantic meaning “table rows may be grouped into a table head, table foot and one or more table body sections. This division enables agents to support scrolling of table bodies independently of the table head and foot” W3C HTML 4.01 specification You should already have this in your table <table> <caption> <tr> table row <th> table header <td> table data <thead>table head <tfoot>table foot <tbody>table body

  9. <table border="1" summary="lemons and pears table with one level of row and column headers"> <caption>Prices for lemons and pears in Sydney</caption> <thead> <tr> <td></td> <th>Lemons</th> <th>Pears</th> </tr> <thead> <tbody> <tr> <th>Wholesale</th> <td>$1.00</td> <td>$1.50</td> </tr> <tr> <th>Retail</th> <td>$2.00</td> <td>$2.50</td> </tr> <tbody> </table> Prices for lemons and pears in Sydney

  10. Add id and headers attributes The final addition to your markup is to add the id and headersattributes This ensures the that data cells are linked with the appropriate headings. • the headers attribute is used with the <td>element. • this attribute is used in conjunction with the id attribute within a table heading <th> to allow any cell or cells to be associated with a heading.

  11. Example of id and headers Identify the different categories in your table <tr> <td></td> <th id="beans">Beans</th> <th id="peas">Peas</th> <th id="carrots">Carrots</th> <th id="tomatoes">Tomatoes</th> </tr> <tr> <th id="darwin" colspan="5">Darwin</th> </tr> <tr> <th headers="darwin" id="wholesale-darwin">Wholesale</th> <td headers="beans darwin wholesale-darwin">$1.00</td> <td headers="peas darwin wholesale-darwin">$1.25</td> <td headers="carrots darwin wholesale-darwin">$1.20</td> <td headers="tomatoes darwin wholesale-darwin">$1.00</td> </tr> Link the column ids with the section you are in. Try reading this out loud and see if it makes sense.

  12. Reference http://www.usability.com.au/resources/tables.cfm

More Related