images, bullets, and style sheets rewording

Hello,

Based on feedback from the list about the guidelines and test pages, the
section in Appendix B concerning images used as bullets has been reworded
as follows.  


Bullets 
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 the bullet.
Avoid using images within the list (Example 2) since a browser might show a
browser generated bullet as well as the image.  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)
<STYLE ...><!-- UL { list-style: none }--></STYLE>
<UL> 
<LI><IMG src="star.gif" alt="Item:">Audrey</LI>
<LI><IMG src="star.gif" alt="Item:">Laurie</LI>
<LI> ... </LI>
</UL>

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>

Received on Thursday, 14 May 1998 13:52:52 UTC