I thought Brian LePore got there first but not quite.

If you turn images off, in Firefox at least, the alt text bleeds over the message. Very visually exciting.

What is it with this icon stuff anyway? Why are people so obsessed with pretty pictures? IMHO a little red cross does sweet FA to enhance the content. If you actually take the trouble to look at the transactional example with images turned off, which one really conveys its message clearly and concisely?

All you might need to do to make it stand out more (the object of the exercise after all) is put “Error :” or “Transaction Error :” in the text, use a different, but related, font in a larger size possibly styled in a Strong or Em element to add semantic weight.

If the icon is there for people who cannot read they will not be able to understand the message anyway unless they are using a reader in which case the icon is even more superfluous.

The web needs information technologists/architects, not graphic artists.

In summary. Icons = eye candy, period.

Thanks for exposing those impish background images containing content for the scammers they truly are! I’m sure you’ll find a little something extra in your stocking(s) for your provocative post!

Lachlan – while your version is functionally equivalent, and I like the use of the the strong element (similar to the examples I provide over at simplyaccessible.org) I think that the image in the markup is a more universal solution.

It will better deal with CSS off/not supported and images on/supported, and certainly be an aid to those that are more visual. Its use supports WCAG 1.0 Priority 3 Guideline 14.2 “Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page” Your version does this too – but with the image in the markup it is done so more universally.

Ultimately the point of the article, though, was to encourage people to think carefully about it rather than simply adding the image to a CSS background image.

Placing “presentation” into our markup for the sake of accessibility seems to be a mistake.

Isn’t this what the “title=” attribute is for?

I’d say that using the “title” attribute seems to be a much better solution that lets us take advantage of the benefits of using CSS.

2 comments:

1) why the extraneous div around the p – this seems like wasted markup to me, i tend to just use class=”error” on my p tag and apply all the styling needed directly to that.

2) I also prepend “Error: ” at the start of the error message. I like having that text visible even to normal users, and obviously it will work fine for screen readers and the like.

I’d much rather that than put a needless (IMHO) image tag every time I have an error/message/warning etc on a page.

@seb frost: to answer both of your questions…

“why the extraneous div around the p – this seems like wasted markup to me, i tend to just use class=”error” on my p tag and apply all the styling needed directly to that.”

Sure – but often I’ll use a div with class of error and then I can place whatever content I want in there and I’m not limited to one paragraph.

“I also prepend “Error: ” at the start of the error message. I like having that text visible even to normal users, and obviously it will work fine for screen readers and the like.”

That’s another possibility, to be certain. However, do you also inlude an icon or other visual representation of status/state that shows an error had occurred? Or are you relying simply on “text” to convey all of your message?

“I’d much rather that than put a needless (IMHO) image tag every time I have an error/message/warning etc on a page.”

Why is it needless? Do you not believe that images can convey information quickly and effectively? (I’m not asking this sarcastically – I’m geniunely interested in the answer)

@MikeWS: I wanted to respond to a couple of the points you made as well…

“If you turn images off, in Firefox at least, the alt text bleeds over the message. Very visually exciting.”

If someone turns images off, are they overly concerned with visual excitement? Do they expect everything to be in pixel perfect place? Or are you saying that the message isn’t getting across because there is an overlap or something?

“to make it stand out more … put “Error :” or “Transaction Error :” in the text, use a different, but related, font in a larger size possibly styled in a Strong or Em element to add semantic weight.”

I have no problems with adding semantic weight to it, and encourage it – I might actually revise this example by putting [em] ... [/em] around the image. ;)

“If the icon is there for people who cannot read they will not be able to understand the message anyway…”

Who said anything about being there for people that cannot read? You’re jumping to conclusions.

“The web needs information technologists/architects, not graphic artists.”

I’ll have to disagree there – the web needs people that communicate a message. That message should always have good design in terms of both the information that is presented and the visual way in which it is communicated.

“In summary. Icons = eye candy, period.”

What about the background colour, text colour, and the borders? are they eye candy too? Do they not communicate? Why pick on the icons only? What I’m saying is that it is entirely appropriate to display the image along side whatever message you choose for your text, and depending on the text you choose you may have to consider different strategies rather than always putting images in the background via CSS.

