WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Help on approach for annotating images

for

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

From: Malcolm Wotton
Date: Wed, Nov 30 2005 6:20PM
Subject: Help on approach for annotating images
No previous message | Next message →

Apologies if this is a repost - it didn't seem to work the first time I sent
it. . . .

Hi,

I'm new to the list and actually have 2 questions :)

First I couldn't find how to browse the message history so I don't know if
my main question has already be answered.

Second

I've recently added ALT text to all images in a site I'm developing. For the
normal browsing experience some images have captions (which will be
identical to the ALT text) and some do not. Captions are implemented as
normal text underneath the image. If I browse the site with lynx for those
with captions I see both the ALT text and the caption (ie a duplication).

Is this acceptable? Should I remove the ALT text from image that have a
caption? Or will this confound other browsers?

Any help on this first request would be great!

Thanks

Malcolm





From: Malcolm Wotton
Date: Thu, Dec 01 2005 3:40AM
Subject: RE: Help on approach for annotating images
← Previous message | Next message →

Hi,

Thanks for the helpful links, unfortunately I don't quite 'get it' yet.
Here's some more information . . .

I have identified 3 types of image on my site:

1) purely decorative images (curvy borders etc). These are displayed using
div tags and CSS they have no text associated with them

2) 'content' images eg posters advertising events. In this case the
information (date time price etc) is replicated in the alt tag, but there is
no caption. If you can see the image you can read the same info.

3) 'other' :( These comprise mostly of photos of events, generally they are
in articles that describe the event although the particular image may not be
referenced directly. An example would be a picture of a dance group
performing. A specific example is:

'Local morris dancers performing at Brighton'

In this case I have used it as the alt text and the caption, as for readers
that can see the image the info about Brighton would be of use. This is the
case that leads to duplication. For something like this could you suggest a
way forward . . .

Thanks

Malcolm

>

From: Malcolm Wotton
Date: Thu, Dec 01 2005 5:40AM
Subject: RE: Help on approach for annotating images
← Previous message | Next message →

Oops - I aoplogise - I didn't notice the extra bit in your original email .
. .

When I saw '>>

From: Jukka K. Korpela
Date: Thu, Dec 01 2005 7:00AM
Subject: RE: Help on approach for annotating images
← Previous message | Next message →

On Thu, 1 Dec 2005, Malcolm Wotton wrote:

> I have identified 3 types of image on my site:

As usual, it would be _much_ easier to discuss the problems if the URLs
were available.

> 1) purely decorative images (curvy borders etc). These are displayed using
> div tags and CSS they have no text associated with them

This should be no problem; alt="" is the only reasonable way (or, in
some cases, alt=" " or, if the decoration actually appears as a separator
too, alt="|" or something like that).

> 2) 'content' images eg posters advertising events. In this case the
> information (date time price etc) is replicated in the alt tag, but there is
> no caption. If you can see the image you can read the same info.

That's fine up to a point, though someone who sees the image but cannot
read the text clearly enough may have difficulties in accessing the alt
text. As a rule of thumb, if something is best said in text, say it in
text only (and add styling to text if desired).

