Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Digital Web Article Posted

August 06, 2003

In Defense of Fahrner Image Replacement, my first article for Digital Web Magazine has been published. Feel free to discuss in the comments.

Particularily good comments in the past 24 hours:

#6 — “Most browsers are configured not to print background images, so your headers may come out blank in the print (this is also true of people who surf the web with images disabled in their browser). The first can be solved with a print stylesheet (does IE5/Windows support these?) but the second is a bit nasty.” — Simon Willison

#12 (on a new FIR variant) — “The best part is that this technique works in JAWS (tested, and approved), and there is no additional hacks or markup needed in your HTML or your CSS. The text-indent takes care of it all.” — Mike

#25 — “Regarding the recipe example: the first person I thought about on the accessibility side was not the blind user who is read to, but the low vision user who may be using a visual browser and text zoom” — Ed Nixon

#33 — “There are a significant number of people who for good reason surf without images. The primary reason is just download speeds over slow connections (which I hear quite a bit from English and other European surfers) and the over abundance of images on the web. Then there’s privacy concerns, filtering, and lastly those people who can’t take advantage of visual media.” — Michael

#39 (on solving real-world problems before the theoretical) — “What’s the point of discussing which materials to use for building homes on Mars if we did not yet figure out how to get there in the first place?” — Didier Hilhorst

#42 — “…let’s just say that JAWS and Windows Eyes are currently the top two screen reading applications on the market. As having a near monopoly, they are free to to handle things just about however they want. […] Getting their software to play ball with CSS is *way* at the bottom of their list, and that is a problem.” — Nic

#53 — “I’m posting this comment from Lynx right now. It’s a beautiful thing when even a text-only browser has full access to my site, and it’s actually usable.” — me


Reader Comments

1
Ethan says:
August 06, 07h

Congratulations, Dave — an excellent read.

2
MikeyC says:
August 06, 07h

Great article Dave, I think you did a good job of raising all the relevant issues and consequences of using the technique. Its often tempting to just dive head first into something new without considering the outcome (i’ve been guilty of that)… also very surreal reading my name in print ;)

This is what I’ve been wondering about: has the W3C published anything that might clarify how a screen reader User-Agent should ideally behave? The kinds of CSS it *should* use or ignore?

“As long as you are responsible in your usage, make sure your media types are safe…”

Speaking of “safe media types” has there been a verdict on CSS Zen Garden or are you still mulling it over?

3
Dave S. says:
August 06, 08h

Still thinking.

Tantek himself dropped by to point out that technically, the validator is in error for listing the box model hack as an error. So in principle, I could re-instate screen media and we’d be cool. Except that a lot of the CSS files would break when validated, and people using the Garden as a learning tool will be left scratching their heads. Best not to over-complicate this.

When we factor in that FIR is getting better and better, and the spans are becoming less and less relevant, and that the media thing might not be a problem much longer… there’s a whole laundry list of things that we could change now that we know better.

As I say in the text which nobody bothers reading anymore, “One day this gallery will be a historical curiosity; that day is not today.” — the code will slowly deprecate over time, and in a year it will look horrible. But right now it’s still pretty damn good, all things considered.

4
Dave S. says:
August 06, 08h

Oh, best resource I can point you to off the top of my head for what screen readers should be using — CSS2 spec: media types. Not very comprehensive, so there probably exists a better guide somewhere.

5
forgetfoo says:
August 07, 01h

congradulations, dave! very nicely written and a good read, too :)

/bookmarks to blog later

6
Michael says:
August 07, 01h

ed… I think the answer to your problem is to use em’s when possible to size the content. That way when the user uses the built in CTRL+ or CTRL-Scroll ZOOM for the browser the text sizes up as well as the boxes and the images. I’ve done this successfully on a prototype site I’ve been working on but haven’t yet tested it in the older browsers.

Another solution maybe similar to the “skip to” links… provide some way at the beginning of the content to swap themes to something more obviously to the persons liking.

7
Didier Hilhorst says:
August 07, 02h

I might get flamed for posting this but well I just needed to add my two cents.

What is this rambling about images off and CSS on? Seriously? Who in the world is going to do this? See I’m smart enough to get the point and… in theory people that bring up this argument have the right to do so and may have a point.

But I’m a designer and not a coder. All these statements are great for the record but they’re just not usable. Somehow I feel that we always end up in an endless discussion of exceptions that make up a very small minority. I know that accessibility is important and I’m willing to support it. However, not at all costs.

Sometimes I feel like I’m the only one who’s thinking along these lines. It makes me think of that post where Zeldman got flamed because he used tables on some of his commercial work. Come on guys. Let’s get real. I’m looking for things that work and look good.

We have to take care of all sorts of things when designing a site; from visual aspects, usability, accessibility to more. Those people that are trying to ban any form of visual art from the web: use Lynx and don’t complain. Why do you think CSS based design has not yet taken off among the best designers around? Because they like their art and in most cases they’re certainly do not like to compromise. That’s why flash got popular. No strings attached. Don’t have the plug-in? Too bad.

