« Lesson learnt from downloading fonts from a German website
Conditional Comments »

Stylish Accessible Buttons

Styl­ish Access­ible But­tons

But­tons that look good and the same in Fire­fox (PC and Mac), Opera (PC and Mac), Cam­ino, Safari and almost in IE 5, 5.5 and 6 (PC), scale with changes in font size and be access­ible, it is possible.

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

  • Use the but­ton ele­ment instead of input type submit
  • But­ton ele­ments can con­tain other inline ele­ments such as images and spans
  • Unfor­tu­nately but­ton but­ton ele­ments can not con­tain block ele­ments such as a div
  • So you wrap the but­ton ele­ment inside a div, so that you can abso­lutely pos­i­tion ele­ments inside the but­ton ele­ment rel­at­ive to the sur­rond­ing div
  • So it goes some­thing like this:
    • div con­tainer, pos­tion: relative;
    • but­ton, pos­tion: rel­at­ive; text-align: centre;
    • image that fills the whole but­ton ele­ment, pos­tion: rel­at­ive; size in ems(I did use three images, start, middle and end, but I was hav­ing troubles with FF on PC so I settle for the single image.
    • span with but­ton text pos­i­tion: abso­lute; and line height equal to image height.
  • IE on PC adds an extra 1.75em of pad­ding to the left and right of a but­ton which can not be removed. So you need to fix that by either mov­ing the abso­lute pos­i­tion of the span with but­ton text 1.75em, increas­ing the width of the span 3.5em or by adding a 1.75em mar­gin to the span by using con­di­tional com­ments and a style sheet. The IE only mar­gin is the only style ele­ment that is not in the page.

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

Cred­its

Joe Lewis for remind­ing me about the but­ton ele­ment, Derek Feath­er­stone whose tech­niques for access­ible forms I was using when I got the idea about but­tons, and Rang for his Aqua by Rang v2 pho­toshop action avail­able from http://share.studio.adobe.com which made the but­tons fast.

This entry was posted on Sunday, November 27th, 2005 at 11:05 pm and is filed under accessibilty, css and html, elastic design . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

6 Responses to “Stylish Accessible Buttons”

  1. Joe Lewis Says:
    November 28th, 2005 at 2:29 pm

    Very slick. I can give that a whirl on one of my cur­rent projects!

  2. Nick Cowie » I am doing a presentation Says:
    February 4th, 2006 at 8:13 pm

    […] The advant­age of doing a present­a­tion on the but­ton ele­ment, which are the most pop­u­lar posts on this blogs, is I have already done most of the research for those posts: Styl­ish Access­ible But­tons, More about the but­ton ele­ment and a half writ­ten post about how to pos­i­tion but­tons. So there is very little work to do, except try and find out how IE7 beta deals with the but­ton ele­ment and exactly what extra pad­ding IE5 and IE6 adds to the but­ton ele­ment, it is not as I pre­vi­ously stated a fixed amount but appears to be pro­por­tional to the width of the but­ton ele­ment. Still all of this can be pack­aged into a 30 minute present­a­tion, as long I only briefly touch on con­di­tional com­ments for serving an addi­tional stylesheet to IE and how to use abso­lutely pos­i­tion an ele­ment inside a rel­at­ively posi­tioned element. […]

  3. Yong Bakos Says:
    July 20th, 2006 at 1:41 am

    The prob­lem with Microsoft’s imple­ment­a­tion of the but­ton ele­ment is that it frig­gin doesn’t behave accord­ing to stand­ard, and is pretty much use­less. It declares its value to be the value of Inner­HTML (the label of the but­ton) instead of the value of the value attribute.

    I hope its fixed in IE7.

  4. RE Mogul Says:
    June 26th, 2008 at 7:01 am

    Images are THE ULTIMATE in access­ib­il­ity — any and every device can dis­play them the way THEIR MAKER INTENDED them to look.

    Images are also the most effi­cient means of achiev­ing near-perfect beauty with the min­imum of code-testing labor. They are so easy. They simply work.

    Band­width lim­it­a­tions are a BYGONE of the past.
    Use (small) images for but­tons. Your page will still be lightning-quick.

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

    The web simply needs bet­ter stand­ards for image-scaling.

    Too bad SVGs are not-yet uni­ver­sal. One can only hope for soon.
    IE, why do you for­sake us?

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

    The best but­tons are right under your nose.
    Make all of your but­tons keyboard-equivalent.

    [TAB], [ENTER], [SPACEBAR], ah yes, space­bar, the most use­ful and most obvi­ous but­ton — so under-appreciated.

    Appre­ci­ate what we already have.

  5. Nick Says:
    June 26th, 2008 at 8:53 am

    Mogul while your com­ments are per­fectly valid for some­body with good eye­sight who is access­ing the web through a mod­ern com­puter and mon­itor. It fails badly on mobile devices, no flash sup­port and numeric keypad only. And most mobile browsers do not even sup­port the but­ton element.

  6. RE Mogul Says:
    June 27th, 2008 at 1:48 am

    Wasn’t mobile-device-access the gen­esis of SVGs?
    SVG is also XML-based abil­it­ies, which opens to a myriad of possibility.

    About but­ton ele­ment:
    One could eas­ily embed the image in another recog­niz­able tag.

    IE & Adobe Love Sil­ver­light & 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.

Affiliates

Google
text advertising by
Powered by Reseller Zoom