WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Spliced Images

for

Number of posts in this thread: 4 (In chronological order)

From: Jeff Isom
Date: Wed, Sep 06 2000 4:24PM
Subject: Spliced Images
No previous message | Next message →

Many designers use tables to splice together complex images to form the look of one complex image. I realize that this can also be achieved
using CSS. My question is how do you effectively use alt tags when multiple small images are used to form the look of a larger image. If you
use the same alt tag for all of the small images, the screen reader would repeat the tag multiple times which could be annoying. Would it be
better to use an alt tag in a single image and none in the others? Or is it better to use one large, complex image and use CSS layering to
achieve the look you want?
Thank you,
Jeff Isom

From: Darren Brown
Date: Wed, Sep 06 2000 9:25PM
Subject: RE: Spliced Images
← Previous message | Next message →

couldn't you just forgo alt tags on the images themselves and give the table
a "title" tag?
good luck--
Darren B.
----- Original Message -----
From: < = EMAIL ADDRESS REMOVED = >
To: < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, September 06, 2000 3:22 PM
Subject: Spliced images

> Many designers use tables to splice together complex images to form the
look of one complex image. I realize that this can also be achieved
> using CSS. My question is how do you effectively use alt tags when
multiple small images are used to form the look of a larger image. If you
> use the same alt tag for all of the small images, the screen reader would
repeat the tag multiple times which could be annoying. Would it be
> better to use an alt tag in a single image and none in the others? Or is
it better to use one large, complex image and use CSS layering to
> achieve the look you want?
>
> Thank you,
>
> Jeff Isom
>

From: Leonard R. Kasday
Date: Thu, Sep 07 2000 7:33AM
Subject: RE: Spliced Images
← Previous message | Next message →

CSS positioning is still buggy in too many browsers to be usesable now I think.
I think the best thing is to use an alt tag in one and a blank alt tag in
the others, i.e. ALT=" "
In graphical editors you can often do this by putting a single space where
it asks for alt text.
Notes this is not the same has having no alt tag at all.
Also, splicing is usually used to make some of the areas links. You can
also use one large image and make it an image map. Works better in Lynx and
Home page explorer because it gives a convenient way to skip the links.
Remember to put alt tags for each area. Also, unfortunately, you still
need redundant text links at the bottom to accommodate old
browser/screenreader combos that don't pick up the image map alt tags...
unless you're sure your users are up to date.
Hmmm. Perhaps I'm being too conservative here. Are there any other
opinions about how important it is to have redundant text links for image
maps that already have alt text in their area tags? Are people still using
old software that doesn't pick up the area alt tags? Anybody have more
info on this?
Len
At 03:22 PM 9/6/00 -0600, you wrote:
>Many designers use tables to splice together complex images to form the
>look of one complex image. I realize that this can also be achieved
>using CSS. My question is how do you effectively use alt tags when
>multiple small images are used to form the look of a larger image. If you
>use the same alt tag for all of the small images, the screen reader would
>repeat the tag multiple times which could be annoying. Would it be
>better to use an alt tag in a single image and none in the others? Or is
>it better to use one large, complex image and use CSS layering to
>achieve the look you want?
>
>Thank you,
>
>Jeff Isom
--
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: = EMAIL ADDRESS REMOVED =
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/

From: Reidy Brown
Date: Thu, Sep 07 2000 7:34PM
Subject: RE: Spliced Images
← Previous message | No next message

Often designers do this when the complex images include or "frame" text or
table code, making the non-graphic elements appear to be part of the
graphic. Or if some parts of the image are reused over and over (to make
tables appear to have rounded corners, say) while some are replaced (the
title of the tables, either as formatted text or as a graphic). If the
images are sliced in a somewhat meaningful way, you can handle this by
giving useful alt tags to semantically meaningful parts of a table and empty
alt tags to "architectural" graphics-- graphics that are used to maintain
the visual composition of the page but convey no other meaning. Here are
some sample tags (stripped of other attributes for simplicity):
<img src="/images/tabs/roundedleftcorner.gif" alt=""><img
src="/images/tabs/tooltabtext.gif" alt="Tools"><img
src="/images/tabs/roundedrightcorner.gif" alt="">
which could also be conveyed using text and style sheets (more in line with
WAI guidelines):
<img src="/images/tabs/roundedleftcorner.gif" alt=""><span
class="tab">Tools</span><img src="/images/tabs/roundedrightcorner.gif"
alt="">

Here's a hint: look at the page in Lynx or another text-only browser. If the
meaning of the page is clear and uncluttered, while conveying all important
information, you've designed it well. Otherwise, you can try assigning alt
tags differently to make it easier to read the page.
Reidy
-------------------------------------------
Reidy Brown
Accessibility Coordinator/
Software Engineer
Blackboard, Inc.
1899 L. St., NW, 5th Floor
Washington, DC 20036
(202) 463-4860 x236
-------------------------------------------