Is this good? Probably not. But it’s how things work. Designers mainly have visual skills, so logically they do not take into account persons that are blind are have bad eyesight. Have you ever seen an artist think of blind people (or limited vision) when painting? I did not.

Does this mean that blind people do not have the right to experience paintings? Of course not! Different projects try to solve this (challenging) task.

My point is that we should reach a golden mean (as Dave does mention in his article, allbeit in slightly different words). The CSS Zen Garden is a step in the right direction and is a fantastic resource. It proves that designers do not have to fear CSS but embrace it! Before we talk about exceptions let’s talk about all that old rubbish and other spacer.gifs that are around. Because right now 99% of the web is not accessible. No turned off images or CSS are going to change that. Amen!

8
MikeyC says:
August 07, 02h

“I think the answer to your problem is to use em’s when possible to size the content. That way when the user uses the built in CTRL+ or CTRL-Scroll ZOOM for the browser the text sizes up as well as the boxes and the images.”

Tecnhically speaking, Opera’s zoom feature (everything gets bigger–not just text) is what the W3C favours so …if I weren’t so lazy I would dig up the reference…

9
MikeyC says:
August 07, 02h

“What is this rambling about images off and CSS on? Seriously? Who in the world is going to do this?”

It does seem like a very rare circumstance. However, if you are a blind person I think you might turn images off since they do you no benefit and pages will load up faster as a result. CSS usually isn’t something you can turn off completely in a browser (except Netscape 4) that I’m aware of.

10
taestell says:
August 07, 02h

I have a comment and a question.

First, I think that CSS-3 will let you do this:

h1 { content:url(“logo.png”); width:x; height:x; }

That should solve every problem with screen readers and IE 5.5 and below, but most browsers will need to support CSS-3 before this becomes usable.

Maybe FIR can be combined with this CSS-3 code somehow to make things more accessable. Something like:

h1 { width:x; height:x; background:x; }
h1 span { content:”“; }

Well, a lot of work needs to be done to that code, but that may be a start.

Second, what’s the sin involved in simply putting an img tag inside a h1? It’s valid, and people with disabled images, screen readers, and even Google will all get the alt text.

11
Michael says:
August 07, 02h

Didier: good points but a little off.

There are a significant number of people who for good reason surf without images. The primary reason is just download speeds over slow connections (which I hear quite a bit from English and other European surfers) and the over abundance of images on the web. Then there’s privacy concerns, filtering, and lastly those people who can’t take advantage of visual media.

It is difficult to catch everyone. Most people and most businesses are unwilling to attempt it because it seems so insurmountable. Mostly because they can’t find that “golden mean” that balance for how exactly you connect with people. Too often the attempt is made to make ONE site version that looks pixel perfect identical in ALL browsers. That’s been the wholy grail for decades. Can’t happen.

But I think what we learn here and what gets taught here by quibling over the details is that we are MOVING in a forward direction. It lets others out there, designer and user alike know that we are attempting to see where they are coming from and how they can be served. It shows people that there are options.

We can’t go site by site and force people out of tables and force them away from spacer.gif. Heck I’ve even tried gentle nudging and politely offered to redo people’s sites for FREE and they won’t go for it.

It’s up to us as individuals to pass along the word that good HTML/CSS doesn’t have to be plain and that having a nice designer site doesn’t have to be innaccessible.

Unfortunately there are still people out there that refuse to even try. They get so set in their ways and they pick apart any new thing that comes along. It’s fine to pick if you’re picking for a solution, but if your picking as an excuse not to move on and not to make an effort… that’s just sad.

I think we need to quible over these facets because todays minority is tomorrows majority if we play the game well.

12
Ruth says:
August 07, 03h

Didier, your analogy is misleading. True, a website can be compared to a painting in that both involve elements of design; however, a website’s purpose is also to communicate through words and not just through visuals. And that’s why it is important that even if a site’s visuals are only available to some of your audience, the text - the true content, the “meat” of your site - should be available to all.

Now, making a site’s content accessible to all is admittedly not an easy task for those of us with 20/20 vision. It is tempting to simply write off the small percentage of people who are not able to experience the visual design of a website. But the Internet is an open medium, and designing sites in a way that locks out part of your potential audience goes against the nature of the Web itself.

Your approach to web design makes it seem like you are a print designer by training or inclination. To completely butcher an analogy, designing for the Web is a whole different kettle of fish.

13
August 07, 03h

Good article, but you forgot to address one of the most important reasosn not to use FIR: most browsers are configured not to print background images, so yoiur headers may come out blank in the print (this is also true of people who surf the web with images disabled in their browser). The first can be solved with a print stylesheet (does IE5/Windows support these?) but the second is a bit nasty. Luckily it only affects a very tiny number of users, but it’s still worth considering, especially as browsers that are not displaying images will display ALT text just fine.

14
MikeyC says:
August 07, 03h

“Second, what’s the sin involved in simply putting an img tag inside a h1? It’s valid, and people with disabled images, screen readers, and even Google will all get the alt text.”

It’s valid for the time-being. The tag won’t it exist in XHTML 2.0 (unless the working group gives into pressure like they did with the style attribute). We’re expected to use the Object tag instead, but Internet Explorer still has some serious problems with it.

