 |
Chat Session
Conducted for Students and SEM
Practitioners with
Ongoing Access to the Resources of the
Academy of
Web Specialists
Back to Chat
Index
HTML Chat: Accessibility Tables, Part 2:
Data Tables
January 14, 2003
Conducted by Robert Roberts
Academy of Web Specialists
Take
search engine marketing training!
Robert Roberts: Today's topic is the exciting world of
data tables - everybody's favorite subject, about as exciting as home knee
surgery, but something we have to deal with frequently.
Robert
Roberts: In the old days, the concept of tables was a method for
transmitting tabular data via the web, because of this, early browsers treated
tables as something separate from regular html...
Robert
Roberts: For instance, page font specs were, and still are, ignored in
table cells. Then along came designers, who just have to meddle with everything
and suddenly the concept of using tables for page layout became the hot thing
to do.
Robert Roberts: Well this wasn't what tables were meant
to do, but now everyone was doing it.... Furthermore, the standard WYSIWYG
editors promoted this, and made it easy to set up highly complicated tables
with nested tables, etc. etc.
Robert Roberts: So now we have a
world of WYSIWYG editors still approaching layout from a mid-1990s view, but
some like Dreamweaver, are trying to be much better about issues of
accessibility.
Robert Roberts: So to start with, let's go over
the primary rules for building accessible data tables. I'll copy/paste here,
but break in if you have a question
Robert Roberts: 1. Don't
use presentation markup such as font tags, background color calls. Use
cascading style sheets (CSS), rules and classes.
Robert
Roberts: 2. Ensure that the contents of the table make sense when
linearized (i.e. when removed from the table).
Joopiter: OK,
why?>
Robert Roberts: Screen readers read the content of web
pages as if there were no html tags at all. They read everything in the order
that it appears in the source markup.
Joopiter: So you're just
keeping unnecessary code out of your pages - right?
Robert
Roberts: Correct, Joopiter. Think left-right reading order, not up-down.
Let's look at an actual example:
http://www.temple.edu/instituteondisabilities/piat/talks/pa-gov/datatable.html
Robert Roberts: 4. Do not use the "pre" tag for laying out
tables. Avoid using tables simply for formatting paragraphs of text. Some
screen readers have trouble reading table cells that include multi-line text.
This isn't the case so much any more with more advanced screen readers, but I
understand that it's still an issue for some
Robert Roberts:
Say you've got data as text. Screen readers and text browsers don't always
handle pre tags well. Designate row and column headers using the "th" tag. You
can specify the look of "th" headers with CSS.
Robert Roberts:
6. Associate the data cells with the appropriate headers. On our html chat
resources, go to http://www.seotoolbox.com/htmlchat/tables_data.html
Robert Roberts: Take a look at the Simple Data Table - The code is right
below it. This brings up an interesting question...
Robert
Roberts: The simple data table presents us with a decision about
linearization and points out that one must make a judgment call about how to
organize the table. Should Name Age Birthday be rows instead of columns?
Robert Roberts: I don't have an answer. Just pointing out that
every table we deal with must be analyzed for how we present the information.
As it stands now the table, as is, should work OK, but then I've never
experienced a screen reader.
Robert Roberts: Notice that a
simple table uses a scope attribute for table headers "th"
Robert
Roberts: th scope = row, or th scope = col
Robert Roberts:
But when the table gets more complicated, the scope attribute isn't sufficient
because there is no way to associate multiple columns/rows with the information
in a given data cell.
Robert Roberts: Think of a bus schedule
for instance. If the first column contains the names of the bus lines, and the
other column contains where the bus stops and what time, how is a person with a
screen reader to know what bus stops where when?
Robert
Roberts: We, of course, can quickly visually scan the table and see for
ourselves. So we associate headers with the row/column information by assigning
an id to each header.
Robert Roberts: On the resources page is
an example of a poorly-constructed table followed by a corrected version, plus
the code for the corrected version.
Robert Roberts: As you look
at the corrected code, you will see the header id attributes. Then the data
cells contain what I call "pointer" information which tells the user what the
information relates to.
Robert Roberts: That link again:
http://www.seotoolbox.com/htmlchat/tables_data.html
Robert
Roberts: OK, some people assign what I think are mysterious id names to
headers. Things like c1, c2, r4, 43 instead of actual humanly-readable names,
so that the screen reader associates row/column info with what looks like: td
headers="c3 r9"
Robert Roberts: To me, this is as mysterious as
written chess moves and I have a hard time remembering what "c3" or "r9" is
supposed to be about. Using actual meaningful words like td headers="browne
spent" is helpful to me, and I hope would be helpful to screen reader users,
but again, I have never used a screen reader.
Robert Roberts:
Before we get much farther, there are some useful tools to mention. One of our
other moderators, Nancy, brought this one to my attention. It's an online
interactive accessible table builder:
http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp
Robert Roberts: The entire site, accessify.com , by the way,
has some really helpful information. We can all thank Nancy for discovering it
for us.
Robert Roberts: The table-building tool won't do
everything for you, but it sure helps get the important stuff into place
Robert Roberts: Another useful resource:
http://www.jimthatcher.com/webcourse9.htm
Robert Roberts: Mr.
Thatcher is an accessibility expert, and in fact helped invent the first screen
reader. Then there is an online accessibility validator called "The Wave":
http://www.temple.edu/instituteondisabilities/piat/wave/
Robert
Roberts: For those of you who may be using Dreamweaver, here is a helpful
tutorial: www.macromedia.com/macromedia/accessibility/mx/dw/tables.html
Robert Roberts: evolt.org has a bunch of info:
http://www.evolt.org/article/Building_accessible_tables/4090/42090/
Robert Roberts: Here is a good tutorial as well, from webaim.org:
http://www.webaim.org/howto/tables/
Robert Roberts: Building
accessible tables isn't easy at first because we aren't accustomed to it, but
once you've built a couple of small-medium data tables, and gone through the
process, it becomes pretty clear
Robert Roberts: Don't be
surprised if you have to go into the code to edit portions of your data table.
I don't use WYSIWYG editors, but many people do
Robert Roberts:
We have time for some questions
Prplspud: Hi Robert, it's
Nancy. Do you have any comments about database driven tables?
Robert Roberts: I know! Hi Nancy - thanks again for that link. Database
driven tables is a bugaboo, I guess, because it would depend on what
application is creating them - asp, php and whether or not the application is
writing to a template that you might be able to edit or modify. This seems like
yet another can of worms.
Prplspud: If I was going to learn
databases, would one be better off to start learning asp or php?
Robert Roberts: I couldn't say because I've never used asp, just php. I
really really like php. Asp is Microsoft-based, php issource. You can use
php with MySQL on a windows platform, and I think current NT-based servers now
support php. My experience is with unix: FreeBSD, Linux - mostly FreeBSD.
Robert Roberts: I know that's not very helpful. Let me put it
this way about php: I'm NOT a programmer by nature; I'm a graphic artist and
designer. But it didn't take very long to start getting the hang of php. There
are some really good books out there. By now, I'd say I have an intermediate
set of php skills.
Robert Roberts: There are lots and lots of
free scripts, like from hotscripts.com that you can get and adapt to your
purposes. Be aware, though, that your web host must support php, not all of
them do.
Prplspud: OK, thanks.
Robert Roberts:
Well ok, I guess that about winds things up. Next month: accessible forms -
yippee! You can feel free to email me if you have a question I can help you
with: info
Robert Roberts: The resources links I
pointed to today are all listed on the html chat resources page for data
tables. Thanks everyone. Bye.
Back to Chat
Index
Enroll in a Search
Engine Marketing Training Program
|