Re: ALT test balloon

We have been reminded (in the GL group) that client-side image maps are not
backwards compatible and that text-links are a good idea for them also.
However, we haven't yet adjusted the guidelines to reflect this since we
are working to determine a "least common denominator" (if possible.  we are
synthesizing as much browser usage data for this year as possible to get a
feel for which versions of browsers are still in use. if you have data to
contribute to this, please contact me.  we are targeting sites related to
disability access and universal design).

The recommendations for images used as bullets have changed since the 0414
release.  The most recent text is included after this paragraph.  From what
I've gathered, this is satisfactory to the group, but we'll see what
happens when we actually get it out there <smile>.  This has changed *a
lot* due to tests we performed to determine how browsers handle style sheet
generated bullets.  There are outstanding issues here as well - but that
seems to be the nature of the beast.

Begin included text from most recent version of guidelines.  this is taken
from the "Bullets" section of Appendix B:

Mark up list items correctly.
For unordered lists use style sheets to provide alternative bullets
(Example 1).   If images are not loaded, the browser will draw a default
bullet.  Avoid using images as bullets (Example 2).  However, if this
method is used, the alternative text for the image should be "Item:".  In
the future, aural style sheets may be used to provide audible cues
preceeding bullets.
Example 1: 
<STYLE ...><!-- UL { list-style: url(star.gif) }--></STYLE> 
<UL>
<LI> Audrey</LI>
<LI> Laurie</LI>
<LI> ... </LI>
</UL>

Example 2:  (Deprecated)
<DL> 
<DD><IMG src="star.gif" alt="Item:">Audrey
<DD><IMG src="star.gif" alt="Item:">Laurie
<DD> 
</DL>

Avoid lists where bullets provide additional information. However, if used,
provide the meaning of the bullet as a short phrase in the alternative text
(Example 2).  Provide a label before or after the list item phrase (Example
1) to ensure everyone gets the message while the bullet provides additional
distinction between old and new items. This example also shows the use of
style sheets to create stylized text instead of using bitmap text.
Example 1:
<STYLE ...><!-- .newtxt { font-weight : bold; color : red;  background :
yellow }
                            .newbullet {list-style : url(yellow.gif)
}--></STYLE>
<UL>
<LI class="newbullet">Roth IRA <SPAN class="newtxt">New</SPAN></LI> 
<LI>401 K</LI>
<LI> ... </LI>
</UL>

Example 2: (Deprecated)
<DL>
<DD><IMG src="red.gif" alt="New:">Roth IRA</DD> 
<DD><IMG src="yellow.gif" alt="Old:">401 K</DD>
<DD> ... </DD>
</DL>

End included text.

--

wendy chisholm
human factors engineer
trace research and development center
university of wisconsin - madison, USA

Received on Thursday, 21 May 1998 11:12:03 UTC