I’m very serious when I ask these questions and not at all rhetorical. I’m genuinely interested in understanding where you’re coming from on this…

Good article. I’d like to add one more factor to consider when deciding between img tags and CSS background-images: CSS background-images are often omitted when the web page is printed. This is consistent with the example given: an error icon conveys information and ought to be printed, and is therefore not just a decorative background.

Derek,

Could have used my udasss script to swap to that zoom layout ;)

Congrats on a nice article!

Thanks Derek, this is an excellent article. I’m certainly guilty of this mistake and I’d never given it a second thought before. I’m thinking of all the links to PDF documents that I’ve classed so that a PDF icon appears. No more!

Theres some really good points there, something I hadn’t thought of.

Thanks!

Good advice—and to add to it, don’t forget the old “Google is blind” analogy. It doesn’t apply so much for “transaction messages,” but having content that conveys the “status” messages (instead of just visual indicators via CSS) is key for good SEO. I want search engines to know my house has / hasn’t sold yet.

in other words: the document has to make sense even without styles :)

Patrick – I think that in some cases a document will “make sense” with or without styles (depending on the context, of course) even if some of the content is stashed away in background images. In the case of the transaction/error message, it may “make sense” but I think it just makes more sense to put the image with alt directly in the content.

But, yeah, I suppose I could have written “make sure it makes sense without styles” but that wouldn’t have been much of an article now would it? :)

I don’t think the error icon should have necessarily been included as an image in the in the markup, as the specific graphic is still somewhat dependant upon the site’s design. However, there probably should have been some additional (alternate) content that is removed with CSS when the icon is available.

For that, I’ve often used something like this: (I’ve used square brackets instead of angle brackets, because this broken comment form provides no way for me to include them, since all HTML tags and even entity references are stripped instead of converted sensibly.)

Then I hide the strong element and add the background image.

Dave, about the pdfs.

I usually add an icon via CSS, but I also put a title attribute in the a element, stating the title, the kind of document, the size in Ko… So I’d go with Derek and say the icon ‘makes more sense’, but if screenreaders read the title or people browsing without stylesheets hover on the link, the info is there…

I use a lot CSS background images in order to avoid the “broken icon” image when an image is missing.

Especially for Gravatar, so that you don’t see a bunch of missing images when the site happens to be down

Explained here : Gravatar and the broken image icon

while i don’t disagree with anything in this article, i think an error header is more necessary than a image cue. there are certain scenarios where displaying an error by itself can leave a user lost. even for the example above, i’d rather do something like…

[blockquote]Placing “presentation” into our markup for the sake of accessibility seems to be a mistake.[/blockquote]

Bill: What I’m saying is that the icon can easily be seen as content and therefore belongs in the HTML as an img.

I’ve seen loads of people (including myself) use image replacement for things like company logos. I suggest we all need to consider very carefully whether or not these images are simply presentation or if they are content. In the case of the error and other icons, I believe that they are important enough to be content proper.

One more item – your suggestion to use the title attribute isn’t always going to be enough. Whether it is right or wrong, the title attribute is for advisory information and therefore optionally rendered by the user agent in place of the element to which it is attached. The fact that it happens to render as a tooltip for mouse users possibly deals with the majority, but we are talking about providing the same equivalent information for everyone.

Nick: This certainly wasn’t meant as a comprehensive error reporting solution. I believe that the solution you propose would benefit from having an image/icon denoting the error state in the heading. I’d be very much inclined to place that error image directly in the HTML. Even a big and bold heading can do with some visual reinforcement with appropriate graphics.

Is this also a problem with script included via javaScript – the page is sent to the browser THEN a div or whatever is displayed later; is it me or do screen readers not pick this up because they are actually not contained in the source??

I may just be being a div on this….

derek: that’s my bad. i knew the article was about images being used for content vs. presentation but by time i was done reading it, my mind was stuck on displaying errors :)

i actually think that the logo example you mentioned in one of your comments is the most common scenario. i like how it’s done at stopdesign .