> 3) 'other' :( These comprise mostly of photos of events, generally they are
> in articles that describe the event although the particular image may not be
> referenced directly. An example would be a picture of a dance group
> performing. A specific example is:
>
> 'Local morris dancers performing at Brighton'
>
> In this case I have used it as the alt text and the caption, as for readers
> that can see the image the info about Brighton would be of use. This is the
> case that leads to duplication. For something like this could you suggest a
> way forward . . .

I thought I did.

This is just the kind of images for which I suggested making the alt text
short, essentially an identifying name for the image. Depending on whether
there are other photos on the page, even alt="(photo)" might suffice, or
you might need alt="(photo of dancers)" or something more verbose. Just
remember that to most people who experience your page without seeing the
image, the alt text is basically a nuisance, though there should be _some_
alt text as a hint of the presence of an image when that presence explains
why the user sees or hears the text "Local morris dancers performing in
Brighton", which, in isolation, sounds like a truncated sentence that is
about to say something.

>>

From: Jukka K. Korpela
Date: Thu, Dec 01 2005 8:20AM
Subject: Re: Help on approach for annotating images
← Previous message | Next message →

On Wed, 30 Nov 2005, Malcolm Wotton wrote:

> First I couldn't find how to browse the message history so I don't know if
> my main question has already be answered.

The archives can be found at http://www.webaim.org/discussion/archives
and they have a search facility (though it's often difficult to search
for information like the one you're after, since it cannot be described
a few distinctive keywords - some people would refer to annotations of
images, some to captions of images, some to titles of images, etc.).

> I've recently added ALT text to all images in a site I'm developing. For the
> normal browsing experience some images have captions (which will be
> identical to the ALT text) and some do not.

A caption should usually not be the same as the ALT text.

> Captions are implemented as
> normal text underneath the image.

That's a bit problematic, but there is no good solution, since HTML has no
markup for image captions; see
http://www.cs.tut.fi/~jkorpela/www/captions.html
I mention this because the technique used may affect the question about
appropriate ALT text. In particular, if you decide to embed the caption
into the image itself and the image is only an illustration of something
that has been explained verbally in the text, alt="" would be adequate
(somewhat debatably, since it deprives some users of access to the image
even if they could benefit from it, namely people who surf with a graphic
browser without automatic loading and display of images).

> If I browse the site with lynx for those
> with captions I see both the ALT text and the caption (ie a duplication).

Technically, that's what should be expected to happen.

> Is this acceptable?

Usually not.

> Should I remove the ALT text from image that have a caption?

Certainly not. But you might modify it. This really depends what the image
is about, what it is supposed to convey, etc. For example, if the page
contains recent news and the image is a photo of some event and the photo
shows some people shaking hands when meeting, it might be appropriate to
write a caption like "Presidents Foo and Bar met in Paris, France", but it
it would pointless to duplicate this in the alt text. Rather, you
could write alt="(photo of the meeting)". This makes the presence
of the caption text understandable when the page is presented as plain
text or as speech.

See "Captions and accessibility" at
http://www.cs.tut.fi/~jkorpela/www/captions.html#acc

See also Understanding Guideline 1.1: Provide text alternatives for all
non-text content in the WCAG 2.0 draft:
http://www.w3.org/TR/UNDERSTANDING-WCAG20/#text-equiv

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/





From: Malcolm Wotton
Date: Thu, Dec 01 2005 9:00AM
Subject: RE: Help on approach for annotating images
← Previous message | Next message →

Many thanks for that - I've understood it now :)

I agree with your rule of thumb "if something is best said in text, say it
in text only", I think it maybe would not apply here as some of the artwork
is very rich and certainly not possible to replicated in styled text. Being
an Arts site we would not compromise the artwork. Hence the use of an alt
text.

I'll be able to post a URL soon, unfortunately the site is being prepared so
is not live yet. The old site is available at www.pumphouse.info but has few
of the accessibility features we are building into the new site.

Thanks again for your assistance.

Malcolm



>

From: pixeldiva
Date: Thu, Dec 01 2005 11:00AM
Subject: Re: Help on approach for annotating images
← Previous message | Next message →

On 01/12/05, Christian Heilmann < = EMAIL ADDRESS REMOVED = > wrote:
> Wouldn't a " " alt make screen readers read out "image space" instead
> of just skipping them?

No, a screen reader will skip an image if it has either null (alt="")
or empty (alt=" ") alt text.

> I'd venture to say that in this day and age, decorative images should
> be backgrounds in CSS and not IMG elements at all.

Yeah, I'd agree, but it's not always possible, and so the above
methods are the best way to deal with them.

--
Ann
http://www.pixeldiva.co.uk




From: Christian Heilmann
Date: Thu, Dec 01 2005 11:40AM
Subject: Re: Help on approach for annotating images
← Previous message | Next message →

> This should be no problem; alt="" is the only reasonable way (or, in
> some cases, alt=" " or, if the decoration actually appears as a separator
> too, alt="|" or something like that).

Wouldn't a " " alt make screen readers read out "image space" instead
of just skipping them?
I'd venture to say that in this day and age, decorative images should
be backgrounds in CSS and not IMG elements at all.


--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/




From: Joshue O Connor
Date: Fri, Dec 02 2005 4:20AM
Subject: Re: Help on approach for annotating images
← Previous message | Next message →

Christian Said:

>I'd venture to say that in this day and age, decorative images should
>be backgrounds in CSS and not IMG elements at all.
>
IMO This approach has a certain currency. I am curious to see what
others think.

Inserting decorative graphics via CSS using something like

#image {background: transparent url(../assets/pretty_border.png) left
no-repeat;}

