Yet another graphic button with CSS styled text

Yet another implementation of a graphic button with overlaid CSS styled 
text.  Degrades differently, but still gracefully I think, in older 
browsers.  I'm suggesting this for the techniques document, not to fuel 
further debate on graphical text.  I'm hoping others will suggest still 
further variations, in addition to those already suggested by Bob and Kynn.

See http://astro.temple.edu/~kasday/wai/tabs/bottbuttons.html


The page shows buttons with textual labels.
- It should work in any browser with sufficient CSS 2 support, although it 
doesn't rely on CSS entirely.  I use tables to retain layout in older 
browsers.  In such browsers, the text should overlay he buttons when style 
sheets are on, but appear above them when style sheets are off.
- Works per expectation in MSIE 5+
- In Netscape 4.72 , the labels are above the buttons when style sheets are 
off, even in 4.72.  I expect better in Mozilla but haven't tested.
- Opera 3.x same as Netscape 4.  Haven't tested in Opera 4.x.
- Haven't tested in Amaya either.

In all cases, you can click anywhere on button.
Another feature is that one button always at extreme left and other two at 
extreme right.  This was requested by the designer for a particular 
application.

So it's always functional.  It's a judgment call about serious it is that 
labels appear above rather than on the buttons in older browsers. Note that 
some pages, e.g. www.outpost.com, put labels above tabs anyway.

Len


At 06:03 PM 10/24/00 -0700, Kynn Bartlett wrote:
>At 5:52 PM -0700 10/24/00, m. may wrote:
>>- Targeting text vs. images. This is an issue of usability. Tabs became
>>prominent thanks to Amazon's use of them, among other predecessors such as
>>Win95 and GeoWorks. The way in which sighted users interact with tabs is
>>to click anywhere on the target, not just on the word, as would be done in
>>textual links. I've run usability tests on this behavior, and this precise
>>design failed compared to a bitmapped image, as users who clicked outside
>>of the linked word presumed the site was broken. Like it or not, Amazon is
>>the standard here, and designers who fail to replicate that kind of
>>response do so at their own peril.
>
>This is a good point.  The HTML Writers Guild's web site
>(http://www.hwg.org/), which uses HTML+CSS to simulate buttons
>in the navigation bar (view it in IE for full effect) is seriously
>"broken" as buttons.  The buttons do not work as real buttons, they
>just look like them.  Real buttons, you could click anywhere on the
>button and go to the right place, but that doesn't happen on the
>Guild site.  (Also, buttons should click in when pressed, if they
>are to look like buttons!)  Button behavior is well defined in the
>user interface world, and these "buttons" don't measure up at all.
>
>Oh, don't blame the current webmaster (Marshall), blame the guy who
>designed the CSS and web template for that site (someone named Kynn
>who isn't webmaster anymore). :)
>
>--Kynn
>--
>--
>Kynn Bartlett <kynn@idyllmtn.com>
>http://www.kynn.com/

--
Leonard R. Kasday, Ph.D.
Institute on Disabilities/UAP and Dept. of Electrical Engineering at Temple 
University
(215) 204-2247 (voice)                 (800) 750-7428 (TTY)
http://astro.temple.edu/~kasday         mailto:kasday@acm.org

Chair, W3C Web Accessibility Initiative Evaluation and Repair Tools Group
http://www.w3.org/WAI/ER/IG/

The WAVE web page accessibility evaluation assistant: 
http://www.temple.edu/inst_disabilities/piat/wave/

Received on Thursday, 26 October 2000 09:09:43 UTC