Excellent article Derek.

Like Patrick mentioned, it all comes back to WAI checkpoint 6.1 and Section 508, Part 1194.22, Paragraph d. Make sure that pages are readable and usable without style sheets.

I’ve taken the approach that there are three levels of non-text content on a site:

1. Eye-candy: Things that serve no purpose other than to make a site visually appealing/attractive and (in many cases) satisfy the marketing departments. There is no content value (though there may be value to a sighted user).

2. Mood-Setting: This is the middle layer of graphics which may serve to set the mood or set the stage as it were. These graphics are not direct content and may not be considered essential, but they are important in that they help frame what is going on.

3. Content/Function: This includes the actual navigation as well as actual content.

Given those three, I never alt-ify the first group unless there is something there which will enhance the usability of the site for someone using a non-visual user agent.

I try to alt-ify the second group as makes sense and is relevant. There may be times when doing so may be annoying or detrimental to other users and I’ll avoid it. For instance alt text that is identical to an adjacent text is unnecessary, and an irritant to screen reader users. I recommend a CSS background image or alt=”” in such cases. But sometimes, it’s important to get this content in there for all users.

I always alt-ify the third group.

What’s necessary and what’s not depends a lot on the function of the image and its context on the page. The same image may require alt text (or title or longdesc) in one spot, but not in another. If an image provides absolutely no content or functional information, CSS background images or alt=”” may be appropriate to use. But if the image provides content or adds functional information an alt would be required and maybe even a long description would be in order.

In many cases this type of thing is a judgement call. Use your best :-)

The bettererror div for the first example does not render correctly for IE (the pink background ends prematurely) for me.

Fully agree with Seb Frost.

Personally I use DL for messages/warnings/errors.

[DL class="errors"]

[DT]Error(s):[/DT]

[DD]Error message one[/DD]

[DD]Error message two[/DD]

[/DL]

But anyway good main point in article! Thanks!

Derek, While I agree with some of what you said, it depends on the context in which you say it. I think your initial example is flawed, and therefore the solution becomes only one of a number of solutions and not THE solution to the problem. I also understand that this is your forum and your opinion, but my first question in the context of deciding how to design/code what you called “transaction-related” messages is, “Does the copy convey the message well without additional visual support?”, and if the copy is lacking, then in my opinion the copy is bad, not the code.

You made this argument yourself in your second example of the real estate listing:

“However when considering the “sold” listing, there are less changes to be made to keep the same look by leaving the “SOLD” image as a background image and providing the equivalent information elsewhere in the listing – namely, right in the heading.”

In this case, the copy correctly conveyed the necessary information.

The real question is, “When is an image a piece of content that needs to be accessible?”

I don’t think you’ve really answered that question either in the content of your editorial or by your examples.

And as with any set of content there are umpteen ways to code it.

@michael: You’ve made a number of points – most of which I understand your perspective on. A couple of points (forgive the point form – its not meant to be abrupt, even if it comes across that way):

1. _“Does the copy convey the message well enough without additional visual support?”, and if the copy is lacking, then in my opinion the copy is bad, not the code”_ I take your point, but would suggest that this is not an either or scenario. I would suggest that the most effective presentation of the “message” is through both the copy and the visuals.

2. You state that the real question is _“When is an image a piece of content that needs to be accessible?”_ With all due respect, the only answer to that question is “it depends.” I would much rather developers ask themselves the question: “How can I communicate this message in an accessible way?” That is the question that I want people to ask themselves when they are building web sites. By providing the examples that I did, I wanted to look at some alternatives that make an improvement accessibility-wise.

As you say “there are many ways to code it,” and I’ll be happy if people consider different options instead of automatically assuming that a CSS background image will do.

Sure – but often I’ll use a div with class of error and then I can place whatever content I want in there and I’m not limited to one paragraph.

Fair enough, I find that’s a rarity so use a p normally and extra elements as and when needed.

That’s another possibility, to be certain. However, do you also inlude an icon or other visual representation of status/state that shows an error had occurred? Or are you relying simply on “text” to convey all of your message?

I also use an icon as a background image on the p.