has the effect that the image is completely invisible to a non sighted
user. It is not included in the source code and as it is a decorative
image, it has no informational value, and certainly no tangible worth to
a blind user.

However, you cannot apply alt text to background elements in CSS. So for
any images that you need to apply suitable alt text to, include them in
your source code in the traditional manner using <img>.

Josh


Christian Heilmann wrote:

>>This should be no problem; alt="" is the only reasonable way (or, in
>>some cases, alt=" " or, if the decoration actually appears as a separator
>>too, alt="|" or something like that).
>>
>>
>
>Wouldn't a " " alt make screen readers read out "image space" instead
>of just skipping them?
>I'd venture to say that in this day and age, decorative images should
>be backgrounds in CSS and not IMG elements at all.
>
>
>--
>Chris Heilmann
>Blog: http://www.wait-till-i.com
>Writing: http://icant.co.uk/
>Binaries: http://www.onlinetools.org/
>
>
>
>
>
>
>





From: Joshue O Connor
Date: Fri, Dec 02 2005 6:20AM
Subject: Re: Help on approach for annotating images
← Previous message | Next message →

Tim

>That's what image replacement is for.
>
I wasn't referring to image replacement (FIR et al) but rather the
practice of embedding decorative images in CSS as backgrounds.

Not the replacement of heading text with styled graphic equivalents.

Josh


Tim Beadle wrote:

>On 02/12/05, Joshue O Connor < = EMAIL ADDRESS REMOVED = > wrote:
>
>
>>However, you cannot apply alt text to background elements in CSS. So for
>>any images that you need to apply suitable alt text to, include them in
>>your source code in the traditional manner using <img>.
>>
>>
>
>That's what image replacement is for. You move text out of the way
>(text-indent: -999em) and put the background image in its place.
>
>Tim
>
>
>
>
>
>
>





From: Joshue O Connor
Date: Fri, Dec 02 2005 7:00AM
Subject: Re: Help on approach for annotating images
← Previous message | Next message →

>
>
>But it's the same basic technique, except with IR you're moving some
>text before you apply the image background. If you want "alt" text,
>use IR.
>
Good point. Thanks for that addendum.

Josh



Tim Beadle wrote:

>On 02/12/05, Joshue O Connor < = EMAIL ADDRESS REMOVED = > wrote:
>
>
>>I wasn't referring to image replacement (FIR et al) but rather the
>>practice of embedding decorative images in CSS as backgrounds.
>>Not the replacement of heading text with styled graphic equivalents.
>>
>>
>
>But it's the same basic technique, except with IR you're moving some
>text before you apply the image background. If you want "alt" text,
>use IR.
>
>Tim
>
>
>
>
>
>
>





From: Tim Beadle
Date: Fri, Dec 02 2005 8:20AM
Subject: Re: Help on approach for annotating images
← Previous message | Next message →

