Quiz 1.1.2: ALT text for CSS background images
After building those lists with graphic images for markers, our friend Tom learned the advice many of you offered as answers to Quiz 1.1.1, and recoded the markers using list-style-image.
Along the way he asked a question over on the CSS-Discuss mail list and learned about background-image. Wow! Tom was really energized now. His first idea was to use CSS background images for site logos, those ever present links in the upper left corner of most sites. The idea of keeping only one link, in the CSS instead of the HTML was very appealing. Tom was well on his way when it dawned on him that there was no obvious way to associate ALT text with background-image. Oh my, what is he to do?
As an aside, Tom hasn’t yet read about any image replacement techniques. Let’s ignore them for the purposes of this quiz. They’ll give us more fun later.
Q. What should we do about ALT text on CSS background images?
- A There’s no provision for ALT text on CSS background images. Don’t even try.
- B Keep the background image URL in CSS where it can be easily changed. Then, in the HTML use a transparent or empty image map and attach ALT text to the map.
- C If the image conveys important information, or is critical to correct functioning, don’t use a CSS background image. Use HTML instead and code the correct ALT text.
April 1st, 2005 at 7:44 am
Im going to choose option (C) - If the image is important enough to warrent an alt tag - then it is quite clearly part of the content of the website and not just style. so the image should be included in the html.
April 1st, 2005 at 7:53 am
Ditto that - I go with C as well.
If you go with A, well…never mind even considering that option, that just seems as bad as images with plain text in them for navigation (try viewing that in lynx…).
If you go with B, you’ll have to change both the CSS as well as the HTML should the image’s message change, completely against all ideas of separating the content from the presentation by using a stylesheet.
April 1st, 2005 at 8:12 am
Are we limited to just A, B, C? What about D) Other:
From a formatting standpoint, hand-in-hand with the use of CSS background images is using display:none on a span of text within the element that the image is a background of to provide substitute content for the non-CSS user. This text can do more than just replicate the wording found in the image or logo, but can provide a call to action in text to replace the emotional appeal of the imagery.
But I’m not sure this is an answer from an accessibility point of view. So I answer your question with a question: Would this accomplish anything in terms of Accessibility?
April 1st, 2005 at 8:14 am
I’ll take D for 1000 Alex.
If your image is displayed in the background via css, place your alt text in the FOREGROUND, and use css to hide it (display:none). Css aware browsers see the image, not the text. Unaware browsers see the text, and not the image.
April 1st, 2005 at 8:16 am
GMTA Mark!
April 1st, 2005 at 8:16 am
I usually go C. However although alt=”" contains information it doesn’t provide any semantics for that information. In that case I’d rely on the parent element to provide context for the image.
Having said that, I usually use image replacement in a situation like the one described, unlike Tom.
April 1st, 2005 at 8:42 am
If I were Tom, I’d hit the CSS-D archives or the CSS-D wiki and learn about image replacement and create my own option D. I admire Tom’s desire to separate presentational imagery from structure and content as much as possible, and until CSS3 arrives, image replacement techniques are the best means available to accomplish this.
I think Marty and Mark are on the right track w/ their advice, except that display:none won’t work in many screenreaders, and those that do “display” it do so contrary to W3C specs. [1] However, many alternative techniques not utilizing display:none exist [2], each with their own pros and cons.
Current image replacement techniques are not without some accessibility issues of their own (the most common one being a CSS enabled/images disabled scenario where nothing is rendered in visual browsers), but I think consideration needs to be given to a) which accessibility hurdles is more detrimental, and b) what techniques take us in the direction that the web should be heading (standards conformance, pure semantic markup, etc.).
It’s a tradeoff that, after Tom has educated himself a bit on the techniques and comes to understand what accessibility is all about, I’m sure he’d be willing to make.
NOTES:
[1] http://www.alistapart.com/articles/fir/
[2] http://www.mezzoblue.com/tests/revised-image-replacement/
April 1st, 2005 at 9:03 am
Hey Marty,
You said:
Using display:none to hide stuff from the visual display also hides from screen readers. We’ll get to more questions about this, but in the meantime see my piece about screen reader visibility.
April 1st, 2005 at 9:23 am
Shawn and Gary are right. If the image is conveying content, then it ought to be in HTML with an ALT tag. If the image is merely presentational (i.e, for style or appearance), and is not part of the content of the page, then it might be more desirable to use a css background image and the most accessible image replacement method one can find. Mezzoblue (cited above by Bryce) provides a good description of the aternatives.
April 1st, 2005 at 10:25 am
While the best solution is really image replacement, we aren’t given that option here since Tom isn’t up to snuff yet.
I would use option “A” and not even try a CSS background. If the content is important enough that it needs to be read but in a way that only an image can present it, then let the image go for it. Then include your ALT text.
There’s nothing wrong with including properly marked up images in your code, as long as they are accessible.
April 1st, 2005 at 10:25 am
Oops, I meant option “C”. Sorry.
April 1st, 2005 at 10:41 am
I use B, but it’s a transparent image, not an image map.
Example at http://www.sfmuni.com/cms/msc/announce/SFMuniApril2005announcements.htm
April 1st, 2005 at 10:48 am
I neglected to note that the reason I do this is so we can change from one logo to another by just changing the style sheet, instead of having to edit every page. A change in logo is in fact anticipated.
April 1st, 2005 at 1:19 pm
As others have noted, Tom would need to decide if the image communicates anything. I tend to ask people if their image would be part of the document’s content (the information you want to communicate). Guess it’s C.
Charles, why not use image replacement? Either with text or ‘replacing’ an image by an image, like SimpleBits (http://www.simplebits.com/) does.
April 1st, 2005 at 1:58 pm
[C] is clearly the best answer.
If the image needs alt text, it should almost always be an img element. The background CSS property is meant to be used for images with no semantic value.
Many people here are describing image replacement techniques which according to the question should be ignored.
The problem of updates is easily solved with even a basic templating system.
I’d also like to point out that some screen readers audibly render elements that are hidden with display: none;. This behavior goes against the spec, but it’s kind of irrelevant from an accessibility point of view.
April 1st, 2005 at 4:06 pm
I think option C is the correct solution. If the reason for doing is so that it can be modified via change in one file, there are other ways of doing just that - server side include for example.
April 2nd, 2005 at 10:27 am
While A is true, the best answer is C. I don’t like B because if the image is part of the content and behavior of the site, it should be in the HTML, not made presentational by hiding it in the CSS.
April 2nd, 2005 at 11:17 am
“As an aside, Tom hasn’t yet read about any image replacement techniques. Let’s ignore them for the purposes of this quiz.”
What?! No …
Image is rarely markup. But when it is, it can probably not be replaced with text (alt text).
Let’s say I have a heading I’d like to have in a different typeface than the boring standards. First you type the markup with a heading element, right. You don’t do it with , since it’s a presentational effect you want. And then you use an image replacement technique to add the new typeface.
Let’s say you’re an illustrator. You have a nice portfolio site, coded following the standards. You’re doing you’re code thing and you come to the point where you need to show a logo you’ve made. Now, in my opinion, the logo is content, since it’s not the company’s name that’s important—it’s the graphical work!
And let’s say you browse that site with Lynx and you’ve marked up the logo with an tag. What should the alt attribute say? The company’s name? Okey, but .. that says nothing about the illustrators work, except that she has made a logo for .
See my point? :)
April 2nd, 2005 at 11:20 am
You stripped my < and >!
It should say:
“you don’t do it with <img>, since”
and
“marked up the logo with an <img> tag”
and
“made a logo for <company’s name>”
.
April 2nd, 2005 at 5:57 pm
C
April 4th, 2005 at 4:13 am
Everyone was quick to jump at image replacement that was one that we wanted to “ignore them for the purposes of this quiz.”
In light of that, I’m surprised no one suggeted a title attribute. None of the options in the post are appealing, and since image replacement is out, a title attribute will add the content for the screenreader and people are used to having altish tooltips.
April 6th, 2005 at 6:16 am
Chris’s suggestion of using the title attribute (not tag) fails for the same reason alt fails. One cannot attach a title attribute to a background image specified by CSS. All we have to work with is a URL.
Secondly, most screen readers have default settings that ignore speaking title attributes. (Hmmmm, sounds like something we might test…)
April 8th, 2005 at 1:49 am
I briefly skimmed through the comments, and kinda wonder why this was not mentioned.
We are talking about the logo (typically upper-left) which by common-use standards should link to th ehome page of the site, right? You can set the image as the background, then use the title attribute of the anchor tag for your “alt” text.
Voila!
April 8th, 2005 at 12:07 pm
Bob, note Chris didn’t specify title attribute of what… on an «a» tage, which you would need for the link, you can set the title, which would be visible in most browers on hover, and I am pretty certain is read by screen readers
April 8th, 2005 at 12:07 pm
wouldn’t it be nice if we could edit our comments - how’s that for usability?
April 26th, 2005 at 4:58 am
Another vote for C. If an image requires alt text, it’s content. It should be an IMG tag which has alt and may have title too. If it doesn’t require alt text, it’s decoration and should probably be in the CSS. Options D and so on are intellectually interesting but misguided; you’re trying to teach an elephant to ballet dance.
August 3rd, 2005 at 12:32 pm
Use title attribute in tag can simulate ALT tag’s effect
It works also in tag
August 3rd, 2005 at 12:37 pm
Use title attribute in TD tag can simulate ALT tag’s effect
“”"”
It works aslo in DIV tag
August 18th, 2005 at 8:23 am
Everytime someone suggests using the TITLE attribute, we need to remenber that most screen readers are not configured to read title attributes by default. Then, many screen reader users won’t turn on the title reading mode because they then get a lot of redundant information. In short, using the title attribute is not a reliable method of providing accessible text to a screen reader.
March 14th, 2006 at 5:26 pm
You can in fact simulate the attachment of a title tag to a background image. If your background image is within a DIV tag, simply wrap the DIV tag in an A tag. With this you can also make the background image a link. I do it all the time when I don’t want to display the image when the stylesheet is disabled.
For instance:
if you are making the background image a link, you’ll want to write the line, “cursor:hand;” for the “logo” class.
April 14th, 2007 at 5:17 am
I got his prob with my site.
I took the solution C. Use to position the image correctly and use html for the image and put alt in the code and that solve the problem easily.
May 25th, 2007 at 10:22 am
I go with option C for the reasons as above: if the image requires alt text, it’s content and so put it in the mark-up.
No issues with graphics/illustrations with this for me. But with headings as images…
I use images as headings (the BBC does this on their www.bbc.co.uk/radio page, search the source code for H1…), when I want to use a non-system typeface. JAWS 8.0 on Windows XP recognises my images as headings as long as there is alt text on them and will read the following:
<h2>
<img alt=”News and Events” title=”News and Events” />
</h2>
as:
“Heading, graphic: News and Events”
Lynx displays the alt text inside a heading parent as a heading.
My only concern is that Google might not index the alt text as a H2. So far I have only used this technique on my own site. ! My clients have wanted me to use text, or CSS by way of text-indent: -1000em;, for image replacement.
Hmm…I’ve had no luck searching for answers/clues on this: anyone here know more?
December 1st, 2007 at 10:45 am
My application required the use of background CSS images because I am using them for buttons that can change how their appearance depending up on their “skin” preferences.
I wanted the buttons to show “alt” text to let the user know where they would be going when they pressed it.
The “title” tag in the did the trick for me. Thanks! I had never used this before.
March 20th, 2009 at 3:44 am
[…] Source […]