15
MikeyC says:
August 07, 03h

“Somehow I feel that we always end up in an endless discussion of exceptions that make up a very small minority.”


The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

→ Tim Berners-Lee

16
Didier Hilhorst says:
August 07, 03h

Micheal: Good points.

I’m certainly with you on moving forward. I agree that discussing techniques and improving them will eventually lead to a better (more accessible) solution. But I think we should make a clear distinction between discussing technical matters and the general concept of standards. I think standards could use a push in terms of marketing and getting the message out there.

Ruth: Do not make statements that you can not verify.

“Your approach to web design makes it seem like you are a print designer by training or inclination.”

I do not come from print design. I’m currently finishing a MSc in Economics and Informatics for those that wonder what I’m doing (aside from that my spare time is indeed dedicated to design, but not print). However the latter is not important to this discussion. Nor would it have been if I were to come from print. The web is and will primararly always remain a visual media. Point à la ligne. I agree that the web is also an open medium and therefor efforts should be made to make it as accessible as possible.

My analogy was used on purpose because I know some don’t like to hear it (and I’m actually being nice). As for the question: “What is this rambling about images off and CSS on? Seriously? Who in the world is going to do this?”. It was a retoric question. I’m fully aware of the reasons why some people do. But that was not my point.

Don’t get me wrong here. I’m in favor of accessibility. But the web is about business too. People have jobs and companies make profits (or atleast try). In business no one is looking for the minority. They all want the majority. Back to CSS and FIR, I’m getting off topic.

I didn’t post this message to stop people from adding valuable ideas and concepts to CSS. Not at all. I’m more questioning the broader view on web standards and how they’re syndicated and implemented. The latter is also the case with FIR. Dave discussed technical issues, but moreover he linked it to real-world situations. To some this might have needed more attention. It’s not an easy task though but I think we’re getting there. Slowly but steadily.

17
DutchCelt says:
August 07, 03h

I was puzzled by the consternation that using a ‘hack’, in this case Tankek’s, might cause a validation error. If it doesn’t break the stylesheet why should it matter. I know that CSS should also been clean to prevent problems down the road. Using the appropriate mediatype seems to have priority in this case. It’s the user that should benefit not the code.

This hack is just a hack and shouldn’t warrant another workaround, especially when it’s not needed. And in this case it’s a well thought out hack and should be used normally, as if it was supposed to be there. And should be removed when no longer useful.

So media type ‘screen’ it is.

18
taestell says:
August 07, 04h

“Second, what’s the sin involved in simply putting an img tag inside a h1? It’s valid, and people with disabled images, screen readers, and even Google will all get the alt text.” —me

“It’s valid for the time-being. The tag won’t it exist in XHTML 2.0 (unless the working group gives into pressure like they did with the style attribute). We’re expected to use the Object tag instead, but Internet Explorer still has some serious problems with it.” —MikeyC

Well, there are quite a few browser support issues that need to be solved before anyone starts primarily using XHTML 2.0. But since the W3C has specificly stated that XHTML 2.0 is an “alternative to” XHTML 1.1, and not a replacement for it, it there really any harm in using a img inside of a h1 in XHTML 1 or HTML 4?

Also, by the time XHTML 2.0 is widely supported in most browsers, CSS-3 will be widely supported as well, and we can simply use “content:url(‘logo.png’)” for image replacement in XHTML 2.0 documents.

19
Kris says:
August 07, 04h

”..the most important reasosn not to use FIR: most browsers are configured not to print background images, so yoiur headers may come out blank in the print..”

Simon, I actually find that a great plus of FIR. See Bibliotheek Leeuwarden, where the titles of the page come out like clean type instead of an ink-eating block of dark colors.

The disadvantage when disabling images and keeping CSS is painfully visible here as well.

20
Kris says:
August 07, 04h

Dutchcelt,

Did you try media=”screen, aural”?

21
Didier Hilhorst says:
August 07, 04h

Basically what I tried to get across was:

Whatís the point of discussing which materials to use for building homes on Mars if we did not yet figure out how to get there in the first place?

Yes, there is a point! Which at the same time is the problem of the whole discussion. It makes sense to discuss future matters that may not seem a priority now, but first: letís keep it real. Because theory is not paying my bills (atleast not yet).

Side note:
Please do not tell me that a manned voyage to Mars is actually already possible. I know it might. But I’m discussing real life here, not Star Wars.

22
August 07, 04h

I wish people would stop viewing XHTML or pretty much much any version of any markup language as a replacement. I hate it when people say things like “XHTML 1.1 is the currently recommended standard”, it just isn’t true.

All the standards should be viewed as something separate, not upgrades you’re forced into using (apart from minor upgrades like 4.0 to 4.01).

Nobody is going to force you to use XHTML 2.0 anytime soon, if ever. It’ll be your choice if you want to use it. Please don’t be a sheep and follow others just to have the latest W3C badge on your homepage.

23
Ruth says:
August 07, 05h

“Your approach to web design makes it seem like you are a print designer by training or inclination.”