Why is it needless? Do you not believe that images can convey information quickly and effectively? (I’m not asking this sarcastically – I’m geniunely interested in the answer)

Not denying that at all, that’s why I do have an image in the background of the p tag. But I like the cleanness and compactness of the source code with no image tags cluttering it up.

Putting the image declaration in the stylesheet makes it:

1) easier to change site-wide

2) smaller source files (CSS file is cached so preferable to put the code in there)

I can see the argument you’re making, and don’t totally disagree with you – the second example you give is more along my lines of thinking: carry on using the background image, and add actual real text (not alt text) to convey the meaning as clearly as possible regardless of how the user is browsing the page.

Interesting things to think about – like every other day. But I am coming more from the direction of Seb Frost above – I think that the key information needs to be conveyed by text of the message.

Icons are nice and often useful, but I think that they should be considered additional – if the user a has scaled the text to be twice as large as the default a little icon can get lost…

@John:

If the user a has scaled the text to be twice as large as the default a little icon can get lost

Its possible, yes. However – I could have specified the size of the image with the CSS to scale in em units. That would have given us a proportionally sized image that scales with the font size – something we can’t do with a background image… Drat – I should have made that point in the article as well ;)

For image replacement techniques I found this techniques adding extra space to the bottom and left of your to be replaced text to cover up any text resize the best method so far:

http://cssplay.co.uk/menu/ir.html

Like Lauke said: if your website still looks functional with styles off: all ok

> Currently in the absence of CSS there will be no icon – which (I’m hoping you agree) is critical to communicating there was an error.

But even with an icon tucked away in your source code, you are still not communicating anything special to a machine that has to interpret your code.

The question you should be asking is, “how do I communicate to a machine that this line of text is important?”

And with that comes a rather simple answer:

[p class=error][strong]Error:[/strong] [em]Message[/em] [/p]

As an added bonus you’ve gained a couple of style hooks that can now be used to set up the CSS that will convey the importance of this text to the human eye.

Even though I agree with you that visual design is communication, I think that CSS is the best place for expressing it. You wouldn’t want red font tags around that error message too? ;)

I could be wrong but..

I’ve always looked upon the XHTML as CONTENT and CSS as PRESENTATION.

An icon is presentation so therefore should be put in CSS.

It’s not like its a picture relevant to the story; “A cloudy winter morning in London”.

If a person with a screen reader reads it, they’ll be told TWICE there’s an error, surely? First by the alt tags then by the [strong]?

I generally ask myself a question to determine if an image is presentational or not. “Will the image’s [potential] alt attribute add new information to the document?” If the answer is yes, then it’s content, otherwise, it’s just decoration. In the above error message example, the question is worded something like: “What information does ‘Your postal/zip code was not in the correct format.’ not convey that the icon does communicate?” The answer is none. Nothing new is communicated by the icon, and so the icon—just like the color—is presentational.

I keep thinking about the adage, “What part of ‘no’ do you not understand?” You may decorate the word all you want, but the message is already communicated as concisely as it can be.

The real estate example however, that’s another story. That image is conveying new information, and it belongs in the mark-up, not in the style sheet.

@Erik: Any browser that does not support CSS well enough to be sent a stylesheet. Netscape 4 and IE 4 are two examples.

Nice effect, good main point in article! Thanks!

Nice bedtimereading !

I had of course allready figured this out myself…I love CSS and the use of BG images ! They rule ! F*** the ‘alt’ tag !

That said…About an icon being needed to show there was a error : why is this needed ? In my opinion and like mentioned here earlier, a line of contrasting text (for example: #ff0000 on #ffffff) would do the same trick.

If you have a website that get’s it’s visitors from perfect ‘alt’ tag use I would like to see it. And if you have shown it tell me how it is important that a ‘alt’ tag on a ‘error’ image was involved in this…

I wonder, I always wonder…

Don’t you think it’s time that ‘we’ as webdesigners should be thanked at least once by someone who is blind and had no trouble vissiting a website. So far I keep strugglin’ with CSS and W3C and all, but never hear anything from those who benefit by this…

Who are they ?!