Like most web developers/designers you have probably encountered a
situation in which you have needed to style a link to appear as a
button with a font not included in the list of common system fonts. And
as you already know, it would be against current Web best practices to
simply create the image for this button with the text as an image and
then omit the text in the HTML of the button itself. For example: if
your were developing a "login" button and adding the text to the actual
image, then it would be proper practice to include the text "login"
inside the <a> HTML tags (<a href="login.aspx">login</a>) as the text of the image is
not accessible to screen readers. The problem that you are likely to
run into during this process is that you then have the HTML text
"login" appearing on a layer on top of your button.
I have attempted to fix this problem in the past by setting the font
size and line-height of the link to 0px with CSS. This worked in a
couple of Web browsers but not all. So, I was forced to develop a
method to add this text so that it will be accessible for screen
readers but not visible to the rest of its visitors. I developed a
system in which I apply my image as a background to the <a> tag
itself and then I include the text inside of a span tag (<a href="login.aspx"><span>login</span></a>).
This allows me to simply use CSS absolute positioning to position the
span so far off of the page that you will never see it while keeping
the text in the structure of the HTML.
The CSS would look some thing like:
- a span {position: absolute; left: -999999px;}
This takes the span inside of the link and places it to the left of its location -999999px.
The reason that I set my image button as a background as opposed to
an inline image is so that I can also easily give the link a hover
style. I normally save my image buttons with the normal, non-hover
state and its altered hover-state as one image with the non-hover state
on top. I will then style the <a> tag to be displayed as a block
type with the a width equal to that of the image and a height equal to
half of that of the image. I then style the link to have background
positioning of top and then upon hover the background positioning will
simply change to bottom.
The CSS generally looks similar to:
- a {display: block; height: 25px; width: 100px; background-image: url(image.gif); background-position: top;}
- a:hover {background-position: bottom;}
There you have it, a simple method for creating accessible image buttons with hover styles, good luck!