If you use an image rollover with Javascript, then make sure the ALT tag in the "Off" image is descriptive. For rollovers showing complex concepts, make sure a text description is included. See example below.
If you use rollovers to change text format, consider using CSS rollovers. They generally do not interfere with screen readers, are better for low vision users because they edges remain crisp when the page is zoomed and are usually easier to maintain on the fly. See below for examples of different types of CSS Rollovers.
Rollover links should be distinct from other text even in the "Off" state. Otherwise many users, especially those with older browsers may not realize they are there.
Below is a rollover inserted by Javascript comparing a color versus a black and white version of the same image. (Note: The rollover may not be visible in all browsers, especially Netscape 4.7).
To make it more accessible, the following should be added:
The ALT tag describes the two images - in this case alt="Color
Chart versus Grayscale Chart". If this were a
link, the ALT tag would describe the location of the link.
If the comparison of the two images were critical, then a link to a longer text description describing the change would be needed. For example:
This rollover shows a color bar chart with red, blue and green contrast with a grayscale version in which the contrast is almost muted. It is an example of how color coding alone can be inaccessible.
There are several specifications you can use to create a different type of rollover effects including changes in font color and style, changes in color background and additions of borders to create "buttons". This page will start with examples of font format changes.
Note: These techniques will work in Firefox, Mozilla, Internet Explorer, Safari or Opera, but not in earlier browsers such as Netscape 4.7. It is important to make sure that links are distinctive even in the "off" state.
For global specifications, you would need to create a . css file and write specifications for these classes:
a (all links)
a: hover (links with the mouse cursor over it)
a: visited (visited links)
Here is some code for making all links navy blue (#000066) which change to bright green (#006633) when the mouse passes over it. I've also specified "font-weight:
bold" in order to make the links more visible.
a {color: #000066; font-weight: bold} /*Navy Blue*/
a:hover {color: #006633; font-weight: bold} /*Green*/
a:visited {color: #9900FF; font-weight: bold} /* Purple */
<a href="#">Green Link </a>
The key to the rollover is in the specification in the a:hover class. Because it has been specified as a different color than the a (anchor) class, all links for a document linked to that style sheet will change to green when the mouse rolls over it. The style is coded once, but all links become rollovers automatically.
With style sheets, you can also add specifications to change the background color of a link. In this case, this is done by doing nothing to a, but making the a:hover tag change it's color to white and it's background-color to gray (#333333). A left-padding and a right-padding of 3 pixels have been added to make the item more "button" like.
a {padding-left: 3px, padding-right: 3px}
/* You need to specify padding in order to keep the text in the same position
as in a:hover */
a:hover {color: #white; background-color: #333333
padding-left: 3px, padding-right: 3px }
<a href="#">Background Changing Link </a>
One advantage of stylesheets is that you can create specify different behaviors of the same tag depending on the context. For instance, many sites visually distinguish between two types of links - those embedded in the text and those used for general navigation (e.g. "Home" and "Sitemap"). Links embedded in the text are typically underlined, while those used for navigation may be made to look more "button" like with different background colors and no underlining.
In this first example, I will create a class of navigation links which are bigger, green (#006633) and not underlined. When a mouse rolls over them, an underline will appear and the color will change to black. Links like these might be placed within a colored table layout cell, toolbar or div.
The first step is to create a class of links called "mainnav". This is done by declaring "a.mainnav," then specifying the style classes as before. In this case I need to add a statement "text-decoration:none" in order to block the default underline of most links. To get the underline to appear at a mouseover, a parralel "a:hover.mainnav" class is declared and is specified as "text-decoration: underline." Finally, in order to block any color changes for visited links, a statement a:visited.mainnav is added and given the same values as a.button.
Within the HTML file, all links which are meant to be button like are specified as <a class="mainnav" href="" >. See the example below.
/* .mainnav means the "mainnav" class*/
a.mainnav {font-weight:bold; font-size: 125%; color: #006633
text-decoration:
none }
a:visited.mainnav {font-weight:bold; font-size: 125%; color: #006633
text-decoration:
none }
/* You need to specify identical formats for a.button and a:visited.button
in order to keep appearance the same*/
a:hover.mainnav {color: black; text-decoration:underline}
<a href="#" class="mainnav" >Main Navigation
Link </a >
The trickiest type of link to encode are links which look like buttons. The simplest way to do it is to create a class of link which has one background color for the a and a:visited statements and another for a:hover. Here a class called "button1" has been created which starts out with black, non-underlined text with a pink background (#FFCCFF) and changes to white text on a purple background. As with the second case, a left and right padding of three pixels have been added. See the example below.
/* .button1 means the "button1" class*/
a.button1 {font-weight:bold; font-size: 125%; color: black;
background-color:
#FFCCFF; text-decoration:
none;
padding-left:
3px; padding-right: 3px}
a:visited.button1 {font-weight:bold; font-size: 125%; color: black;
background-color:
#FFCCFF; text-decoration:
none;
padding-left:
3px; padding-right: 3px}
/* You need to specify identical formats for a.button and a:visited.button
in order to keep appearance the same */
a:hover.button1 { color: white;
background-color:
purple; text-decoration:
none;
padding-left:
3px; padding-right: 3px}
<a href="#" class="button1" >Simple Button
Style Link </a >
Changing the background color is still somewhat limited though. Ideally, one would also want to specify borders, and add additional padding at the top and bottom of a link. This is possible with stylesheets, but care must be taken to ensure that the links still appear in earlier browsers.
For this example, I will create a class of links which have a gray background (#CCCCCC), a padding of five pixels and a black, three pixel solid border. When the mouse rolls over it, the link will become black with white text and a white border.
In order to access controls for borders and padding, you must specify that a specific class of links will be treated as a "block", like a P or H1, instead of as a "span". This is done by specifying a region such as a P, here called "navgation" within which a, a:visited and a:hover will behave as "blocks". To declare this, a statment p.navigation a is added and given its features. The browser will interpret these as meaning that any A tag found within a <p class="navigation" > statement will behave as a block. The p.navigation class itself contains specifications for font size, center alignment and a width of 50% of the page. These standardize the appearance of the "button" across the three type of a classes.
The statement for p.navigation a specifies no underlining, bold face and background-color as before. The property display:block will access the additional properties such as padding: 5px and border: 1px solid black. Similar statements for p.navigation a:visited and p.navigation a:hover are needed to complete the effect. See the example below.
p.navigation {font-size: 125%; font-weight: bold; text-align: center;
width:
50%
}
/*p.navigation is the holder unit for the block links. It also specifies larger
bold text*/
p.navigation a {display:block; color: black;
background-color:
#CCCCCC; text-decoration: none;
padding:
5px; border: 3px solid black}
p.navigation a:visited {display:block; color: black;
background-color:
#CCCCCC; text-decoration: none;
padding:
5px; border: 3px solid black}
p.navigation a:hover {display:block; color: white;
background-color:
black; text-decoration: none;
padding:
5px; border: 3px solid white}
<p class="navigation"> <a href="#">Complex
Button Link </a> </p>
Site Menu:
Home Page/Main Menu
| Section 508 Guidelines
| Quick Checklist
| Details by Tag
| Links
| I.T.S. Seminar Page
| Sitemap
©1999-2006 Pennsylvania State University.
This Web page is hosted by (by Teaching and Learning with Technology, a unit of Information Technology Services. Please contact the Webmaster if you have any questions.