On 02/12/05, Joshue O Connor < = EMAIL ADDRESS REMOVED = > wrote:
> However, you cannot apply alt text to background elements in CSS. So for
> any images that you need to apply suitable alt text to, include them in
> your source code in the traditional manner using <img>.

That's what image replacement is for. You move text out of the way
(text-indent: -999em) and put the background image in its place.

Tim




From: Tim Beadle
Date: Fri, Dec 02 2005 9:40AM
Subject: Re: Help on approach for annotating images
← Previous message | Next message →

On 02/12/05, Joshue O Connor < = EMAIL ADDRESS REMOVED = > wrote:
> I wasn't referring to image replacement (FIR et al) but rather the
> practice of embedding decorative images in CSS as backgrounds.
> Not the replacement of heading text with styled graphic equivalents.

But it's the same basic technique, except with IR you're moving some
text before you apply the image background. If you want "alt" text,
use IR.

Tim




From: Malcolm Wotton
Date: Sat, Dec 03 2005 3:40AM
Subject: RE: Help on approach for annotating images
← Previous message | Next message →

Hi all,

After starting with the question on annotating images I have one more. . . .

I have a site that has 2 skins - one with fewer images, and larger black
white text to aid visually impaired users. I use access keys for the
standards that exist (there is a UK government standard). I have a
disability access page with information about the alternative view.

My question is - how do I let users know there is an alternative view of the
site. My concern is that a visually impaired user will struggle with the
ordinary site to the extent they won't even find out about the alternative.
Are there any standards/conventions to help?

Malcolm





From: Jukka K. Korpela
Date: Sat, Dec 03 2005 8:20AM
Subject: RE: Help on approach for annotating images
← Previous message | Next message →

On Sat, 3 Dec 2005, Malcolm Wotton wrote:

> I have a site that has 2 skins - one with fewer images, and larger black
> white text to aid visually impaired users.

Are you sure that's the right approach? It would help at most _some_
visually impaired users. Skins might be nice for customizability and
personalization, but they are not very relevant to accessibility, except
as a problem.

A site should be designed so that it can be viewed with all or some images
replaced by their alt texts, as well as with color scheme or font size
changed. This is far more important than designing a particular skin
for some assumed set of users.

Of course, there might be special cases, but it's impossible to guess
whether this is one of them (no URL was specified).

> I use access keys for the
> standards that exist (there is a UK government standard).

I don't think there is, but even if there is, you shouldn't use it unless
forced to. Access keys (at least as currently defined and implemented)
mostly _reduce_ accessibility.

> I have a
> disability access page with information about the alternative view.

Why? To be useful, the alternative needs to be announced on the normal
main page _and_ all normal pages, since you cannot know which page will be
entered first.

> My question is - how do I let users know there is an alternative view of the
> site.

Obviously, by saying it near the start of each page. This inevitably means
some distraction, and this should be taken as part of the costs of
offering alternative views. Naturally, an alternative view page should
also contain a link to the normal version.

> My concern is that a visually impaired user will struggle with the
> ordinary site to the extent they won't even find out about the alternative.

That's a typical problem of sites that offer alternative views, usually
caused by a completely misunderstanding of accessibility. The link
to the alternative version is misplaced and in small font, sometimes even
wrongly named. Moreover, it is usually unknown to visitors whether the
alternative version contains the same information as the normal version.
It often _looks_ (or sounds) like a second-class version to second-class
visitors.

Thus, _if_ you have an alternate version that is somehow essential to
accessibility (as opposite to different skins for different tastes),
- link to it visibly on every page
- put the link near the start
- name it descriptively

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/





From: Jukka K. Korpela
Date: Sat, Dec 03 2005 1:00PM
Subject: RE: Help on approach for annotating images
← Previous message | Next message →

On Sat, 3 Dec 2005, Malcolm Wotton wrote:

> Thanks for the comments:

You are apparently replying to my message. It is customary to express such
things with attributions - not for courtesy, but for understandability.

> http://www.bpscgi.co.uk/cgi-bin/pumphouse/site.pl?nl=1

