Stylish Accessible Buttons

Stylish Accessible Buttons

Buttons that look good and the same in Firefox (PC and Mac), Opera (PC and Mac), Camino, Safari and almost in IE 5, 5.5 and 6 (PC), scale with changes in font size and be accessible, it is possible.

If you don’t want to view source, here is how it is done.

  • Use the button element instead of input type submit
  • Button elements can contain other inline elements such as images and spans
  • Unfortunately button button elements can not contain block elements such as a div
  • So you wrap the button element inside a div, so that you can absolutely position elements inside the button element relative to the surronding div
  • So it goes something like this:
    • div container, postion: relative;
    • button, postion: relative; text-align: centre;
    • image that fills the whole button element, postion: relative; size in ems(I did use three images, start, middle and end, but I was having troubles with FF on PC so I settle for the single image.
    • span with button text position: absolute; and line height equal to image height.
  • IE on PC adds an extra 1.75em of padding to the left and right of a button which can not be removed. So you need to fix that by either moving the absolute position of the span with button text 1.75em, increasing the width of the span 3.5em or by adding a 1.75em margin to the span by using conditional comments and a style sheet. The IE only margin is the only style element that is not in the page.

Take it, play with it and try and break it, and if you do let me know.

Credits

Joe Lewis for reminding me about the button element, Derek Featherstone whose techniques for accessible forms I was using when I got the idea about buttons, and Rang for his Aqua by Rang v2 photoshop action available from http://share.studio.adobe.com which made the buttons fast.

6 Responses to “Stylish Accessible Buttons”

  1. Joe Lewis Says:

    Very slick. I can give that a whirl on one of my current projects!

  2. Nick Cowie » I am doing a presentation Says:

    […] The advantage of doing a presentation on the button element, which are the most popular posts on this blogs, is I have already done most of the research for those posts: Stylish Accessible Buttons, More about the button element and a half written post about how to position buttons. So there is very little work to do, except try and find out how IE7 beta deals with the button element and exactly what extra padding IE5 and IE6 adds to the button element, it is not as I previously stated a fixed amount but appears to be proportional to the width of the button element. Still all of this can be packaged into a 30 minute presentation, as long I only briefly touch on conditional comments for serving an additional stylesheet to IE and how to use absolutely position an element inside a relatively positioned element. […]

  3. Yong Bakos Says:

    The problem with Microsoft’s implementation of the button element is that it friggin doesn’t behave according to standard, and is pretty much useless. It declares its value to be the value of InnerHTML (the label of the button) instead of the value of the value attribute.

    I hope its fixed in IE7.

  4. RE Mogul Says:

    Images are THE ULTIMATE in accessibility — any and every device can display them the way THEIR MAKER INTENDED them to look.

    Images are also the most efficient means of achieving near-perfect beauty with the minimum of code-testing labor. They are so easy. They simply work.

    Bandwidth limitations are a BYGONE of the past.
    Use (small) images for buttons. Your page will still be lightning-quick.

    :::::THE REAL ISSUE:::::

    The web simply needs better standards for image-scaling.

    Too bad SVGs are not-yet universal. One can only hope for soon.
    IE, why do you forsake us?

    :::::THE IDEAL SOLUTION:::::

    The best buttons are right under your nose.
    Make all of your buttons keyboard-equivalent.

    [TAB], [ENTER], [SPACEBAR], ah yes, spacebar, the most useful and most obvious button — so under-appreciated.

    Appreciate what we already have.

  5. Nick Says:

    Mogul while your comments are perfectly valid for somebody with good eyesight who is accessing the web through a modern computer and monitor. It fails badly on mobile devices, no flash support and numeric keypad only. And most mobile browsers do not even support the button element.

  6. RE Mogul Says:

    Wasn’t mobile-device-access the genesis of SVGs?
    SVG is also XML-based abilities, which opens to a myriad of possibility.

    About button element:
    One could easily embed the image in another recognizable tag.

    IE & Adobe Love Silverlight & Flash more than SVG.

    I love them too, I just wish the plugin-code was open source — so they could be included in browsers by default.

Google