“Ruth: Do not make statements that you can not verify.”

Didier, I meant no offense, and I apologize if my comment did offend you. (In my own defense, I did say “makes it seem like”, not “is”, but that’s arguing semantics.)

All I meant by that sentence was that the approach towards web design that you seem to be in favor of is similar to that favored by print designers - get the message across to the largest possible audience at the lowest possible cost/effort. This makes very good business sense, and as you pointed out, “the web is about business too.” If the cost of accessibility is prohibitively high, then it makes perfect economic sense for a company to not make the additional effort to reach a tiny fraction of their target population.

But with the Web, it is easier to reach audiences that print media is inaccessible to. After all, it’s a lot easier - not to mention cheaper - to use em’s on a website than to print the company’s monthly newsletter in both normal text and Braille.

To conclude, yes, extra effort is required in order to make an inacessible website accessible. But not as much as one would think. And the payoff is the inclusion of hundreds of thousands of visually-impaired people into the online world.

24
Levin says:
August 07, 06h

“The disadvantage when disabling images and keeping CSS is painfully visible here as well.”

You could give the replaced element a background-color. If the image is not displayed or unavailable there is still a block of different color to show that something is missing.
(…. but the image should not be transparent)

25
Nic says:
August 07, 06h

Hmmm.

First, Dave, thank you for your article, as FIR has been bugging me because of lack of access, I’m glad to see that aspect seriously examined.

ed, it’s worth noting that people who have a level of low-vision low enough to be considered a disability under many standards such as Americans with Disabilities Act tend to actually use software, such as Zoom-Text, which blows up a whole part of a screen, not just text.

A point on not being bothered to design for a “minority” of people with vision disabilities. At last count, there were over TEN MILLION people with visual disabilities in the US alone. These people use the Internet a lot to shop, because in the end it still is more accessible than the world at large.

Please don’t tell me that a company is not interested in that kind of potential customer base. I’m tempted to digress to a bit of “education” about what it is to live with a disability and be discriminated against, left aside because “we’re just a minority”, but this is not the place.

As for what screen reading application developer should do in terms of support… Well, let’s just say that JAWS and Windows Eyes are currently the top two screen reading applications on the market. As having a near monopoly, they are free to to handle things just about however they want. It is difficult enough to get them to develop for applications such as Word, Excel, Access (yes, all MS products…). Getting their software to play ball with CSS is *way* at the bottom of their list, and that is a problem. The fact that to purchase a full version of JAWS with an SMA costs over US$1,200 doesn’t help anything.

I am currently tracing a new screen reader that I must test drive that is about US$90 and that apparently is as muscled as JAWS. This may be an improvement.

Finally, while I really think that we, as coder and designers have a resonsibility to provide as much accessibility as possible, I also think that users with disabilities have a responsibility to understand the technology at their disposal. In this case, learning to set the preference in their browser to simply turn off style sheets!

I’ve been playing with the idea of putting a note on some of my sites, a link to a “how to make this page more accessible to you”. Not sure how to best implement that, but it may be an idea. Dunno

Oh… Perhaps it’s worth me saying that while I do not have a vision disability, I am a person with a disability and work in disability rights for my “real job”. Web stuff is just “fluff” for me.

26
Michael says:
August 07, 06h

I think what I’d really like to see is the browsers supporting transparent as a valid color for text. I tried this one day in IE and it appeared to work unfortunately it failed everywhere else. If we could background a section of text with it’s appropriate image and then make the foreground text transparent we’d have the best of both worlds. I guess the caveat there is still “images turned off, css turned on” and I guess there’s not a way to tell if the user has images turned off from script or css.

27
Mike says:
August 07, 07h

Dave, I think it might be worth mentioning this alternative to FIR that accomplishes the same thing:

With html like this:
<div class=”logo” title=”Site Logo”>
Logo text here…
<div>

I use CSS like this:
.logo {
text-indent: -100em;
overflow: hidden;
background: url(stylizedtext.gif);
… }

This moves the text out of the containing element, and lets the background image shine through.

The best part is that this technique works in JAWS (tested, and approved), and there is no additional hacks or markup needed in your HTML or your CSS. The text-indent takes care of it all.

Mike

28
Dave S. says:
August 07, 07h

Simon — would you believe that’s the first time I’d heard about that particular problem? Stands to reason, now that you bring it up, but I haven’t actually encountered it myself yet. View the print preview for this page - nice and headerful.

Mike - your method was brought to my attention just yesterday actually. Going out on a limb here and setting myself up to be completely wrong, I’d guess that it may cause problems in older browsers. I originally assumed it had already been tested and rejected, but looking back in my notes I’m seeing nothing of the sort. It’s worth running through the gauntlet (IE5 Win/Mac, Opera 6 etc.) to see if it holds up; it’s a nice, simple solution that doesn’t require nearly as much code as the Leahy/Langridge method.

29
August 07, 07h

@Mike, you should change that HTML really. It should be h1 er something similar. But it looks like the best hack ever. If i ever need that, I normally use img, I’ll use yours.

30
Kiffin says:
August 07, 08h

