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 - 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 cells

Tables used for layout - IGNORE EVERYTHING you hear today!!! Avoid Nesting tables

Make sure table makes sense when linearized

  

Don't use

Use proportional units Better for mobile. Helps prevent horizontal scrolling. Add a table name

Use the

Meals Hotels Transport

25-Aug-97 37.74 112.00 45.00

26-Aug-97 27.28 112.00 45.00

Subtotal 65.02 224.00 90.00

Use Table Head cells Travel Expense Report

Dates Meals Hotels Transport

25-Aug-97 37.74 112.00 45.00

26-Aug-97 27.28 112.00 45.00

Sub-total 65.02 224.00 90.00

Explain the table

Use the aria-describedby attribute on the

25-Aug-97 37.74 112.00 45.00

26-Aug-97 27.28 112.00 45.00

Sub-total 65.02 224.00 90.00

This table shows meals, hotels, and transport for 2 separate days with subtotal by category.

Summary paragraph could be hidden by CSS. .summary { display: none; }

Alternatives You can use additional markup, such as paragraphs

, inside

Use the summary attribute on the

25-Aug-97 37.74 112.00 45.00

26-Aug-97 27.28 112.00 45.00

Sub-total 65.02 224.00 90.00

When possible - Simplify Not always easy - May need to break into several tables

A word about COLOR No Accessibility issues with Table Borders

Color 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 subtotals

San Jose

25-Aug-97 37.74 112.00 45.00

26-Aug-97 27.28 112.00 45.00 subtotals 65.02 224.00 90.00 379.02

item over per diem

item over per diem

scope out the table

Use scope attribute on all

Headings Date Meals Hotels Transport

San Jose 25-Aug-97 37.74 112.00 45.00

San Jose 26-Aug-97 27.28 112.00 45.00

headers and id

Programmatically associate

Travel Expense Report City & Dates Meals Hotels Transport subtotals

San Jose

25-Aug-97 37.74 112.00 45.00

26-Aug-97 27.28 112.00 45.00 subtotals 65.02 224.00 90.00 379.02

Seattle

27-Aug-97 96.25 109.00 36.00

28-Aug-97 35.00 109.00 36.00 subtotals 131.25 218.00 72.00 421.25

Totals 196.27 442.00 162.00 800.27

Sorting table columns

Sorting demo (modified this - SSA Accessibility Best Practices Library - Tables)

Tables - CSS fun

0. 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 Examples

6. Responsive Table

7. Highlight Cell Relationships Visually (low vision)

8. Table Generator

Scrollable CSS Table that is accessible http://www.cssplay.co.uk/menu/tablescroll.html

 W3C HTML5

Table Reading Keyboard Functions

Travel Expense Report - San Jose