Page Content
Synopsis
- 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 the 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.
- 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.
CSS Rollovers: Font Color Change
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: focus (links tabbed to on a keyboard)
a: visited (visited links)
Here is some code for making all links navy blue (#000066) which change to bright green (#006633) and adds an underline when the mouse passes over it. I’ve also specified "font-weight: bold" in order to make the links more visible.
Note: Underlining links embedded in the context is important to help users with color-deficient vision identify links.
Links which turn Green
CSS File Specification
a {color: #000066; font-weight: bold} /*Navy Blue*/
a:hover, a:focus {color: #006633; font-weight: bold; text-decoration:underline} /*Green*/
a:visited {color: #9900FF; font-weight: bold} /* Purple */
HTML Code
<a href="#">Green Link </a>
Sample Link (Changes to green on Hover or Keyboard Focus)
The key to the rollover is in the specification in the a:hover (mouse effect) and b:focus (keyboard effect) classes. Because they have been specified as a different color than the a (anchor) tag, all links for a document linked to that style sheet will change to green when the mouse rolls over it or a person tabs to it on a keyboard. The style is coded once, but all links become rollovers automatically.
Changing the Background Color
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/a:focus tags change its 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.
Links which change background colors
CSS File Specification
a {padding-left: 3px, padding-right: 3px}
/* You need to specify padding in a in order to keep the text in the same position as in a:hover, a:focus */
a:hover, a:focus {color: #white; background-color: #333333
padding-left: 3px, padding-right: 3px }
HTML Code
<a href="#">Background Changing Link </a>
Sample Link
Classes for Special Navigational Links
One advantage of stylesheets is that you can 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 parallel "a:hover.mainnav" and "a:focus.mainnav" classes are declared and 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.
Green Plain Text Button Style Link
CSS File Specification
/* .mainnav means the "mainnav" class*/
a.mainnav {font-weight:bold; font-size: 1.25em; text-decoration:none;}
a:visited.mainnav {font-weight:bold; font-size: 125%; color: #666666;}
/* You need to specify identical font face and size for a.button and a:visited.button in order to keep appearance the same*/
a:hover.mainnav, a:focus.mainnav {color: #063}
HTML Code
<a href="#" class="mainnav" >Main Navigation Link </a >
Sample Link
C.S.S. Button Style Links
The trickiest type of link to encode are links which look like buttons. As with the previous section, you need to create a class of link and specify appearance for a, a:hover, a:focus and a:visited.
The most important step is to add the specification display:block to the A tag. This allows you to specify borders and padding as if the link were contained in a box.
In the example a DIV class called "navigation" has been created and the CSS specifies that links in this DIV are black, non-underlined text with a gray background (#DDDDDD) and changes to white text on a black background. The CSS also adds 5px padding and a 3px margin below the link to control spacing and a border which coordinates with the text.
Rollover Button with Border
CSS File Specification
div.navigation {font-size: 125%; font-weight: bold; text-align: center;
width:50%}
/*div.navigation is the holder unit for the block links. Use this to control the appearance and position of the background for a set of links. */
div.navigation {width:30%; margin: 0 35% 0 35%;}
div.navigation a {display:block; color: black;
background-color: #CCCCCC; text-decoration: none;
padding: 5px; border: 3px solid black; text-align:center;}
div.navigation a:visited {display:block; color: black;
background-color: #CCCCCC; text-decoration: none;
padding: 5px; border: 3px solid black}
div.navigation a:hover, p.navigation a:focus {display:block; color: white;
background-color:black; text-decoration: none;
padding:5px; border: 3px solid white}
HTML Code
<p class="navigation"> <a href="#">Button Link </a> </p>
Sample Link
Image Rollovers
Since CSS can also be used to specify background images, almost all the visual effects found in a JavaScript rollover are available through CSS.
First, you will need to know the pixel dimension of your image. Note that if two images are used, the total dimensions should be the same, even if you add visual padding in one image.
Defining the Styles
There are several approaches one can take, but in this case a class a.surprise is defined to be the same width as the image and it includes a border. The text is centered aligned and some top and bottom has been added.
For a.surprise:hover (and :focus), images are specified in the background-image: url() attribute.
In this case, only the a:hover is specified with a background image. The a just has a color code for its background.
Image Rollover in CSS Button
CSS File Specification
a.surprise {font-size: 1.25em; font-weight: bold; text-align: center;
width: 250px; padding-top:5px; padding-bottom:5px;
color:#000; background-color:#FFF;background-image:none;
text-decoration:none;}
a.surprise:hover, a.surprise:focus {background-image:url(surpriseme.gif);
HTML Code
<div class="surprise"> </div>
Sample Link
This rollover should reveal a colorful spectrum background image.
Rollovers to Compare Images
Sometimes, a rollover is used to allow users to compare two versions of a similar image. If a CSS rollover is being used to compare two images, then a text description must be included.
In the example below, a CSS rollover in an empty link text is used to compare a color and black and white version of a bar chart. The CSS specifies the A tag as having the same dimensions as the two images and a background image for the inactive and for hover/focus states. The link text is then embedded in a SPAN set -5000 pixels offscreen. See the Skip Nav page for more information on hiding text.
Color vs. Black and White Bar Chart
Hover or click in the chart image below to see the black and white version.
Rollover Description
This rollover shows a color bar chart with red, blue and green contrast with a grayscale version in which all three bars appear to be the same shade of gray. It is an example of how color coding alone can be inaccessible.
View the Code
Note that the paragraph above includes the tabindex=”0″ attribute so that keyboard users stop at the explanation before activating the link.
<p tabindex="0">Hover or click in the chart image below to see the black and white version.</p>
<a href="#x" class="chart"><span style="margin-left:-5000px">Rollover Effect</span></a>
View the CSS
a.chart {
display: block;
width: 342px;
height: 302px;
border: 2px solid #000;
background-image: url(https://accessibility.psu.edu/wp-content/uploads/sites/7691/2014/12/chartbarcolor.jpg);
}
a.chart:hover,a.chart:focus {
background-image: url(https://accessibility.psu.edu/wp-content/uploads/sites/7691/2014/12/chartbarbw.gif);
}
Javascript Rollovers
There may a few cases in which it is desirable to create a rollover with Javascript, but there are some guidelines to follow.
- The ALT tag describes the two images – in the chart case above
alt="Color Chart versus Grayscale Chart".If this were a link, the ALT tag would describe the location of the link. - Follow other guidelines for JavaScript and other scripting processes.