Avoid text image buttons

Styling buttons are a nightmare for web developers, thanks to the inconsistent cross-browser and cross-platform handling. So we take the easy way out and cut out the button image from the design mocks, save it in an image, and replace the default button with our new image.

Using images for buttons is nothing new. Accessibility wise, all you really need is some way of specifying a text-equivalent to the image, and you are essentially done.

The two main techniques of using imaged buttons are using the input type of image, or a button element styled with image replacement.

Typically the size of the image button comes directly from the design specification, which means that the text on the button has actually been a design decision, and the page design has taken that into consideration.

The result is a button that cannot be internationalised, for the following reasons:

• translating the button text means creating a new image for each translation
• the size of each image now has to change to accommodate the translated text.

There are two sane approaches to dealing with this situation, and it depends on the willingness of your designers to compromise in favour of international-friendly designs. But both solutions involve reimplementing the button markup, and if there are JavaScript event-handlers registered, there’s a strong possibility that these would need to be updated to take into account the changed markup.

The first solution is to get rid of the button image entirely, and use a proper submit input button. Then use CSS to style the button away from the default set into something closer to the original design, compromising the exacting details of text-shadows, rounded corners.

Designs that require a particular font, with specific kerning and other font metrics are unfit for internationalising websites, unless you can get your designer to guarantee that they will create and supply all the button images you need for every localisation from now on.

The second solution is to get the design team to create a tile-able button background big enough to cater for any reasonable width of text. Then using a sliding doors technique, a button element (or a cleverly marked-up submit button) can be styled to produce an elastic button background. All that’s left is to style the font of the real text as closely as reasonably possible to the original design specification.

By making the actual text back into real text your existing ways of translating text can be used, and localising forms becomes a matter of translations and other unique locale-specific requirements, not laboriously dealing with image manipulation.

Text inside images cause headaches in localising sites. It is far better to spend more time upfront coming up with a reasonable compromise that is based on text being real text, not an image.