General Accessibility tips
There are many simple things you can do to
make your pages more accessible.
Color
Today's Web sites are often a feast for the eyes. The visual excitement
of it all may, in fact, be part of what draws you to the Web. But, color
is a stumbling block for many who are either color blind, have a black-and-white
monitor, or have non-visual displays. If a user has to be able to see
the color to understand the information, you--and the visitor--have a
problem.
Take this introduction to a calendar as an example:
"The following calendar shows upcoming events. All events in red
are for Web designers. All events in green are for Web developers."
Priority 1 - If the colors red and green mean
nothing to you (either because you can't see them or can't distinguish
between them), then this calendar will be hard to interpret. Wherever
possible, make sure your content is available both with and without color.
Movement
Priority 2 - In general, the WAI discourages features that may disorient
users or cause confusion. Setting an automatic refresh (via the META tag)
can cause problems for all users. It's hard to predict how long it will
take for a page to load or how much time a user may spend reviewing a
certain page. When a page refreshes automatically, the user has to reorient
herself to the page. The problem is compounded if the refresh loads altered
content (à la an automatically refreshing featured product section).
Pop-up windows, which can be hard to close in
addition to disruptive to the flow of information, also are discouraged,
as is the BLINK tag and any feature that may cause the screen to flicker.
Language
Priority 3 - To increase understanding and readability of your content,
you can tag HTML pages with the natural language of the document (for
example, English) and highlight any changes in that language within the
document. To specify the default language for the document, use the LANG
attribute in the HTML tag: <HTML lang="en">. You can then
denote changes in the natural language by using the LANG attribute for
isolated elements: "With characteristic <SPAN lang="fr">je
ne sais quoi</SPAN>, she entered the room."
Acronyms
Priority 2 - We live in an increasingly acronym-driven world, and using
the ACRONYM and ABBR tags with the TITLE attribute can make them easier
to follow, especially the first time an acronym or abbreviation is used:
Fox Mulder works for the <ACRONYM title="Federal
Bureau of Investigation">FBI</ACRONYM>!
Text Links
Priority 3 - As an alternative to elaborate graphical navigation systems,
the string of text links at the bottom of the page has become a de facto
navigation aid. To make sure the links are effectively read by various
kinds of software, separate them with a character such as | or surround
each link in brackets. If all links are strung together with no clear
break, the links may be read as one single, unintelligible link.
TITLE is an important HREF attribute to add to
your pages. Similar to the way ALT text works in images, you can define
the title of a link to provide more information about the link's purpose,
and, when moused over, it will pop up in a balloon in version 4.0 or later
of IE:
<a href="products.asp" TITLE="Find
out more about our products, including Surf-It!, Web-Monster, and other
great browser utilities.">
Priority 2 - Finally, don't succumb to the Click
Here mentality. What does Click Here really tell you about the link? Not
much, especially when it's taken out of context. Those using auditory
software may rely upon a list of links to navigate the page. If the links
are not descriptive when taken out of context, they hinder understanding
and slow down the surfing process. Try to use intuitive and self-explanatory
links instead.
Quotations
Priority 2 - Using BLOCKQUOTE as a way to indent a paragraph is a no-no.
You should, however, be using the tag, and the related Q tag, to help
mark up your quotations. (You can use the Q tag to mark inline quotes,
but it doesn't automatically render quote marks. The W3C suggests using
style sheets to do this.)
DIV
When we look at a page and see a horizontal rule, we tend to interpret
the function of that rule as marking off a section. When that page is
translated by a user agent, however, the demarcation loses effect. To
avoid confusion, use the <DIV> container to organize sections. You
can still use HR, but by using DIV, you can clearly note how the page
is organized.
Link Relationships
You can use the LINK tag to help define how the current page fits into
the site architecture and to associate it with the pages that surround
it in terms of related content. User agents can then take that information
from a series of LINK tags and create links and menus. This isn't a common
tag, and it may not be one you've ever run across. You use the LINK tag
in the HEAD element without a closing tag. It can take a number of link
type.
|
HTML
Articles