Provide alternative representations of all non-text information so
that a page may be perceived and used without being seen and without being
heard.
Each visual element should have a textual alternative that represents the function of the visual element. Aim for a functional label based on the context in which it is used rather than a visual description. For example, if an image of a magnifying glass is used as a search button, the alt-text would be "Search." A good test to determine if alternative text is useful is to imagine reading the document aloud over the telephone. What would you say upon encountering this image to make the page comprehensible to the listener?
The "alt" attribute is mandatory for the AREA and IMG elements. It should also be used for buttons used as submit buttons on forms (INPUT and BUTTON elements).
Providing alternative text for:
Use the "alt" attribute of the IMG element.
Example: <IMG src="magnifyingglass.gif" alt="Search">.Supported by: Netscape 1.0, 2.0, 3.0, & 4.0, MS IE 1.0, 2.0, 3.0, & 4.0, Lynx 1 & 2, Opera, etc. etc. ???. (BrowserCaps results)
However, the recommendations for alt-text vary depending on how the graphic is used (decoration, button, bullet, illustration, etc.). Please see Appendix B - Alt-text authoring guidelines for more information.
There are three options to choose from to attach alternative text to the
APPLET element. Notice that the third option is supported on the
largest number of browsers.
| Option 1 - "alt" | NC3 | NC4 | IE3 | IE4 | L2 | O2 | ??? | |||||
| Option 2 - content | NC1 | NC2 | IE1 | IE2 | L1 | ??? | ||||||
| Option 3 - both "alt" and content | NC1 | NC2 | NC3 | NC4 | IE1 | IE2 | IE3 | IE4 | L1 | L2 | O2 | ??? |
Option1 - Use the "alt" attribute of the APPLET element. Note. The APPLET element is deprecated in HTML 4.0, see OBJECT below.
Example:<APPLET code="Duke.class" width="50" height="50"Supported by: Netscape 3.0 & 4.0, MS IE 3.0 & 4.0, Lynx 2.x, Opera, etc. etc.???
alt="Duke waving (Java applet).">
</APPLET>
Option 2 - Use the content of the APPLET element. Note. The APPLET element is deprecated in HTML 4.0, see OBJECT below.
Example:<APPLET code="Duke.class" width="50" height="50">Supported by: Netscape 1.0 & 2.0, MS IE 1.0 & 2.0, Lynx 1.x, Opera, etc. etc. ???
Duke waving (Java applet).
</APPLET>
Option 3 - Use both the content and the "alt" attribute of the APPLET element. Note. The APPLET element is deprecated in HTML 4.0, see OBJECT below.
Example:<APPLET code="Duke.class" width="50" height="50"Supported by: Netscape 1.0, 2.0, 3.0, & 4.0, MS IE 1.0, 2.0, 3.0, & 4.0, Lynx 1 & 2, Opera, etc. etc. ???
alt="Duke waving (Java applet).">
Duke waving (Java applet).
</APPLET>
*** The rest of this section has not been cleaned up yet and is mostly notes. PLEASE ADVANCE TO THE NEXT SECTION, B. DISPLAY INDEPENDENCE.***
See keyboard operation.
Specify alternative text within the "title" attribute or within the body of the OBJECT element.
Example:<OBJECT classid="Duke.class" width="50" height="50" title="Java applet: Duke waving."> </OBJECT>
Supported by: None as of June 1998.
Text can be provided in the body of the OBJECT element.
Example:<OBJECT data="magnifyingglass.gif" type="image/gif">Search</OBJECT>
Supported by: None as of June 1998.
Alternative text (see strategy 2.1 above) is usually short and defines the basic purpose of a graphic element. To describe an image, script, applet, or frame in more detail, supply a longer description with one of the following mechanisms:
Do not include an image directly in a frame -- put it in a separate
document.
[New] Otherwise, if the frame contents change,
the frame title -- the only alternative text available in this case --
will no longer make sense. Including the image in its own file allows
authors to specify alt-text with the IMG or OBJECT
elements.
???also discuss refresh. META element w/http-equiv="refresh"
and the content attribute defines a delay time and an URL. The
syntax is valid, but the spec. does not require ua's to support it.
Avoid moving, blinking, or scrolling
text.
[Interim] Authors should avoid the BLINK
and MARQUEE elements. First of all, these elements are not part
of HTML 4.0 (they are proprietary extensions and should be avoided.
See item 1). Second, blinking and moving text is either read
incorrectly or not at all by screen readers, can adversely affect people
with cognitive disabilities, and is often annoying to people in general
(see Jared Spool's book, "Web Site Usability"). Authors should
use style sheets to draw attention to text in other ways, such as
different fonts, sizes, or colors.
[New] Use animated
gifs or the style sheet blink property to create moving or blinking text
whose movement can be suspended by the browser for people that have
trouble with it.
Avoid ASCII art and non-letter characters within words.
<!-- <STYLE ...> .ascii-art-marker { display:none } </STYLE>
-->
<SPAN class="ascii-art-marker>ASCII art (refer
to the figure caption that follows)</SPAN>
<PRE
class="graphic">
audio
|---------|
video
|---------......-----------|
</PRE>
<P>Figure 6.1: Effect of a delay on playout
schedule for different settings of the
sync attribute.
<A href="long.html" class="d-link">D</A></P>
Enable the document to be presented in a variety of media types with a variety of output devices.
Structural elements enforce consistency in documents and supply information to other tools (e.g., indexing tools, search engines, programs that extract tables to databases, navigation tools that use header elements, and automatic translation software that translates text from one language into another.
<DIV class="navigation-bar"> <HR title="Navigation bar"> [ <A rel="Next" href="next.html">Next page</A> | <A rel="Previous" href="previous.html">Previous page</A> | <A rel="First" href="first.html">First page</A>] </DIV>
Structural elements include: ABBR, ACRONYM, BLOCKQUOTE, CITE,
CODE, DIV, DFN, EM, DL, H1-6, KBD, LI, OL, P, Q, SAMP, SPAN, STRONG, SUB,
SUP, TABLE, UL, and VAR
Once a majority of users use browsers that support CSS-2, the following style sheet techniques should be used to control layout and presentation.
Until then tables (to control layout) and bit-mapped text (for special text effects) may be used with alternative pages as necessary.
Here we need to put examples and explanations of tables, what to look for, and suggested techniques. We also need to categorize when we need to suggest using an alternative page.
***The rest of the document is notes and is very much under construction.***
Nest headings
properly.
Since some users skim through a document by
navigating its headings, it is important to increment heading levels
correctly (H1 followed by H2, rather than H1 followed by H3). Headings
used for other purposes, such as formatting text in a larger font size,
may disorient users; use style sheets for formatting.
Encode list structure and list items
properly.
The HTML list elements (DL, UL, OL, LI)
should only be used to create lists. Avoid using list elements
for presentation effects such as indentation.
Do not misuse structural elements and
attributes for purposes of layout.
For example, do not use
the BLOCKQUOTE element to indent a paragraph that is not a
quotation; use style sheets. Do not use PRE to create a tabular
layout of text; use tables.
If, after best efforts, any page is still not accessible, provide a link to an alternative page that is accessible, has equivalent information, and is maintained with the same frequency as the inaccessible page. Alternative pages are not a recommended practice because maintenance costs increase the likelihood that the alternative pages will become outdated. If alternative pages are created they must be updated as frequently as the main pages and provide equivalent information.
Methods for linking to alternative pages:
<HEAD> <TITLE>Welcome to the Virtual Mall!</TITLE> <LINK title="Text-only version" rel="alternate" href="text_only.html" media="aural, braille, tty"> </HEAD>
Ensure that pages are readable
and usable without frames.
Authors should include a NOFRAMES
element at the end of each FRAMESET. Please refer to the
example in the Central
Reference Document.
<SCRIPT type="text/tcl"> ...some Tcl script to show a billboard of sports scores... </SCRIPT> <NOSCRIPT> <P>Results from yesterday's games: Bulls 91, Sonics 80 <A href="bullsonic.html">Bulls v. Sonics game recap</A> ...more scores... </NOSCRIPT>
<APPLET code="Press.class" width="500"
height="500"
alt="Java applet: how temperature affects pressure.">
As temperature increases the molecules in the balloon...
</APPLET>
Note. The APPLET element is deprecated in HTML 4.0.
<OBJECT classid="java:Press.class" width="500"
height="500"
title="Java applet: how temperature affects pressure.">
As temperature increases the molecules in the balloon...
</OBJECT>
A more complex version takes advantage of the fact the OBJECT elements may be embedded to provide for alternative representations of information:
<!-- First, try the pressure applet --> <OBJECT title="How temperature affects pressure" classid="java:Press.class" width="500" height="500"> <!-- Else, try the MPEG video --> <OBJECT data="pressure.mpeg" type="video/mpeg"> <!-- Else, try the GIF image --> <OBJECT data="Pressure.gif"> <!-- Else render the description and an alternative --> As temperature increases the molecules in the balloon... </OBJECT></OBJECT></OBJECT>
[Required]
Ensure that pages are readable and usable without style
sheets for browsers that do not support them or users who
deactivate them. Since style sheets are a new phenomenon, older browsers
will not support them and it will take a while for new browsers to support
them in a standard way.
[Recommended]
Provide
keyboard shortcuts for links.
The "accesskey"
attribute of the LABEL, A, CAPTION, and LEGEND elements allows
an author to associate a keyboard shortcut with the phrase. In the
following example, if the accesskey is activated doc.html is retrieved by
the browser. <A accesskey="C" href="doc.html">XYZ
company home page</A>
[Recommended]
Furnish keyboard shortcuts for form elements.
[New]
Keyboard shortcuts are assigned with the "accesskey"
attribute. This example assigns "U" as the access key. Typing "U"
gives focus to the label, which gives focus to the control, so that
the user can input text.
<FORM action="submit" method="post"> <LABEL for="user" accesskey="U">user name</label> <INPUT type="text" name="user"> </FORM>
[Recommended]
Specify a logical tab order among form controls.
[New]
The "tabindex" attribute specifies the tabbing
navigation order among form controls. For example:
<INPUT tabindex="1" type="text" name="field1"> <INPUT tabindex="2" type="text" name="field2"> <INPUT tabindex="3" type="submit" name="submit">
[Required]
Ensure that image map information is accessible and
keyboard navigable.
The easiest way to satisfy this
recommendation is to use a client-side image map since browsers that are
not displaying graphics can use "alt" or "title"
attribute values of AREA elements to present a list of links in
place of the image map graphic. Keyboard navigation to areas
within the image map is also possible since the browser knows the
coordinates of the defined areas.
For client-side image maps, there are several solution strategies:
<IMG src="welcome.gif" alt="Image map of areas in the library" usemap="#map1"> <MAP name="map1"> <AREA shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference"> <AREA shape="rect" coords="34,34,100,100" href="media.html" alt="Audio Visual lab"> </MAP>
<OBJECT data="welcome.gif" type="image/gif" usemap="#map1"> There are several areas in the library including <A href="reference.html">Reference</A> and <A href="media.html"> the Audio VisualLab</A>. More text can follow or precede. <MAP name="map1"> <AREA shape="rect" coords="0,0,30,30" href="ref.html" alt="Reference"> <AREA shape="rect" coords="34,34,100,100" href="media.html" alt="Audio Visual Lab"> </MAP></OBJECT>
<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> <P>Navigate the site: <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> | <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> | <A href="search.html" shape="circle" coords="184,200,60">Search</A> | <A href="top10.html" shape="poly" coords="276,0,373,28,50,50">Top Ten</A> </MAP> </OBJECT>
Note in this example that the MAP element is the content of the OBJECT element so that the alternative links will only be displayed if the image map (navbar1.gif) is not.
When a server-side image map must be used, authors should provide an alternative list of image map choices. If an alternative list of links follows the image map, authors should indicate with the "alt" attribute of the IMG element the existence and location of the alternative list. A more straightforward solution, although newer and less backwards compatible, is to include the alternative links within the body of an OBJECT element (see examples below). One final possibility is to create an alternative page that is accessible.
[Recommended]
Place non-link, printable characters (surrounded by spaces)
between links that occur consecutively to keep separate links from
being read as one by screen readers (e.g., " | ").
[Interim]
Please consult the example provided in guideline 5.3.
[Recommended]
[Interim]
Include default, place-holding characters in edit boxes and text areas.
[Recommended]
Provide titles for horizontal rules, acronyms, and abbreviations.
For example:
<HR title="new section">
<ABBR title="Idaho">ID</ABBR>
<ACRONYM
title="World Wide Web">WWW</ACRONYM>
[Required]
Give each frame a title.
[New] People accessing
the page aurally will more easily keep track of how many frames exist and
which is the current one. For example:
<FRAMESET cols="10%,90%" title="Our library of electronic documents"> <FRAME src="nav.html" title="Navigation bar"> <FRAME src="doc.html" title="Documents"> <NOFRAMES><A href="lib.html" title="library link"> Select to go to the electronic library</A> </NOFRAMES> </FRAMESET>
[Recommended]
Provide descriptive titles for images used as links.
Use the "title" attribute of the A
element to provide more information about images used as links. For
example:
<A href="home.html" title="Search the whole XYZ company site"> <IMG src="magnifyingglass.gif" alt="Search"> </A>
[Recommended]
Provide abbreviations for lengthy row or column labels.
[New]
Row and column header abbreviations (the "abbr"
attribute) should be short but meaningful. This will be particularly
useful for future speaking technologies that can read row and column
labels for each cell. Abbreviations cut down on repetition and
reading time. Please refer to the examples in the
appendix.
[Recommended]
Group related controls semantically and label each group.
[New]
The new FIELDSET element groups form controls while the LEGEND
element labels each group. Please see the example in guideline 10.2.
[Recommended]
For
long lists of selections, group items into a hierarchy.
[New]
In the near future, browsers will display grouped lists with expanding and
collapsing levels of detail. To group items, use the OPTGROUP
element (with the SELECT element). For example:
<FORM action="http://somesite.com/prog/someprog" method="post"> <P><SELECT name="ComOS"> <OPTGROUP label="Comm Servers"> <OPTGROUP label="PortMaster 3"> <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1 <OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7 <OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5 </OPTGROUP> <OPTGROUP label="PortMaster 2"> <OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7 <OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5 </OPTGROUP> </OPTGROUP> <OPTGROUP label="Routers"> <OPTGROUP label="IRX"> <OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R <OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R </OPTGROUP> </OPTGROUP> </SELECT> </FORM>
[Required]
Associate labels with their form controls.
[New]
This can be achieved using the "for" attribute
of the LABEL element. For example:
<FORM action="http://somesite.com/adduser" method="post"> <FIELDSET> <LEGEND>Personal information</LEGEND> <LABEL for="firstname">First name:</LABEL> <INPUT type="text" id="firstname" tabindex="1"> <LABEL for="lastname">Last name:</LABEL> <INPUT type="text" id="lastname" tabindex="2"> ...more personal information... </FIELDSET> <FIELDSET> <LEGEND>Medical History</LEGEND> ...medical history information... </FIELDSET> </FORM>
Include discussion about the algorithm included in the HTML 4.0 spec.
11.4.3 Algorithm to find heading information In the absence of header information from either the scope or headers attribute, user agents may construct header information according to the following algorithm. The goal of the algorithm is to find an ordered list of headers. (In the following description of the algorithm the table directionality is assumed to be left-to-right.) First, search left from the cell's position to find row header cells. Then search upwards to find column header cells. The search in a given direction stops when the edge of the table is reached or when a data cell is found after a header cell. Row headers are inserted into the list in the order they appear in the table. For left-to-right tables, headers are inserted from left to right. Column headers are inserted after row headers, in the order they appear in the table, from top to bottom. If a header cell has the headers attribute set, then the headers referenced by this attribute are inserted into the list and the search stops for the current direction. TD cells that set the axis attribute are also treated as header cells. from http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.4.3
[New] Summaries of table structure and purpose (the "summary" attribute of the TABLE element) are especially useful for non-visual readers. Please refer to the examples in the appendix.
Future browsers and assistive technologies will be able to automatically
translate tables into linear sequences if tables are labeled
appropriately.
[New] One way of labeling cells is with the "headers"
and "scope" attributes. Please refer to the first two
table examples in the appendix.
Note.
"Complex" refers to tables that are generally larger than
three columns by three rows and that can not be automatically translated
into a linear sequence. A linear sequence is usually generated by
reading a row left to right and proceeding each cell with the label of its
column.
[New] Future browsers will allow users to select data from a
table by filtering on categories. Please refer to the third example
(the "axis" attribute) in the appendix.
[Recommended]
Create link phrases that make sense when read out of context, but that are
not too verbose.
Users who are blind often jump from link
to link when skimming a page or looking for information. When they do
this, only the text of the link ("link text") is read.
Therefore, it is important that link text make sense when read without
surrounding text. For example, authors should not use "click
here" as link text several times on the same page; this requires a
user browsing the page with a screen reader to step through each link and
read the surrounding text to determine the purpose of the link. Instead,
link text should carry sufficient information, as in "download this
document in ASCII text," "view the full version in HTML,"
or "for the text version select this link."
[Required]
Use elements and attributes that comply with an HTML 4.0 Document Type
Definition (DTD) and CSS-1.
The W3C offers an HTML validation
service at http://validator.w3.org/
that can be used to determine if a site complies with one of the HTML
4.0 Document Type Definitions (there are three: strict, transitional, and
frameset - see the validation service for more information).
It is recommended, but not currently required, that pages comply
with the strict definition.
Following the general site design guidelines will further improve accessibility.
<HEAD><TITLE>Reference manual -- Chapter 1</TITLE> <LINK rel="Start" title="The first page of the manual" type="text/html" href="http://someplace.com/manual/start.html"> <LINK rel="Next" title="Chapter 2" type="text/html" href="http://someplace.com/manual/ch2.html"> </HEAD>
Good Web Site Design Practices -
Chapter 25 in the Central Reference Document
<TABLE border="border" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."> <CAPTION>Cups of coffee consumed by each senator</CAPTION> <TR> <TH id="t1">Name</TH> <TH id="t2">Cups</TH> <TH id="t3" abbr="Type">Type of Coffee</TH> <TH id="t4">Sugar?</TH> <TR> <TD headers="t1">T. Sexton</TD> <TD headers="t2">10</TD> <TD headers="t3">Espresso</TD> <TD headers="t4">No</TD> <TR> <TD headers="t1">J. Dinnen</TD> <TD headers="t2">5</TD> <TD headers="t3">Decaf</TD> <TD headers="t4">Yes</TD> </TABLE>
A speech synthesizer might render this tables as follows:
Caption: Cups of coffee consumed by each senator Summary: This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar. Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes
<TABLE border="border" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."> <CAPTION>Cups of coffee consumed by each senator</CAPTION> <TR> <TH scope="col">Name</TH> <TH scope="col">Cups</TH> <TH scope="col" abbr="Type">Type of Coffee</TH> <TH scope="col">Sugar?</TH> <TR> <TD>T. Sexton</TD> <TD>10</TD> <TD>Espresso</TD> <TD>No</TD> <TR> <TD>J. Dinnen</TD> <TD>5</TD> <TD>Decaf</TD> <TD>Yes</TD> </TABLE>
<TABLE border="border"> <CAPTION> Travel Expense Report </CAPTION> <TR> <TH></TH> <TH id="a2" axis="expenses">Meals</TH> <TH id="a3" axis="expenses">Hotels</TH> <TH id="a4" axis="expenses">Transport</TH><TD>subtotals</ TD> </TR> <TR> <TH id="a6" axis="location">San Jose</TH> <TH></TH><TH></TH><TH></TH><TD> </TD> </TR> <TR> <TD id="a7" axis="date">25-Aug-97</TD> <TD headers="a6 a7 a2">37.74</TD> <TD headers="a6 a7 a3">112.00</TD> <TD headers="a6 a7 a4">45.00</TD><TD></TD> </TR> <TR> <TD id="a8" axis="date">26-Aug-97</TD> <TD headers="a6 a8 a2">27.28</TD> <TD headers="a6 a8 a3">112.00</TD> <TD headers="a6 a8 a4">45.00</TD><TD></TD> </TR> <TR> <TD>subtotals</TD><TD>65.02</TD><TD>224.00& </TD><TD>90.00</TD><TD>379.02</TD> </TR> <TR> <TH id="a10" axis="location">Seattle</TH> <TH></TH><TH></TH><TH></TH><TD> </TD> </TR> <TR> <TD id="a11" axis="date">27-Aug-97</TD> <TD headers="a10 a11 a2">96.25</TD> <TD headers="a10 a11 a3">109.00</TD> <TD headers="a10 a11 a4">36.00</TD><TD></TD> </TR> <TR> <TD id="a12" axis="date">28-Aug-97</TD> <TD headers="a10 a12 a2">35.00</TD> <TD headers="a10 a12 a3">109.00</TD> <TD headers="a10 a12 a4">36.00</TD><TD></TD> </TR> <TR> <TD>subtotals</TD><TD>131.25</TD><TD>218.00 </TD><TD>72.00</TD><TD>421.25</TD> </TR> <TR> <TH>Totals</TH><TD>196.27</TD><TD>442.00 </TD><TD>162.00</TD><TD>800.27</TD> </TR> </TABLE>
In general, authors should specify alternative text that acts as a replacement for the function of the image and does not describe its visual appearance. Authors should ask themselves this question: if you were reading the document aloud over the telephone, what would you say upon encountering this image to make the page comprehensible to the listener?
There are three attributes of IMG that can be used to provide textual information about an image:
Note. Providing alternative text for images embedded with the OBJECT element is covered in the Images and Image Maps section.
Provide a brief textual equivalent of the image. Providing alt-text is
required, while providing a longer description is recommended.
Example:
<IMG src="sailboats.gif" alt="Sailboats in calm
water" longdesc="sailboatsdesc.html">
Then,
within sailboatsdesc.html:
A picture of ten sailboats docked in calm water at the edge of busy street in a small town.
Since some users may not want to see even a short description of the graphic, keep them as short as possible. In the future, we will make recommendations for the use of style sheets, class values, and XML that will allow users to select types of images they wish to download and view.
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>
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>
Provide the equivalent textual link phrase in the alt-text (i.e.,
if the link were text instead of graphical what would it say).
Example:
<A href="routes.html"><IMG src="topo.html"
alt="Current routes at Boulders Climbing Gym"></A>
For graphics used as section separators (e.g., horizontal rules) provide information about what the graphic represents. In other words, provide an equivalent textual cue as to what the visual reader perceives (Example 1). However, we recommend using the HR element with style sheets and the "title" attribute (Example 2).
Example 1:
<IMG src="redline.gif" "End of Chapter 7 - Visual Displays">
<H1>Chapter 8 - Auditory and Tactile Displays</H1>Example 2:
<STYLE ...><!-- HR.red { color : Red }--></STYLE>
<HR class="red" title="End of Chapter 7 - Visual Displays">
<H1>Chapter 8 - Auditory and Tactile Displays</H1>
If the image is a picture of stylized or colorful text, then the alt-text must be the same as the text in the image. <P>This is an <IMG src="BigRedExample.gif" alt="Example"> of what we mean.</P>
This is true of Drop Caps (large first letter of a paragraph) as well. However, we recommend using style sheets to create the effect, as the following example illustrates.
Example using style sheets to create drop caps:
<STYLE ...><!-- .dropcap { font-size : 120%; font-family : Helvetica } --></STYLE>
<SPAN class="dropcap">O</SPAN>nce upon a time...
Invisible or transparent images are often used to force the layout of a page. Provide "null" (alt="") or "white space" (alt=" ") alt-text, whichever the context requires. Note that the HTML 4.0 specification recommends that attribute values do not contain leading or trailing spaces. It states, "User agents may ignore leading and trailing white space in CDATA attributes values (e.g., " myval " may be interpreted as "myval")." Therefore, empty alt-text (alt=" ") might be ignored.
Example 1: An image is used to create a carefully defined space
between words or graphics. "White space" alt-text is used
to prevent the words from running together when the image is not loaded.
my poem requires a big space<IMG src="10pttab.gif alt=" ">here
Example 2: An image is used to force a graphic to appear in a certain
position
<IMG src="spacer.gif" alt=""><IMG
src="colorfulwheel" alt="The wheel of fortune">
Gregg Vanderheiden, Trace
Research and Development
The original draft of this W3C working document is based on The Unified Web Site Accessibility Guidelines compiled by the Trace R & D Center, University of Wisconsin under funding from the National Institute on Disability and Rehabilitation Research (NIDRR), U.S. Dept. of Education.
For a full list of Contributors to the Unified Guidelines is available at http://trace.wisc.edu/docs/html_guidelines/version7.htm .
We would also like to thank the people listed in the References section
below whose works were used in the compilation of the unified guidelines
on which this document is based.
Tips and Tricks
Tips and Tricks