It wastes screen real estate and contains no obvious link to any other
version.

> 1) the black and white version works for me, I actually use it - so _I_
> think it's useful :)

Which black and white version?

There's a link - among a longish list of links in tiny font - named
"Disabled Access". I don't know which access you have disabled and why,
but it really does not suggest "black and white" to me.

I don't see anything else there suggesting "black and white". I don't
really need anything like that, but you seem to discuss the features
of a version that cannot be reached in any normal way.

You have _fixed_ font size, or made all you can to do that. Moreover,
the links have insufficient contrast with the background, and they don't
change color when visited.

That's surely hostile to accessibility, since most users don't know how
to work around that. It's a real problem, and it has real solutions:
just stop creating it. Problems with black and white versions seem to be
more or less imaginary.

> 3) QUOTE 'Access keys (at least as currently defined and implemented)
> mostly _reduce_ accessibility'
>
> Can you point to a reference or survey for this? or is it a point of view?

It is expert consensus. See e.g. http://www.clagnut.com/blog/204/

> 4) The disability access page is always accessible - it's on the main menu,
> the question is how much prominence does it need?

Make the site accessible, instead of creating a disability access page.
There's nothing there that anyone needs to know to visit the pages, so it
should not be there. If you wish to advertize services to disabled people
when they physically visit the theatre, that's fine, very fine, but
such information should be labelled appropriately.

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/





From: Malcolm Wotton
Date: Sat, Dec 03 2005 1:40PM
Subject: RE: Help on approach for annotating images
← Previous message | Next message →

Ok,

Thank you for your comprehensive post beginning.

> You are apparently replying to my message. It is customary to
> express such
> things with attributions - not for courtesy, but for understandability.


I understand your points but I read your response to be a little
patronising, and I find that disappointing.

I am not an expert on accessibility, I'm a beginner. And I'm trying to do
the right thing, which is why I'm asking questions in this forum.

>From your comments I have inferred that you think I am am being deliberately
obstructive. So I shall sign off and not bother you again.

That said, thank you for your comments on fixed font sizes - I shall fix
them, and also the link to the access keys info.

Malcolm

Malcolm





From: Malcolm Wotton
Date: Sat, Dec 03 2005 3:00PM
Subject: RE: Help on approach for annotating images
← Previous message | Next message →

Hi,

Thanks for the comments: I can now make the site visible (at least in a test
version) so you can see what's been done so far:

http://www.bpscgi.co.uk/cgi-bin/pumphouse/site.pl?nl=1

General comments from me:

1) the black and white version works for me, I actually use it - so _I_
think it's useful :)

2) Even the main site makes sense (I think) if images are replaced with ALT.
Fonts are resized, and with alternative colour schemes (as long as you make
a sensible choice). The alternative view is an 'extra'. Ie I have _tried_ to
make the main site accessible, however I'm not sure how successful I've
been.

3) QUOTE 'Access keys (at least as currently defined and implemented)
mostly _reduce_ accessibility'

Can you point to a reference or survey for this? or is it a point of view? I
could remove all access key features but I really want to know it's going to
be an improvement.

4) The disability access page is always accessible - it's on the main menu,
the question is how much prominence does it need?

Thanks again


Malcolm





From: Penny Roberts
Date: Mon, Dec 05 2005 5:00AM
Subject: Re: Help on approach for annotating images
← Previous message | Next message →

Malcolm Wotton wrote:

> I have a site that has 2 skins - one with fewer images, and larger black
> white text to aid visually impaired users.

You could make the other version an alternative style sheet instead of a
separate version so that users could select it (provided of course they
are using a browser like Firefox or Opera that allows selection) or have
a style changer on each page.

I use access keys for the
> standards that exist (there is a UK government standard). I have a
> disability access page with information about the alternative view.

I had a problem accessing the alternative view: when I used the access
key (on Firefox) it brought up the Firefox "view" menu instead! Leaving
aside arguments about whether access keys are any use or not, aren't
they supposed to override the browser defaults?

