Flexible Design
We used a percentage for our basic table layout rather than setting
widths of tables and cells to a fixed amount. Often users with low
vision select enlarged text and have a large monitor. This flexible
layout allows the page to grow to accomodate users who select an
enlarged text size on their browsers and have large monitors, yet
also work well with smaller monitors using normal text settings.
Be aware of the way your page flexes. Does the design depend on
every pixel staying aligned or can the layout grow and shrink with
the text and monitor size without breaking up unexpectedly. The
MSIE browser version 5 and above has a handy text zoom feature under
VIEW in the tool bar that you can use to test this.
Layout forText Readers
Be aware of the way text readers move through a page. Does your
content flow left to right in a logical fashion? Are your nested
tables making the page overly complex or stacking the content top
to bottom in multiple columns? The best way to understand if your
layout works is to test it in one of the popular screen readers.
JAWS and IBM Home Page Reader demo versions can be downloaded from
their web sites. Also be aware that your page may have a lot of
visual clues to its structure or content heirachy by the nature
of placement, white space and juxtaposition that may be completely
lost to a screen reader. We use a few transparent gifs with alt
tags to "announce" some equivalents to the visual clues.
Use heading, bullet, list and blockquate as they were intended.
HTML Text vs. Images
Whenever an image is used, the text equivalent should be either
in an ALT tag, LONGDESC or D Link. You don't need to include the
phrase "an image". The reader usually does this. The alt
tag should be brief and to the point. The alt tag should make clear
to the visually impaired visitor the purpose of the image on the
page. If its just there to be pretty, "photo of students on
quad" will do. If it is part of the page structure for example,
"Heading - Products". You might even want to apply heading
tags to the image so that the text reader can recognize the structure.
Transparent gifs used as spacers should have alt tags to tell the
text reader to skip them. Use a single space in the alt tag to indicate
a spacer gif or any image you want the reader to skip.
Don't use special characters for graphic like accents. The text
reader will read them as they are defined, such as > as "greater
than", which will be at best distracting and at worst confusing.
Instead use a graphic image with either a blank alt tag or an appropriate
description, like "bullet".
While text images will be read by most screen readers as long as
you supply the text in the alt tag, this will not help the low vision
user who wants to increase the browser text size. The text images
will remain the original size. We use text whenever possible. Style
sheets give us some additional artistic control over text, without
compromising the zoom text feature. (using text instead of images
for text also makes it easier to revise, easier to have dynamic
content, and keeps page weight down.)
Style sheets
And while we are speaking of text and fonts, when you use style
sheets to set text size, make sure you use a relative size attribute,
like percent or ems. If you set your font to pixels, you get great
cross browser and platform control but at the cost of flexibility
for the low vision user (and some MACs and some Netscape browsers
render fonts smaller too!). We used a server side script to detect
the four basic browser and platform combinations and write the appropriate
style sheet to display the best text sizes on each for our design.
Make sure that the site works without the style sheets. Does it
degrade gracefully if styles are not supported? Use HTML tags to
define your styles where ever possible since this helps provides
page structural information to text readers. For instance, a text
reader can jump from heading to heading to provide a user a general
idea of the content. The HTML tags can have fonts and colors assigned
to them in your style sheet.
Colors
Make sure your color choices have good value contract. Many visually
impaired do not see all colors or see colors differently. For instance,
red is often not easily recognized and our campus color is a deep
red. We switched from using red in our background and link color
to more visible colors like navy blue, black and dark green on a
white background.
Don't use color as the only element to determine navigation or
button choices. Make sure your link and visited link colors can
be differentiated to a color impaired viewer. Make sure that you
don't rely on color alone to indicate links. Some sites use the
"decoration: none" style classification to remove the
underline on links for a cleaner look- don't! The underline denoting
links is important to inexperienced users and those with cognitive
impairments.
Skip repetitive navigation
Since we are repeating links to the home page, Quick Links and
Search features at the top of every page, we provided a link at
the very beginning of the pages to skip to the contents. We wanted
our to visible so we used a text link, but you can use a transparent
gif with a link and alt text if you only want it to be obvious to
the screen readers.
No Frames
Frames are sometimes confusing for the sighted user, let alone
for a blind user relying on a reader to get to your information.
Some newer screen readers are able to work with them, but we recommend
not doing it.
JavaScript
Be aware that some screen readers browsers will not be able to
read the JavaScript properly, expecially if using document.write
to create content on the client side. A well formated Application
Server script, like ASP, Cold Fusion, JSP and PHP will create the
proper HTML in the page before it is delivered to the browser. You
will need to test any scripts in the text readers to determine if
they will work as expected.
|
