now, if your screen reader spewed that out to you and then charged forward to read out the actual meat of the table, what would you do? shake your head in confusion? stop the process and re-read the summary?
and if this torrent of metadata is coming at you via a braille display (an even slower serial interface than speech, which you can at least stop, start, and skip through), how do you handle it then?
the wcag have not decided which form of accessible table markup ought to prevail – any of the one million header tags i’ll get to shortly or this catch-all summary attribute. looked at soberly, it’s clear that summary should be short and sweet. why? there’s an emphasis throughout the guidelines on using actual html structure for accessibility rather than using circumlocutions.
it’s pretty clear: “when an appropriate markup language exists, use markup rather than images to convey information,” say the wcag. elsewhere, we are told: “mark up documents with the proper structural elements.... [u]sing presentation markup rather than structural markup to convey structure (e.g.,
Pandora Charms On Sale, constructing what looks like a table of data with an html pre element) makes it difficult to render a page intelligibly to other devices.”
so why do the wcag advocate, in the lengthy example above, the use of unstructured, unpredictable summary text to “describe” the structure of a table?
it would appear that the summary attribute exists to provide a middling level of detail. if we think back to making images accessible, summary is possibly comparable to adding a title, not a longdesc. imagine a page containing multiple tables. a screen-reader user might use the summary attribute to differentiate one table from another. (admittedly, the comparison with image accessibility falls down here, because we used longdesc as a differentiator in that case.)
on the upside, summarys are quite easy to write. just ask yourself “what is this table for?” and write that down in a concise sentence. it might require superhuman imagination to write a summary that doesn’t begin with the words “this table...” or “a table that...” but we can live with it. indeed, given all the other metadata that could be enunciated by a screen reader, a consistent writing structure might help keep summary separate from title or header information.
if summary is meant to be invisible in graphical browsers,
Tiffany Diamond Rings, how can it be “fun” nonetheless, as i promised before? because some graphical browsers can actually speak. icab on macintosh is one of them, and it will dutifully read out a summary. you can impress your friends: have them over to demonstrate a browser that talks without additional hardware or software and watch their eyebrows raise when the system utters words that simply are not present onscreen. certainly, for the purposes of impressing your friends, i could not possibly suggest that you load up the summary attribute with song lyrics, bible passages, or one of the raunchier personal ads in the alternative newsweekly of your choice. that would be irresponsible,
Pandora Bracelets Store, and would simply require you to remove the ######## text and use the summary properly, lest you inadvertently foist upon the world a table with summary text you’d prefer that strangers never hear.
headers, headers, and more headers
all right. the party’s over. now we hit the head-scratchers.
html tables make provision for header information. in fact, they make bewildering, multilayered provision for headers. over and over again, in so many confusing ways whose intentions and application are poorly explained in world wide web consortium source documents.
to make matters worse, even some screen readers don’t understand all the header substructures in html tables. learning every nook and cranny of html table headings prepares you for the future more than it solves today’s accessibility problems.
what is a header?
html specs are a tad vague on what a header actually is,
Tiffany Necklaces, how many of them there can be, what forms they can take,
Wholesale Tiffany Jewelry, and how one form can be differentiated from another, and how they interact with related accessibility structures like groupings.
so it behooves us to come up with a functional definition. headers use structured representations to elucidate or introduce tabular data. headers usually precede data; a header that follows data can be called a footer.
why “structured”? because we’re using html, which enforces several kinds of structure. why “representations” and not words? because nothing stops you from using images (like pictographs or product photography), with appropriate alternate texts and titles, as your headers; they’re meant to be read by human beings, whose comprehension is not limited to written words. (or you may also be stuck using a picture of, say, japanese text rather than actual japanese text because you lack fluency, the right fonts, or the expertise to type in japanese.)
why “elucidate or introduce” rather than just the latter? because tables are two-dimensional: your header information may sit in two places in the table, like the very top and the extreme left, and a reader must combine the two to understand the data. or, in another case, you might look at the middle of a table, starting with a cell containing a number; then read up to find the unemployment column header; read to the left to find the queensland row header; and then, at last, understand that the number combines with the headers to mean unemployment in queensland.
but that of course is the problem. a screen-reader or braille user cannot simply glance at the row and column headers. remember, those are serial-access devices, and in the worst case you’d have to traverse every intervening row or column until you hit the header,
Tiffany Diamond, then step all the way back to where you started. now, adaptive technology can automatically associate header information with cells, if you provide it. and you have a range of options. let’s start small.
first-level headers
remember that table rows, marked up by <tr></tr>, contain table cells or table “data,” specified by <td></td>? you also have the option of using <th></th> instead of <td></td> for cells in a row that are meant to act as headers for the “column” implied by the table structure.
it’s permissible and encouraged to use <th> on cells in the middle of a table if those cells act as headers for the rows below them but not the rows above. you can also use a single <th> cell (like the first in a row) as a row header.
second-level headers
there is, however, another level of header abstraction in tables,
Tiffany Crystal, known, surprisingly enough, as <thead></thead> for table head.
actually, in a strict interpretation, html tables contain a <thead></thead>, a <tbody></tbody> (the body or meat of the table, and there can be more than one), and a <tfoot></tfoot> (a footer). you are not required to use any or all of those codes. indeed, <tbody></tbody> is implicit in every table (even an empty one: <table><tr><td></td></tr></table> is legal, and the empty row is the body). by contrast, headers and footers must be explicitly specified.
to remain kosher, you will need to get in the habit of explicitly marking up <tbody></tbody> if you also use <thead></thead> or <tfoot></tfoot>. if you’re making a header or footer explicit, you must not leave the body implicit.
again in strict interpretation, <thead></thead> is intended for visual presentation. if your table extends beyond one printed page, every page can show the table header. the spec states: “this division enables user agents to support scrolling of table bodies independently of the table head and foot. when long tables are printed, the table head and foot information may be repeated on each page that contains table data.”
adaptive technology can nonetheless read and use the <thead></thead> information. or if it cannot, it needs to be upgraded by the manufacturer; you’re doing your part and they need to do theirs.
what goes inside <thead></thead>? rows and cells. (“the table head and table foot should contain information about the table’s columns. the table body should contain rows of table data,” saith the w3c.) and of course those rows can also be headers, if you recall the <th></th> or table-header element. headers inside headers? yup. and it gets better: you can use as many <tbody></tbody> divisions as you want.
so we’ve got tables with headers inside headers and one or more bodies. welcome, ladies and gentlemen, to html for tables.
easy example:
<table align="center" cellpadding="5" cellspacing="3" summary="unemployment figures in queensland in 1994">
<thead>
<tr><th>city</th><th>age</th><th colspan="3">rate (%)</th></tr>
</thead>
<tbody>
<!-- rows and cells in any quantity -->
</tbody>
</table>
footers
footers are footers but also headers,
Tiffany Verlobungsring, in the way that a thumb is a thumb but also a finger or a leg is a leg but also a limb. footers are merely headers that appear at the bottom rather than the top.
there is, in fact, an html construct for footers, which goes by the unsurprising name of <tfoot></tfoot>. yet table footers, in the real web as it is genuinely experienced as contrasted with the parallel-universe web envisioned by the world wide web consortium, are rarely necessary.
in the prehistoric medium called print, true table footers tended to limit themselves to tables in which headers and footers needed to be the same to make understanding the table easy. the canonical example is a printed transit timetable, with departure cities listed in a left-hand column and destination cities in header and footer. that way, even if your departure city were two-thirds of the way down a very long table, you could trace down to the destination city rather than traversing that two-thirds distance all the way back to the top. in some cases, departure cities were listed not only in a column at left but the rightmost column for similar reasons. (all this applies, of course, to someone who can actually see, read, and manipulate a printed timetable.)
we could describe footers of this sort as structural. it is clear that the html table spec envisages this sort of structural footer, which is intended to appear at the bottom of successive pages were a lengthy table actually printed out. structural footers, then, are more or less equivalent to the running footers of conventional print typography.
now, you may be tempted to imagine that, say, the totals of a financial table, by virtue of appearing at the bottom of said table, are actually footers. that is rarely the case, if it ever is, because the totals represent one-time-only information that will not be repeated on later pages (or screenfuls, if online). one could imagine running subtotals appearing on each page or screenful, but there is no html mechanism for such a thing. (this isn’t print, with its standardized dimensions. how do you determine the length of your visitor’s screen? if you don’t know even that much, how do you place running footers?) running subtotals are hard to display even using a spreadsheet program.
in any event,
Teaching Carnival #13 A Blog Around The Clock, footers are rarely encountered in web tables. there’s not a lot to know about them; the chief concern is placement of the <tfoot></tfoot> code. let’s quote the w3c: “tfoot must appear before tbody within a table definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.”
yes, you have to list the end of a table before the middle of it, like so:
<table align="center" cellpadding="5" cellspacing="3" summary="unemployment figures in queensland in 1994">
<thead>
<tr><th>city</th><th>age</th><th colspan="3">rate (%)</th></tr>
</thead>
<tfoot>
<tr><th>city</th><th>age</th><th colspan="3">rate (%)</th></tr>
</tfoot>
<tbody>
<!-- rows and cells in any quantity -->
</tbody>
</table>
note that the spec tells us to place <tfoot></tfoot> before <tbody></tbody>; it says nothing about where to place <thead></thead> in relation to <tfoot></tfoot>, so you might as well place it first for logic's sake.
in this example, we’re duplicating the headers in the footer for easy scannability by a sighted person.
does all of this have any relevance for screen-reader users?
not a whole lot. in fact, as far as a screen reader is concerned, footers might as well not exist, except in the surpassingly rare cases where footers provide information that headers or body rows do not. (remember, we’re talking about true footers here, not unstructured, unrepeated text that coincidentally appears at the bottom.) it’s like expecting a fly to be able to see, let alone care about, the soaring peak of a mountain. footers are simply beyond the consideration of screen readers, which, as we know all too well, are sequential devices. knowing about what appears at the bottom of a table isn’t of much use to a machine that reads from the top down.
this argument does not excuse you from coding table footers correctly should you blaze a trail and actually write a table that requires them. they’re just not something you particulary need to worry about in day-to-day web design.
structure
html provides a bewildering array of header tags and attributes below the level of <thead></thead> and <th></th>. the list includes:
Tiffany Diamond Rings {title|jhgjhg|}
Hybrid Mode
