|
This guide is derived from the book Understanding Accessibility, Published by HiSoftware Publishing... The Entire book can be viewed online in accessible HTML Help format.
Common but Flawed Practices
Questions and Answers
- When should I address alternative text?
- In my organization we submit content to a graphics designer and they provide an image, I cannot always adequately articulate what the designer meant in alt text what do you recommend?
- My image is transparent and cannot be seen, it is used merely for spacing of content as a design tool. Do I need alternative text?
- My image cannot be described briefly. Should I use alternative text greater then 80 characters to describe my image?
Common but FLAWED practices
The following practices should not be followed, as they do the exact opposite of
the desired result for using alt text with images.
1.
Marketing Play
Many developers will use the alt text properties of images to enter marketing
keywords about their Web site rather than to describe the image or its purpose.
This is accomplished by entering keywords versus descriptive text. Example:
there is an image of a company logo, the alt text should read alt=”My Company
Logo” instead the alternative text says alt=”Keyword 1, Keyword 2, Keyword 3,
Keyword Phrase, Keyword Phrase 2, Keyword Phrase 3…”
This practice should cease and corrections should be made to any text that has
been entered incorrectly.
2. Image Name as Alternative Text
In the past there were many editors, or dynamic generation systems, which input
the image name as alternative text.
Example:
<img border="0" src="images/logo32-gif.gif" alt="logo32-gif.gif ">
This clearly has no meaning to the average person viewing the page. All editors need to be informed on correctly adding accessible alt text. Any incorrect alternative text should also be updated.
This is also a common problem. In order to satisfy accessibility requirements some organizations are rushing to add alternative text without taking the time to make it meaningful.
Example:
There is an image that is a link to a priority service; the image is 100% text and a gradient background.
The image text reads:
Be more competitive with Priority service – Go there now.
The alternative text reads:
Alt=”Priority Service”
Although alternative text is provided in this scenario, it is incorrect, as it
does not clearly represent the significance of the image. It would take minimal
effort to modify the alternative text to accurately represent the image, and its
intended meaning.
Once modified, the alternative text reads:
Alt=” Be more competitive with Priority Service – go there now!”
It is easy to see how this difference in content has conveyed new meaning to the image. The effort associated in altering the text, and making the image “accessible” was minimal. One point to note is that when the accessibility tasks are done correctly originally there is no related cost to creating and maintaining an accessible site.
top
4.
Make it Readable
Many WYSIWYG or HTML Editors provide no default facility for spell checking
element properties like ALT. With this in mind, remember to verify the spelling
of your alternative text. Note: It is difficult to read “car” from “cra”. Make
sure that your text is readable and has correct spelling.
Common Error to Avoid – Text as Image
The use of Alternative text for images can be confusing; especially around an
image that is simply formatted text. It is common for designers to do this to
protect and or control the look of text.
The Problem occurs when the site developer or accessibility expert puts the
design meaning versus the screen meaning for the alt text. In the example below
you have the HiSoftware Publishing Tag line as an image.
Design: HiSoftware Publishing Tag Line
Alt Text: HiSoftware Publishing - Peel open the cover of one of these useful books
So if we misinterpret the alternative text requirement and put the designers meaning versus what the intent of the image to the site visitor is we will not satisfy the requirement.
Follow a Simple rule: If there is text in the image then the same text should be in the alternative text attribute
Good Practices
Although, it is easy to list the bad practices, it is more important to focus on
the simple steps associated with providing accessible alternative text for
images. The book will now introduce some good practices and suggestions on
providing meaningful alternative text for images. Below is a list of recommended
practices:
Spell check your alternative text.
Use punctuation, if applicable.
Match text to the meaning of image.
Always read back the alternative text to ensure it will convey the intended
meaning.
top
Some of the most common questions, in regards to providing accessible
alternative text, are listed below:
1. When should I address alternative text?
The application of alternative text for images should be performed as soon as
they are placed on a page. This will ensure accuracy and efficiency.
top
2. In my organization we submit content to a graphics designer and they provide an
image, I cannot always adequately articulate what the designer meant in alt text
what do you recommend?
This is a good question; it addresses a very important issue for organizations
that use a different design and content group to create the final page.
The obvious answer is to ask the designer why this image and why use it.
But more importantly perhaps the company’s delivery policy of graphics needs to
be changed to have the designer send not only the image but also the base
alternative text.
Secondly, the page designer may add more meaning through the placement of the
image as well as the function it performs as either a link or image map.
3. My image is transparent and cannot be seen, it is used merely for spacing of
content as a design tool. Do I need alternative text?
The best practice is to use alternative text with a value of a space because it
effectively translates its use.
Example:
<img src="images/spacer.gif" alt=" ">
4. My image cannot be described briefly. Should I use alternative text greater then
80 characters to describe my image?
When an image cannot be described briefly, use the longdesc attribute. The
longdesc attribute allows you to indicate the URL that contains a long
description of the image.
This might be useful for images that convey detailed information to the user,
such as schematic diagrams and maps.
Printer Friendly Version...
(c) Copyright 2003-2007 HiSoftware Inc. HiSoftware and CynthiaSays are trademarks of HiSoftware Inc. All other individual names and trademarks are the property of their respective owners. Privacy Statement: HiSoftware's CynthiaSays.Com is currently running on the HiSoftware family of Web Servers and conforms to its privacy policy, for more information click on the privacy policy link at the bottom of this page.
The HiSoftware Cynthia Says Portal complies with WCAG 1.0 Priority 1 Guidelines and Section 508 Standards, view our site accessibility statement
HiSoftware CYNTHIASAYS.COM SERVICE TERMS OF USE | PRIVACY POLICY... | SITE HELP | SITE MAP | ADD Cynthia TO YOUR SITE
