Who am I?
by Andy J. Williams
Why Should You Care?
The whole point of
weblogs is to share knowledge, ideas, and some small amount of self promotion
(or exhibitionism, depending on the blog). If you design your weblog so
that a disabled user has a hard time reading your ideas and thoughts you
are losing part of your audience and you are missing an opportunity to
share your ideas with a wider circle. And it's just not fair. Why should
someone have to suffer through your entire navigation menu or the names
of all of your JPG files every time they load a page on your site? Why
not design your site so that they can get right to your content and to
the whole point of your site?
It's Much Easier
Than You Think It Is
Designing a site (or
retrofitting a site) for accessibility is actually quite easy to do. Especially
for weblogs. If you look around, most weblogs have minimal graphics, usually
one longish list of links, and then wide open spaces for just content.
Only a few sites are so overdesigned that the graphics overwhelm the content
but even they can retrofit their sites quite easily. If you are pretty
handy with HTML, I bet you can do what needs to be done in less than 10
minutes. If you are using a system that has canned designs (Blogger and
Manila both provide "themes") then the onus is on the developers
of those themes and you should let your hosts know how you feel. And,
if nothing else, you can make sure that your content, the part you do
control, works out OK. (Note also that at least with Manila, you can select
a theme but then go in and edit the HTML yourself in the Advanced Prefs
section, if you are so inclined.)
The 8 Key Things
to Look For
These days, most web pages use tables as a way to layout the page (rather
than their intended purpose of providing tabular data). These are fine
for accessibility as long as the tables are fairly simple. You need
to think the way an audio or Braille reader thinks row by row. That
is, read your table only row by row (first row across, then second
row across, etc.) and make sure that your page, as read, makes sense.
This page, for example, would read the ALT attribute of my banner graphic
(or, if it isn't set, the name of the graphic file), then my navigation
column (all one big cell) and then my page content (what you are reading
now). Some people have much more complicated tables and things can suddenly
get read out of order if they're doing weird things with their tables.
If your table makes sense when you think like this, great. If not, you
should consider changing how it is set up. There are numerous tags or
attributes of tags which also help define tables to help out including
TBODY, CAPTION and so forth. Check the official
description of HTML 4 at the W3C website.
- Use ALT for
all graphics: All images displaying content should have something
useful in the ALT attribute to the IMG tag. Any image which is not displaying
content (separator lines, decorations, etc.) should have the ALT attribute
set as ALT="". This latter case makes audio and Braille readers
completely ignore the graphic which is fine for dividing lines (why
would someone with an audio reader care that you have a line there?).
Other forms of multimedia often support the ALT attribute too and it
should be used in those contexts as well.
- Navigation Skipping:
As we saw in #1, audio and Braille readers go row by row. As a result,
anyone viewing this page with one of those readers has to sit through
my entire navigation list each time they view a page. Granted, on my
site it's only a long list on my actual weblog and shorter on all the
other surrounding pages but that's just because I got lazy and didn't
feel like updating my links on all pages (nor did I feel like setting
up include files or templates, etc.) But my main weblog page is the
critical piece and it's deeply annoying to have to sit through that
list every single time a page is loaded. So, a common technique is to
provide an invisible to all but audio, braille, and text readers, a
way to skip the navigation entirely. The basic idea is to do the following:
<A HREF="#skipnav"><FONT COLOR="[your background
color"]>Click here to skip navigation</FONT></A>
[Your navigation links all go here]
<A NAME="skipnav"> </A>
Alternatively, you can also use
<A HREF="#skipnav"><IMG SRC="invisiblepixel.gif"
HEIGHT="1" WIDTH="1" ALT="Click here to skip
[Your navigation links all go here]
<A NAME="skipnav"> </A>
In either case, an audio, Braille, or text reader will find and read
the text even though it is invisible in standard browsers, and allow
the user to click the link and skip past your navigation links and thus
not have view them every single time.
handling: Many blogging tools allow for a way to provide a link
at the start or end of a blog entry which is a permanent URL so that
people can link to your blog entries and find them any time in the future
(the links are never to your main blog page which usually only carries
the most recent entries but instead to the location in the archives
that entry lives). Usually people use a simple graphic or a symbol such
as # or ¶. The former case, an image, is fine because you can set
the ALT attribute of the IMG tag in your template to something like
"Permanent link to this entry". The latter case is trickier
because the audio and Braille readers will likely report the symbol
("pound" or "paragraph" in my examples above) which
is meaningless. Granted, this isn't that big a deal since it's fairly
common and pepople will likely figure it out. If this concerns you,
you can always put a note on your page indicating that "¶
denotes a permanent link to a given entry" or you can rely on people
figuring it out on their own. Me? I will probably design a small graphic
and use it in place of the ¶'s I have there now.
- Style Sheets:
The Web Access Initiative recommends in the Web Content Accessibility
Guidelines (a must read if you care about accessibility) that you do
use style sheets and that you use external ones at that. The reasons
are as follows:
- Putting all
of your style information in an external files makes it very
easy for a visitor to define their own style sheet to view your
page. What? (you say) Why would I want them to do that? (you say).
Well, if you have a visually impaired user who cannot handle your
font choices or sizes or colors, this allows them to set their own.
And by using a style sheet, they can simply use their own on their
system for your site to make it look the way that best works for
them. It's quick, clean, and convenient.
- When you embed
the style information into the HTML document you make (a) not possible
or at least much more difficult. And when you declien to
use style sheets altogether, you also make the above impossible.
- Use of color:There
are three issues with color. The first is people who suffer from color
blindness for whom green text on a red background (for example) just
won't work. Both look vaguely brown to them and are illegible. The second
are people with low vision for whom colors that do not contrast enough
(say dark blue text on a slate blue background) make a page illegible.
The third is any time that you rely on color alone as a way of
conveying something important. One example might be having different
sections of your site be color coded. That's fine as long as you have
that information in text somewhere too (section headings, etc.) If you
use color and color alone to convey crucial information, people using
black and white or audio/Braille miss this entirely. This is why links
are both blue and underlined (by default). Also, I personally hate it
when people style their links to always be underlined and when
they style them to never be underlined. This should always be
something the user sets for themslves in their browser. I hate underlined
links and turn them off in my browser. When I get to a site that has
them turned on for me, I get very angry and stamp around and say mean
things about them. If you style your links to never be underlined then
you are using color alone to denote something important and breaking
the color rule.
most assistive technology (a fancy term for the audio and Braille readers
using it for fancy rollovers, more power to you (just set your ALT attributes
to indicate textually both states of the graphic if it is important,
for a good example, check out the ALT on the rollover graphic on DisabilityDirect.gov).
that the information may not be visible to users of assistive technology.
If you use audio clips or video clips be aware that some users cannot
view these. A hearing impaired person cannot listen to an audio clip
nor can a visually impaired person watch a video. Common techniques
for audio clips is to provide a text transcript as an optional link
when the clip is presented so the hearing impaired can go read the transcript.
With video, captioning either within the clip or as a separate text
transcript is also common (and some go even further and provide not
just the dialogue but a description of the other non-dialogue images
in the video).
more to accessibility than what I describe above but these 8 elements
cover the most common violations and mistakes people make. I highly recommend
that people read the WCAG (see links below) and educate themselves. Designing
websites for accessibility is always a good idea. Assuming that all of
your readers are able to see and hear is a bad assumption and simply unfair.
Links to other Resources
Web Access Initiative (WAI): These are the folks who are researching
accessibility and drafting the guidelines for accessible site design.
WAI's Web Content Accessibility Guidelines (WCAG): These are the official
standards for designing accessible websites.
Bobby: Bobby is a tool which, given a URL, analyzes a page and reports
back to you thinks you should fix or watch for. It's a great way to find
common problems in your page quickly.
508: Section 508 is the newly adopted (went into effect 21 June 2001)
standards for any technology in the Federal Government either for internal
use or for citizen use. It is simpler than the WCAG but is an actual federal
standard which must be met by anyone doing work for the government.
This website is the central clearinghouse for all information for disabled
Americans. (Shameless self-promotion: I designed the look/feel and the
company I work for currently did the back end technology). Note, much
of the information planned for this site is not yet there. In the coming
months it's going to grow quickly. Take at look at the HTML for the site.
It's fully 508 compliant and also mostly compliant with the WCAG as well.
The skipnav trick is in there as well as a number of others.
©2001 Andy J. Williams Affleck.