Accessibility - Part 2
Article ID: KB101565
The first W3C Web Content Accessibility Guideline says:
Guideline 1. Provide equivalent alternatives to auditory and
visual content.
The first checkpoint suggests what this may look like:
Checkpoint 1.1 Provide a text equivalent for every
non-text element (e.g., via "alt", "longdesc", or in element
content). This includes: images, graphical representations of text
(including symbols), image map regions, animations (e.g., animated
GIFs), applets and programmatic objects, ascii art, frames, scripts,
images used as list bullets, spacers, graphical buttons, sounds
(played with or without user interaction), stand-alone audio files,
audio tracks of video, and video. [Priority 1]
In this article, we'll examine what applying this checkpoint to
images looks like.
First -- why?
Visually impaired users can't see images, so you'll want to
communicate the information in a different way. By providing
alternative text, a screen reader can read out this text to the user
so that they can understand the information. Furthermore, this text
is also used in search engines and text-only browsers.
How-to: Alternative Text
In FrontPage, you can provide alternative text for images. If
you right-click on an image and select Image Properties, you can
fill out the "Alternative representation text" field in the General
tab. This text should be meaningful, like "go," "search," or
"diagram of Picture Properties dialog box."
If the image is purely decoration, then type a space. If the
image works as a bullet, you may type "* " as the description.
You will want to do this for all images on your page, even
invisible "spacer" images. In the HTML, you'll notice that an "ALT"
description has been added to the image tag. Your image tag will
look something like:
<IMG BORDER="0" SRC="newsletter/002/accessibility-diagram1.gif"
ALT="diagram of Picture Properties dialog box" WIDTH="200"
HEIGHT="194">
If you're not sure what to put as the alternative text, read your
page out loud from top to bottom. When you hit an image, think of
how you would read it out loud to someone who couldn't see the
screen.
How-to: Long Description
If you have an image that requires a longer description or
explanation, the "longdesc" attribute of a tag allows you to put a
url of a page that has more description. You will have to go into
HTML view to do this. For example:
<IMG BORDER="0" SRC="newsletter/002/accessibility-diagram1.gif"
ALT="diagram of Picture Properties dialog box" LONGDESC="pictureprop.htm"
WIDTH="200" HEIGHT="194">
FrontPage Themes and Accessibility
If you use a Theme applied without Cascading Style
Sheets, you will be unable to meet this checkpoint. When a FrontPage
Theme is applied without CSS, FrontPage builds your bulleted list
within a table with bullet images. These bullet images do not have
"alt" tags (an alternative text description), and there is no way
that you can do anything about it. Applying a theme with Cascading
Style Sheets, on the other hand, allows FrontPage to replace the
bullets with a bullet image without having to use the table method.
If you need your site to meet these checkpoints, we recommend
that you apply the theme with Cascading Style Sheets. However, some
themes are not built with Cascading Style Sheets defined, and may
not display properly in some versions of Netscape. Be sure to test
often, or use a theme that has Cascading Style Sheets defined. (In
PixelMill, filter your search by checking the "CSS" checkbox in the
right search column.)
Next: Accessible Image Maps
Contributors
Corrie Haffly:
Corrie is the author of the Accessibility series, which appeared
in the PixelMill Newsletter. Though you may not know her name,
Corrie has become one of the top experts in the FrontPage Template
industry. You may know her work better under the name John Galt's
Templates. See Corrie's stunning products today!
John Galt's Templates
John Galt's Tools, PixelMill Newsletter, Volume 2 - Issue 6 : 06/01/2002
Back to top
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al0/kb101565.htm
permalink to this article:
http://www.pixelmill.com/support/kb101565.htm
Back to top