Education for a Digital World Advice, Guidelines and Effective Practice from Around Globe, 2008a

11 – Accessibility and Universal Design
TABLE HEADERS
Every table should have clearly labelled table headers.
Often developers have done this just by colouring the
background of the header cells or making the text bold,
but as we know, this visual information will be lost when
run through a screen reader.
So how can we tell the browser itself where the table
headers are? This can be done with the tag, which
works exactly like the tag except it makes the distinction
that the cell is a header. Plus, you can still style
the tag using CSS to make the headers look however
you want.
CAPTION AND SUMMARY
The attribute gives all users a quick definition
of the table. The attribute provides more
detail for screen readers.
Schedule for the 99 B-Line
…
SCOPE
The attribute goes into a table header to tell the
browser which header is associated with a given row or
column. This helps remove ambiguity and allows the
screen reader to provide the user more information
about the given table. Two of the options are
scope=“row” or scope=“col”.
Table 11.2. Student graduation data
Graduation year GPA
Bob Smith 2002 3.4
Sara Miller 2004 3.8
This would be written as follows:
Table 1: Student graduation data
Graduation year
GPA
Bob Smith
2002
3.4
Sara Miller
2004
3.8
COMPLEX TABLES
Tables with multiple layers of headers and categories can
become quite complicated. XHTML does allow for further
description of complex tables, including grouping
sets of rows and associating cells with headings. These
ideas may be of interest if you have many data tables.
Here are some resources for complex tables:
• http://www.usability.com.au/resources/tables.cfm
• http://jimthatcher.com/webcourse9.htm.
ACCESSIBILITY FEATURES
Most of the changes we have talked about will improve
your site’s accessibility without changing its functionality
in any way. Now we are going to discuss a few things
you can add to your site that will be of extra benefit to
disabled users.
SKIP TO CONTENT
While many experienced screen reader users listen to
websites at very high speeds, there is still no audio
equivalent to skimming the page. Sighted users can easily
ignore any part of a website that is of no interest to them,
or something they have seen before, such as the navigation.
One feature that will improve your website’s usability
is a skip to content option. This is a link, coded to appear
invisible to sighted users, that screen reader users
can click to skip any navigation menus that they have
already encountered and don’t need right now.
There are three steps to creating a skip navigation
option.
(1) Add an anchor link just before your main content
starts:
(2) Add a new class in your CSS:
Education for a Digital World 165