Table Reading Keyboard Functions

Accessible Tables James Allan, Stacey Rayos Texas School for the Blind and Visually Impaired [email protected], [email protected] http://www.tsbvi.edu/web/tables/Table Reading keyboard functions JAWS/NVDA (screen readers) Announces when you enter/exit a table  Ctrl+Insert+T - List all tables on a page (JAWSs only)  T - jump to table (Shift-T) o Reads <caption> - visible on screen o Reads summary - invisible metadata  Ctrl+ALT+arrow Keys - move between cells  Ctrl+ALT+NumPad-5 - tell me about the cell (Where am I?) (JAWS only)VoiceOver (Mac screen reader) System Preferences > Keyboard > Shortcuts > click All Controls  Safari > Preferences > Advanced > Check - Press TAB to highlight each item on a webpage  Command+F5 - turn on/off VoiceOver  Control+Option+Command+T - jump to a table (Shift+Control+Option+Command+T)  Control+Option+arrowKeys - move between cellsTables used for layout - IGNORE EVERYTHING you hear today!!! Avoid Nesting tablesMake sure table makes sense when linearized Use  <TR>  <TD>  <table role="presentation"> (HTML5)Don't use <TH>  <CAPTION>  scope  headers Use proportional units Better for mobile. Helps prevent horizontal scrolling. Add a table name Use the <CAPTION> element In HTML5, you can use additional markup inside <CAPTION>, such as headings <Hx>. Travel Expense Report - San Jose Meals Hotels Transport25-Aug-97 37.74 112.00 45.0026-Aug-97 27.28 112.00 45.00Subtotal 65.02 224.00 90.00<table border="1" width="40%"> <caption><h2>Travel Expense Report - San Jose</h2></caption> <tbody> <tr> <th></th>Use Table Head cells Travel Expense Report Dates Meals Hotels Transport25-Aug-97 37.74 112.00 45.0026-Aug-97 27.28 112.00 45.00Sub-total 65.02 224.00 90.00<table border="1" width="60%"> <caption> Travel Expense Report </caption> <tbody> <tr> <th>Dates</th> <th>Meals</th> <th>Hotels</th> <th>Transport</th> </tr> <tr> <th>25-Aug-97</th> <td>37.74</td> <td>112.00</td> <td>45.00</td> </tr>Explain the table Use the aria-describedby attribute on the <TABLE> element Travel Expense Report - San Jose Dates Meals Hotels Transport25-Aug-97 37.74 112.00 45.0026-Aug-97 27.28 112.00 45.00Sub-total 65.02 224.00 90.00This table shows meals, hotels, and transport for 2 separate days with subtotal by category.Summary paragraph could be hidden by CSS. .summary { display: none; }<table aria-describedby="summary" border="1" width="60%> <caption> Travel Expense Report - San Jose </caption> ... </table> This table shows dates, meals, hotels, and transport for 2 separate days with subtotal by category. Use the summary attribute on the <TABLE> element Alternatives You can use additional markup, such as paragraphs , inside <CAPTION>. Possibly use the paragraph to "explain" the table? (Juicy Studio). However, screen readers read everything within <CAPTION>. Various other solutions have been tested-- David McDonald and Terrill Thompson. Or…Use the summary attribute on the <TABLE> element !! this is deprecated in HTML5--BUT IT STILL WORKS!! Travel Expense Report - San Jose Dates Meals Hotels Transport25-Aug-97 37.74 112.00 45.0026-Aug-97 27.28 112.00 45.00Sub-total 65.02 224.00 90.00 <table border="1" width="60%" summary="dates, meals, hotels, and transport. for 2 separate days with subtotal by category."> <caption> Travel Expense Report - San Jose </caption>When possible - Simplify Not always easy - May need to break into several tables A word about COLOR No Accessibility issues with Table BordersColor used to convey information in text or cell backgrounds ... DOES have issues - use aria- describedby as always - WATCH YOUR CONTRAST!Travel Expense Report Dates Meals Hotels Transport subtotalsSan Jose25-Aug-97 37.74 112.00 45.0026-Aug-97 27.28 112.00 45.00 subtotals 65.02 224.00 90.00 379.02 item over per diem<table> <caption>Travel Expense Report</caption> <tr> <th>Dates</th> <th>Meals</th> <th>Hotels</th> <th>Transport</th><td>subtotals</td> </tr><tr> <th>San Jose</th> ...</tr> <tr> <td>25-Aug-97</td> <td bgcolor="red" aria-describedby="over">37.74</td> <td bgcolor="#00FF66">112.00</td> <td bgcolor="#333366">45.00</td>...</table> item over per diem scope out the table Use scope attribute on all <TH> or Use scope on ambiguous <TH> Travel Expense Report Headings Date Meals Hotels TransportSan Jose 25-Aug-97 37.74 112.00 45.00San Jose 26-Aug-97 27.28 112.00 45.00<table> <caption> Travel Expense Report </caption> <tbody> <tr> <th scope="row">Headings</th> <th>Date</th> <th>Meals</th> <th>Hotels</th> <th>Transport</th> </tr> .... headers and id Programmatically associate <TH> with cell data  <TH> and as needed <TD> have id  <TD> and as needed <TH> have headers  a cell can have BOTH headers and id attributes  headers read in source order  Complex Data Table Markup Toolbar - Vision Australia  Does NOT work with VoiceOverTravel Expense Report City & Dates Meals Hotels Transport subtotalsSan Jose25-Aug-97 37.74 112.00 45.0026-Aug-97 27.28 112.00 45.00 subtotals 65.02 224.00 90.00 379.02Seattle27-Aug-97 96.25 109.00 36.0028-Aug-97 35.00 109.00 36.00 subtotals 131.25 218.00 72.00 421.25Totals 196.27 442.00 162.00 800.27<table> <caption>Travel Expense Report</caption> <tbody> <tr> <td></td> <th id="eat">Meals</th> <th id="sleep">Hotels</th> <th id="gp">Transport</th> <td id="sub-jose">subtotals</td> </tr> <tr> <th id="jose">San Jose</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td id="aug25">25-Aug-97</td> <td headers=" eat jose aug25" bgcolor="#ffff00">>37.74</td> <td headers=" jose sleep aug25">112.00</td> <td headers=" aug25 go jose">45.00</td> … Paul Adam screen reader testing page for tables - voiceover WebAIM VoiceOver Practice: Tables Complex Tables Test - David MacDonald Sorting table columnsSorting demo (modified this - SSA Accessibility Best Practices Library - Tables) <th> are buttons with title attribute explaining "sort", "column", and "direction"  JavaScript used to do the work and accessibility... 1. sorting a column returns user to sorted column (not top of page or other strange place) 2. adds a <caption> to indicate how the table is being sorted (helps user see what changed in the table). ARIA's role="alert" is added to ensure that it is read by screen reader. 3. adds a title attribute to the sortable links. The title's value should indicate how the column would be sorted when the user selects it. 4. when a link is selected, use JavaScript to change the values for the <caption>, aria-sort and title attributes (2 & 3 above)Tables - CSS fun0. The Complete Guide to the Table Element (CSS-TRICKS)1. Single line borders table {border-collapse: collapse;}2. Zebra Strip table (mind the contrast) tbody tr:nth-child(odd){background: #eee;}3. Space for reading ... (just a bit between text and border) td {padding-left: .2em; } td {padding: 0.1em 0 0.1em 0.2em;} (top right bottom left) 4. Display table headers on each page when printing Example. Does not work in Webkit browsers (sigh...) (Thanks to Evagoras Charalambous) thead {display: table-header-group; } tbody {display: table-row-group; } 5. 10 CSS Table Examples6. Responsive Table7. Highlight Cell Relationships Visually (low vision)8. Table GeneratorScrollable CSS Table that is accessible http://www.cssplay.co.uk/menu/tablescroll.html W3C HTML5 <table>  WebAIM - Creating Accessible Tables  Jim Thatcher - Accessible Tables  Web Usability - Accessible Data Tables (a bit old)  What's an usable table?  Steve Ferg - Creating Accessible HTML Tables, Cookbook (footnotes)  Accessify.com - Accessible Table Builder  HTMLsource - Tables Accessibility (col group)  Icant - HTML, CSS and tables - the beauty of data  Federal Reserve Board - Accessible version of tables and charts  Data Table Accessibility Test Page  Freedom Scientific - JAWS and Tables  SSA Accessibility Best Practices Library - Tables (nice!)  Complex Data Table Markup Toolbar - Vision Australia  TableTools2 - Copy/Sort/Chart/Filter Table & More! (client side - Firefox) still needs accessibility work. but may be useful for your own use.

Table Reading Keyboard Functions

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support