I found your article very informative and entertaining. But don’t you think you are receiving an inappropriate amount of undue credit for redundant information which has mostly been scraped off from another article? Just curious is all.

31
Dave S. says:
August 07, 08h

Kiffin — I don’t know, am I?

Doug’s original article focuses on the technique and how to use it. I’d like to think mine covers in more depth the problems with using it, and how to solve them. An intro to the technique was necessary in mine for people who aren’t familiar with it to peruse; there’s overlap there.

Do I provide enough new information to be able to justify the new article?

32
Mike says:
August 07, 08h

Dave:

You can check out a running example on my currently-being-redesigned site: phark.net

At the top, where it says “BLOG ‘N PERSONAL SITE OF MIKE RUNDLE”, that is a background-image to a span element where I make use of the above technique (check the source if you don’t believe me lol).

In browsers I usually check on (IE5+, Mozilla, Safari, etc.) it worked great. I think I remember looking at it in Opera and things worked well, but I’m not totally sure.

Anne: You’re right, I should have used a more structural element, but I just wanted to throw the code up real quick for people to check it out ;)

33
Michael says:
August 07, 08h

Since I seem to find a lot of great information here I have a sort of related question:

So now I have a method for easily replacing text with an image - what about rollovers, more specifically what about preloading images for the CSS based rollovers. Has anyone come up with a method for implementing that.

34
Dave S. says:
August 07, 08h

Mike - checks out fine in Opera 6/Win. I’ll keep testing.

Michael — top right corner of this here site, all those roll-overs are FIR. I tried to get the preloading happening (read about it over at zeldman.com) but didn’t succeed.

35
Dave S. says:
August 07, 08h

Note to all: see Tom Gilder’s post about this subject.

It’s getting tricky to keep track of all the variants…

36
August 07, 09h

Dave (in #3): “So in principle, I could re-instate screen media and we’d be cool. Except that a lot of the CSS files would break when validated…”

FYI: I accidently discovered a workaround for this validation bug while working on the Wired redesign last year. Instead of linking directly to multiple style sheets from the HTML, link to a master CSS file using media=”screen”. Then use the master CSS file to @import any style sheets which use the box model hack. And your style sheets will still validate. (Just don’t use the box model hack anywhere in the master style sheet.)

I originally created a master style sheet to keep all the files for Wired as organized as possible, and to avoid needing to change any HTML files as we were adding new CSS files or renaming them. The master CSS file was kind of like a master “include” file if you’re familiar with SSI. Once I did that, no more validation errors complaining of an incorrect property for the screen media type. I’m not sure why the “bug” in the validator doesn’t look past the @import statement for this error, but it doesn’t. And it still looks through all the linked and imported style sheets as it would normally. The same technique has been used on Stopdesign ever since as well.

FYI2: I’m very close to coming up with an alternative image-replacement technique which works almost everywhere (and solves the “images off, css on” problem). But I’m having trouble working with IE5/Win’s broken box model. That browser be damned…

37
Dave S. says:
August 07, 10h

Wow, talk about catch-up.

Ed — your point about image-based text not being zoomable is equally valid given an <img> - no new problem arising with FIR here. But CSS-served images could present an interesting solution, since you can define multiple style sheets for a site. Theoretically if one were to care enough, they could dish up a ‘regular’ .css file, a ‘zoomed’ .css file with larger images/text, and an ‘alternate’ .css file with text instead of FIR. Extreme example, but possible.

Tom — doesn’t deprecation invalidate your point, though? If HTML 4.01 was really not an upgrade, than 2.0 should not be deprecated.

Nic — Thanks for speaking up. Your voice is important. Expect an e-mail from me.

38
Keith says:
August 07, 11h

This is great! I love all the new techniques popping up and they all seem like great solutions to real world problems. Now if someone would be so kind as to set up a “Battle Royale” between the techniques so I know which one to wrap my head around – that would be killer.

39
August 07, 11h

One of “my readers” has a great looking method:
http://www.annevankesteren.nl/weblog/index.php?itemid=38#comments
Only setting font-size to 0. I don’t know about Jaws and I didn’t do any browser testing, but to me it looks browser proof :).

40
Dave S. says:
August 07, 11h

Anne - I don’t think that works in Safari. AFAIK, Safari sets a default minimum of x pixels, and doesn’t let you shrink below that.

See my mnemonic design in Safari, particularly the text under ‘Archives’ - if you’re seeing images, it worked. If you’re seeing HTML text, it didn’t. I’d need independent verification of this, not having a copy of Safari on hand.

41
ed nixon says:
August 07, 12h

Enjoyed your article. Thanks for taking the time to write it. I have two points/questions/niggles:

1. Regarding the recipe example: the first person I thought about on the accessibility side was not the blind user who is read to, but the low vision user who may be using a visual browser and text zoom. It’s a function I’m sorry to say I use with increasing frequency as the days turn to months, etc. The recipe content graphically imbedded will not zoom and may well be illegible. This is kind of beside the point of your article, but I think it bears a remark. The demographic that would be inconvenienced by graphical text content is expanding very quickly, they have a fair amount of money and they also know how to complain.