Penny




From: Penny Roberts
Date: Mon, Dec 05 2005 6:20AM
Subject: Re: Help on approach for annotating images
← Previous message | Next message →

Malcolm Wotton wrote:

> 2) Regarding Alt-V access key: Thank you for identifying a bug/error/issue.
> After comments made in this discussion list about the inadvisability of
> access keys I removed the 'V' and 'N' access keys (mostly because they
> clashed with the Alt-V behaviour in windows). I also updated the information
> page locally, but forgot to upload it to the server. Consequently the page
> told you to use Alt-V, but I'd fixed the code so it didn't work any more.
> I've fixed it now (ie I've changed the text - Alt-V is _not_ an access key
> as this seems to be the consensus here)

Ah, I'm just catching up on list mail so I must have tried the page
after you'd changed it :-)

> PS I've also managed to get the main section to an 800px width. The top
> banner is still too wide & needs more work. I'm now trying to address the
> fixed font size issues.

Pity about IE and fixed font sizes; it resizes just fine in Firefox.

Penny




From: Penny Roberts
Date: Mon, Dec 05 2005 11:00AM
Subject: Re: Help on approach for annotating images
← Previous message | Next message →

Jukka K. Korpela wrote:
> On Sat, 3 Dec 2005, Malcolm Wotton wrote:

>> I use access keys for the
>> standards that exist (there is a UK government standard).
>
>
> I don't think there is,

Yes, there is a recommended UK government standard. Rightly or wrongly
it is still there on a page that was updated in October:
http://www.cabinetoffice.gov.uk/e-government/resources/handbook/html/2-4.asp

Penny





From: John Foliot - WATS.ca
Date: Mon, Dec 05 2005 11:40AM
Subject: RE: Help on approach for annotating images
← Previous message | Next message →

Penny Roberts wrote:
> Leaving
> aside arguments about whether access keys are any use or not, aren't
> they supposed to override the browser defaults?
>

And if the "default" is a critical keystroke instruction for the end
user? Who's really in control here?

As a horrid example of exactly this type of issue, go visit the Us.gov
web site (http://www.us.gov). Under normal circumstances, users on a
Windows machine would use ALT + F to access the File Menu command
(which, presumably, is an important, if not generally universal,
keystroke command). However at the us.gov site, it DOES NOT DO WHAT YOU
WOULD NORMALLY EXPECT IT TO DO (Open the File Menu Dialogue): instead it
takes you to the "Ask your Question" page. This is Accessible? This is
right?

JF
--
John Foliot = EMAIL ADDRESS REMOVED =
Web Accessibility Specialist / Co-founder of WATS.ca
Web Accessibility Testing and Services
http://www.wats.ca
Phone: 1-613-482-7053






From: Malcolm Wotton
Date: Mon, Dec 05 2005 3:00PM
Subject: RE: Help on approach for annotating images
← Previous message | No next message

Hi Penny,

Thanks for the comments:

1) Regarding the style sheets, I'll think if it can be done (it should be
possible, but the skin system actually allows a completely different HTML
not just a css change) Generally anything that is achievable in CSS is kept
in CSS so this should be practical.

2) Regarding Alt-V access key: Thank you for identifying a bug/error/issue.
After comments made in this discussion list about the inadvisability of
access keys I removed the 'V' and 'N' access keys (mostly because they
clashed with the Alt-V behaviour in windows). I also updated the information
page locally, but forgot to upload it to the server. Consequently the page
told you to use Alt-V, but I'd fixed the code so it didn't work any more.
I've fixed it now (ie I've changed the text - Alt-V is _not_ an access key
as this seems to be the consensus here)

Thanks for taking the time to look.

Malcolm

PS I've also managed to get the main section to an 800px width. The top
banner is still too wide & needs more work. I'm now trying to address the
fixed font size issues.





>