Home Accessibility Tables Designing Accessible Tables Using ABBR   |   Search MS Office A-Z   |   Search Web Pages/ Design A-Z

Designing Accessible Tables Using ABBR

If you were listening to the table read aloud, you'd hear:

"This table lists amount of money raised and spent by the major party candidates in the 2000 U.S. Presidential election"

"Candidate: George W. Bush    Amount Raised: $193,088,650   Amount Spent: $185,921,855"
"Candidate: Al Gore       Amount Raised: $132,900,252   Amount Spent: $120,371,857"

The table header attribute is often rendered in bold face type in browsers. Screen readers give the content a slightly different voice inflection to distinguish the headers from the content. We put it in italics to show the difference.

This table is small, so there isn't much repetition, but suppose you were presenting the total contribution and spending data for a dozen candidates? Visitor will quickly tire of hearing "Amount Raised" and "Amount Spent" repeated over and over.

To avoid excess repetition, use the ABBR attribute comes in. Include it with any long ID attributes. Screen readers will say the entire title aloud the first time, but use the abbreviation on all subsequent rows. In this table, you could shorten "Amount Raised" to "Raised" and "Amount Spent" to "Spent" like this:

<TR> <TH id="t1">Candidate</TH> <TH id="t2" abbr="raised">Amount Raised</TH> <TH id="t3" abbr="spent">Amount Spent</TH> </TR>