2. I was getting a bit impatient by the time I got to the comments about printing and background graphics or whatever. I think the mediatype “print” is useful in this regard and is pretty widely supported, at least among the newer crop. It offers yet another opportunity to create a media appropriate design – different graphics, fonts, sizes, etc. – this time for good old paper.

…edN

42
Keith says:
August 07, 12h

Dave - on the mnemonic design I see both text and images, with the text overlapping and a bit off center.

Guess that means it’s not working?

43
Kris says:
August 07, 12h

Great article, just what I was looking for since recently my interest for FIR was sparked again.

Cinnamon uses FIR for the main navigation. It gets inaccessible when CSS is on and images are off; I am thinking of dropping FIR for this navigation.

And that brings me to the only thing I miss in the article; some advice or re-assurance towards designers on when and where to use and not use this technique. Lack of this does not make the article less good, but it did prevent me from sending the URL out to colleagues who are not (yet) very deep into this.

44
Eugene says:
August 08, 01h

Maybe there needs to be a textonly media type. Browsers can simply load the css for that media if images are turned off. The tty media type already specified is a little too restrictive. There should also be a media type addressing lack of color in a visual media (like black and white printers, monochrome monitors, otherwise normal but colorblind users, etc.).

45
Didier Hilhorst says:
August 08, 05h

Nic: Thank you for posting your message.

I think it is important that I clearly state that I am in favor of accessibility. Personally I think you should always be bothered to include every single living human in your audience. Thus make your website as accessible as possible. At the same time there’s nothing wrong with being a minority. Whenever I talk about a minority I do not assimilate it with discrimination or other negative aspects. But experience learned me that being part of a minority has certain disadvantages towards the majority. It’s always been like that.

I am fully aware of the number of visually disabled people in the US. I agree that this represents a group that no company should neglect. Unfortunatly not many companies have accessbility on their priorities list. Because however big ten million sounds it’s still a relative small population. Again I do not favor this behaviour and I try as much to make pages accessible. Otherwise I wouldn’t be bothered to post comments here.

“I also think that users with disabilities have a responsibility to understand the technology at their disposal.”

I think this was a very important statement to make and I’m very happy it came from you. Any other person would’ve taken the heat for daring to say this. In essence it is what I meant by bluntly asking the retoric question why people turned CSS on and images off.

46
Nic says:
August 08, 06h

Merci Didier.

You’re right, most companies don’t see 10 million people as a large market. It only represents, after all, 2% of the population of the US. Of course, for every one person with disability not shopping in one location, you have their friends, family, and other relations that may boycot the company based on lack of access.

I think it is important, as a designer, to make people understand the importance of accessibility to our clients. While there is controversy at this point about the applicability of the ADA to commercial websites (bad case law against it), any entity receiving federal funding is liable under section 508 (US based companies only, of course).

Given that under other laws, such as Fair Housing, ADA, etc, lawsuits have been brought against not only the non-accessible building, but the architects, builders and developers, it stands to reason that pretty soon we’ll start seeing cases being brought to court where not only the business, but the web designers will be named as defandants.

Dave’s asked me to do something on this topic, so I’ll shut up now :-) Feel free to contact me direct.

47
Jai says:
August 08, 07h

Geez louise! Wasn’t this a post about FIR? Looks like the comments took on an “atricle” of their own right, leaning towards accessability.

Just as having your design look the same in all browsers is a “pipe dream”, I think making your site completely accessable to everybody is also a “pipe dream”. It’s a good thing to try to make a site accessable to everybody, I agree, but when does accessabilty slow down the production of a website? Certainly at some point a blind, deaf, mute quadrapeligic might be offended that s/he can’t access E-bay (seriously, I’m saying this without malice or disheartedness- just an extreme example), but would it be in E-bay’s financial interest to make their site accessable to this person?

The concept of extreme accessability is wonderful. The reality of it is only possible. I think what the whole concept needs is a “prophet”, if you will, who has real life accessability issues yet is building sites and things for people with these disabilities. Someone like a Steven Hawkins of the web. Then I think the big boys of commerce might turn their head (and wallets) around.

But digressing back to FIR: I still think it rocks!

48
Ian Lloyd says:
August 08, 07h

There’s a thread running about the technique here that you can watch/join in on … if you do so desire :-)

http://www.accessifyforum.com/viewtopic.php?t=28

49
James angelton says:
August 08, 09h

You know….. to listen to you people talk you’d think 95% of the world surfs with page-readers, images turned off, java turned off, javascript turned off, reading from a wheel chair in a hospital bed with no arms no legs and blind in both eyes. And of course if they do have some sort of vision…it’s impared or they’re color blind. Good lord, where do most of you people do your surfing…?

Well…..I’m going to Best Buy before Hellen Keller grabs that Imac I’ve been saving up for.

50
Nic says:
August 08, 09h

Jai,

The discussion verged toward accessibility because it is, IM(NS)HO, the major problem with FIR…

51
Jai says:
August 08, 09h

