XHTML & CSS - Creating Accessible Image Buttons

Brian Treese — Tue, 19 Jan 2010 06:55:00 GMT

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!

A Limited Twitter Stream can be a Great Resource for Graphic, Web & UX Designers

Brian Treese — Thu, 14 Jan 2010 03:30:00 GMT

As a designer on the Central Coast you’ve probably found it to be somewhat difficult accessing the kinds of resources available in more urban areas. Well, I’ve found that Twitter can be a phenomenal outlet for inspiration, tips, techniques, free resources and it is available virtually anywhere. Twitter has become an exceptional platform for both giving and receiving the most innovative information surrounding modern design trends and secrets. It’s not really Twitter itself that has become the resource but more the links to external information being shared via Twitter as a communication device.

The key is to find people that are the most influential in whichever field it is that you may be interested in and following only them. By limiting your Twitter stream following to those who surface only the most useful of information, in essence filtering out “clutter,” you make for a more powerful experience.

"The qualities that make Twitter seem insane and half-baked are what make it so powerful" - Jonathan Zittrain, Harvard law professor and Internet expert

It is not always obvious who will be an influential person to follow and who won’t. Sometimes this can be accomplished only through trial and error. One of the greatest things about Twitter is if a person proves to be of limited or no use you may simply opt to un-follow them and look to follow others. Personally, as I come across Websites and design blogs that contain the types of information I’m interested in, I will look for a link to follow them on Twitter. Then I will try following them for a week or two and if I don’t find them to be very useful I will simply stop following them. I tend to keep the number of people I follow minimal, thus keeping myself connected to only the most pertinent of information available.

I’ve included a list of people/organizations below that consistently produce useful content for me:

As designers we have become more empowered than ever before with the addition of this most unique tool to our arsenal, so, happy Tweeting!

Oh, and feel free to follow me if you’d like at twitter.com/brianmtreese

It's Design Time

XHTML & CSS - Creating Accessible Image Buttons

A Limited Twitter Stream can be a Great Resource for Graphic, Web & UX Designers