I don’t 100% agree with you James, but you did make me laugh with “Well…..I’m going to Best Buy before Hellen Keller grabs that Imac I’ve been saving up for”. I think it’s kind and generous of designers to go that extra mile. Do companies generally care if you do? I doubt it, but it truely is a humanitarian gesture.

And I’ll tell you, Hellen Keller was a genius, and she’d probably make better use of that iMac than most “non-impared” people.

52
Dave S. says:
August 08, 09h

Jai — What Nic said. Accessibility is a big factor when talking about FIR, and it’s terribly important. You’ll never reach 100% of the people, 100% of the time, but if you can get both of those numbers up to 99% or higher you’re doing everything you can. Today’s web standards make accessibility really easy (and to me anyway, enjoyable).

To take a step backward with a technique like FIR is reprehensible, so finding middle ground is essential. I have no doubt we’ll do it. The ideas that are floating around right now might just be the ticket, but even if they aren’t - sooner or later we’ll get it.

53
taestell says:
August 08, 09h

“Just as having your design look the same in all browsers is a ‘pipe dream’, I think making your site completely accessable to everybody is also a ‘pipe dream’.” —Jai

Not exactly. If you design with CSS and correctly structure your documents in HTML or XHTML, any user agent can access the “meat” of the document, and browsers that support it will get the added benefit of CSS styling.

The main problems are: (1.) browsers that don’t fully support CSS, but try to, like Netscape 4, and (2.) browsers that support the wrong CSS media type, like an aural browser that reads “screen” media, or, as Dave recently found out, MSN TV (a “tv” browser that reads “screen” CSS).

We have to be careful to work around some of those problems, but accessability is not a “pipe dream.”

54
Levin says:
August 08, 10h

There is a method to keep the text visible if images are turned off. A span is necessary.

levin.grundeis.net/files/20030809/alternatefir.html

55
Evan says:
August 08, 10h

Amen, brother Tom!

When you get right down to it, HTML 2.0 is not deprecated because the W3C says so… it’s deprecated because it’s no longer useful when compared with HTML 4.01. Any web designer worth his or her salt can use HTML4 + CSS to compose a page that looks great and degrades gracefully in ancient browsers. Unless you are in some sort of very specialized situation, there’s really very little downside in going with HTML4 over HTML2.

The same is not true when comparing HTML4 and XHTML. XHTML1.1 provides some nifty functionality that is simply not available in HTML4. But the trade-off is that you have to construct your site so that it is 100% valid, absolutely bulletproof XHTML, all the time. (Otherwise you’re deriving no benefit whatsoever from the XML-ness of XHTML, nor are you future-proofing your site – all you’re doing is producing malformed HTML.) Since producing a bulletproof XHTML site is a major effort, there’s your tradeoff. For some people, like me, plain ol’ HTML 4.01 + CSS is easy and gets the job done. For others, XHTML is critical.

In short: as Tom said, we must evaluate each technology separately. Unfortunately the W3C is not doing a good job of pointing out the benefits and drawbacks of each, so this is all more work for us than it should be.

56
Dave S. says:
August 08, 10h

Jai - one more reason to consider accessibility. I’m posting this comment from Lynx right now. It’s a beautiful thing when even a text-only browser has full access to my site, and it’s actually usable.

57
twhid says:
August 08, 10h

Animated GIFs? not with FIR/Safari?

Safari will not display animated GIFs placed on the page using the FIR technique. Safari will not display *any* animated GIF placed in the background of any element using either CSS or HTML.

Not knocking the FIR technique, it’s rad, Apple needs to fix Safari.

I encourage everyone to report this ‘bug’ to Apple.

58
Jai says:
August 08, 11h

To clarify… and quote myself even:

“The concept of extreme accessability is wonderful.”

Sounds like the replies to my post make me sound opposed to it. I’m certainly not opposed to it at all; quite the opposite actually. What I’m not convinced of is that it will be a major issue with the companies responsible for web advancement (MS, Mozilla, Sun, Oracle, etc.). And thus, it will be brushed aside in he manner of “oh, that’s nice that you can do that” and then ignored.

Now, anyone who links to my site from here knows that I didn’t build it with accessability or validation in mind. The scary thing is that untill recently I never heard of either one. Why is that? It’s not like I hadn’t “been around the web”. Anyway. So what I’m hearing is that FIR has accessability problems because of the extra span attribute in the middle of the markup right? It’s still a great tecnic 99% of the time, so far as I can tell.

I do think that the technologies and scripting languages are “getting there” in terms of separating content from design, so that both become aesticly pleasing in their own right. But, as teh Zen Garden says, “That day is not today”… but I’ll agree, that day is closer than it was yesterday.

59
August 09, 01h

Long discussion here, and it sounds from some recent posts like a couple of the key problems and the size of their audiences have been drowned out. I hope nobody minds if I do a little re-cap here.

1. Browsing with images turned off
Effected audience - due to slow connection speeds much of Europe and the rural US, not to mention the rest of the world.
Solution - not far off by the looks of things, check the link above.

2. Inability to zoom the text
Effected audience - can you say baby-boomers? The largest age group in the states isn’t getting any younger. My stepfather Norman would never let me hear the end of it if I used pixel sized text - an image or otherwise.
Solution - hope that people will use screen-zooming software (Opera :-), or make that text image large and legible!

Please point out any bigs ones I missed. Eagerly awaiting whatever it is Nic and Dave have brewing. I strongly aggree with what somebody said about the need for someone in the disabilities community to also become vocal in web development.

60
Dave S. says:
August 09, 05h

Nils - thanks for the summary. Give me a day or two, it’s already done, just needs a few final touches.

61
Didier Hilhorst says:
August 09, 06h

Some people (including me) have been throwing figures and statistics around. I want to point out that it is hard to accuratly state how big a certain group or population is. A few resources:

“European broadband subscriptions will outpace the U.S. by 2007, according to findings from Jupiter Research (a unit of this site’s corporate parent), that reveal a high-speed surge. By 2008, Jupiter predicts that 48 percent of all European households will have broadband, compared to 46 percent in the U.S.

While 81 percent of European online households accessed the Internet via a narrowband connection at the end of 2002, 26 percent have indicated that they are likely to upgrade to broadband by year-end 2003.”

Full article

“Adults 35-54 are 19% more likely than the average adult to be heavy on-line users, and 13% more likely to be heavy radio drive time listeners.

The percentage of adults 35-54 who reported using on-line services in the past 30 days grew from 22% in 1998 to 37% in 1999.”

Full article (PDF)

Now academically speaking I have no idea if these resources are correct or used a proven methodology. But these findings do come from some of the more respected research institutions. They can however be used without risk as a rough indication of future developments.

62
Levin says:
August 10, 01h

Yes, overflow hidden should not be necessary. In fact, using it means that the alternative text may not be fully visible if images are unavailable.

But i think it would be better to keep the it, because the design is less likely to break. (if the issues with IE5.1/OS9 are solved)

claire you’re right: putting the at the end does remove the need for z-index in older Operas.

63
Levin says:
August 10, 06h

Oops.
Please disregard my last comment
z-index is still necessary to please opera 5 and 6

(note to self: be sure to check in the right browser)

64
Claire says:
August 10, 11h

Hi.. consider this a vote for Levin’s method ;)
nice work..

however regarding the using of overflow: hidden; and it’s interference with IE/mac, I would opt for a font-size (% or ems) instead so that the text will always be visible and sizeable should images be turned off. I know trying to control the font-size is not perfect, but I see it as the best of the alternatives.. reasons follow below:

note: if you put the span element at the end of the heading text it should avoid the need for z-index to be specified.

I personally like the text-indent : -100em method for it’s ease of use but that method, along with Leahy/Langbridge method, will mean that the although text will be read by Screen Readers it will not be visible on the screen. Due to overflow: hidden; still being parsed if CSS is on.

For a true all round, keep the most people happy. this has to be the best yet.

Another problem I’ve been reading about is that Search Engines may not like the use of overflow: hidden or display: none; as it has the possibility to be abused/misused (I know they’re not indexing external CSS Files, YET!!) and Levin’s method, with the font-size adjustment need not use either.

thanks..
Claire

65
Martins Pilsetnieks says:
August 10, 11h

One of the pros of FIR - some of us are too lazy to type the alt text for every imaga to make it all xhtml valid

66
Claire says:
August 11, 02h

thanks Levin, nice to have confirmation..

I just tried in 7.1 too ;)

67
Mike says:
August 11, 02h

Whoa… Tom and I were listed on Zeldman this morning… super cool!

68
Peter J. says:
August 11, 08h

Levin pointed out in comment #10 above – http://www.mezzoblue.com/cgi-bin/mt/mezzo/archives/000211.asp#c000946 – something that bears repeating: for his and Tom Gilder’s techniques, the images used can’t be transparent or the text will show through. Took me longer than I care to admit to figure this out this evening.

(BTW, Dave, the form on “preview” still shows the “simple XHTML” rule and includes expanded URLs in the textarea.)

69
Levin says:
August 12, 01h

There are no accessibility concerns if you use this method: http://levin.grundeis.net/files/20030809/alternatefir.html

JAWS reads it, Browsers show the Image or the replaced element/text if images are disabled or unavailable.
(you can even select the text behind the image, try that with an alt-tag)

re: I’m not sure what the FIR method is trying to solve
- With replaced headlines the _text_ is the content not its graphical layout.
- You can’t put structured markup (em, strong or even li) in alt-tags.
- You can replace an _image_ to make it fit your current site-style.
- You can change the image at any time or try not to include an image at all in alternative styles (like for WAP, PDA or Print styles)

70
Darrel says:
August 12, 12h

I think the technique is neat, but in every article I’ve read that highlights it, all of the accessibility issues get brushed under the rug.

I’ve only used Jaws, but from what I hear, it’s fairly popular. The problem is that Jaws is not a web browser. It’s a screen reader. It has no concept of CSS or anything of the sort. It simply reads what gets rendered in the browser.

With FIR, nothing gets rendered for the screen reader to read. It can’t ‘see’ the text, nor is there an alt tag to read.

So, with that said, I’m not sure what the FIR method is trying to solve. Images are content. Just stick the image there with alt text.