WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: question about Div tags and content images

for

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

From: sean keegan
Date: Thu, Jan 27 2005 1:53PM
Subject: question about Div tags and content images
No previous message | Next message →

I am starting to come across websites using DIV tags to load images that
contain content. When using JAWS or Window-Eyes, both apps seem to ignore
the presence of this information (not even a notification that the content
is even present on the screen).

I read up on the W3C specifications regarding the DIV and SPAN tags, and
this seems to be an inappropriate use of the tag to display images
containing content requiring the alt-attribute. It appears the DIV tag is
loading a background image from an external style sheet.

Two questions:

1. Is there a way to place an alternative text attribute to communicate
information to screen-readers?

2. Is this just an improper use of the DIV tag and should developers be
made aware that this image and content should be placed using the IMG tag?

Thanks for any thoughts. I am looking for some outside reinforcement (after
dealing with some developers) as to whether I am going in the right
direction or just totally loony.

Take care,
Sean

Sean Keegan
Web Accessibility Instructor
High Tech Center Training Unit for the
California Community Colleges
Cupertino, CA
408.996.6044

From: Andrew Kirkpatrick
Date: Thu, Jan 27 2005 2:04PM
Subject: Re: question about Div tags and content images
← Previous message | Next message →

Sean,
You are correct to be concerned. If there is content in the images
then the images (or the equivalent content, as in image replacement
techniques) need to be in the HTML. If there isn't content, then the
images can be referenced in the CSS.

Sounds like the site you're looking at is doing the wrong thing.
AWK

On Jan 27, 2005, at 3:51 PM, skeegan wrote:

>
> I am starting to come across websites using DIV tags to load images
> that
> contain content. When using JAWS or Window-Eyes, both apps seem to
> ignore
> the presence of this information (not even a notification that the
> content
> is even present on the screen).
>
> I read up on the W3C specifications regarding the DIV and SPAN tags,
> and
> this seems to be an inappropriate use of the tag to display images
> containing content requiring the alt-attribute. It appears the DIV
> tag is
> loading a background image from an external style sheet.
>
> Two questions:
>
> 1. Is there a way to place an alternative text attribute to
> communicate
> information to screen-readers?
>
> 2. Is this just an improper use of the DIV tag and should developers
> be
> made aware that this image and content should be placed using the IMG
> tag?
>
> Thanks for any thoughts. I am looking for some outside reinforcement
> (after
> dealing with some developers) as to whether I am going in the right
> direction or just totally loony.
>
> Take care,
> Sean
>
> Sean Keegan
> Web Accessibility Instructor
> High Tech Center Training Unit for the
> California Community Colleges
> Cupertino, CA
> 408.996.6044
>
> ----
> To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
>
>
AWK

--
Andrew Kirkpatrick
WGBH National Center for Accessible Media
125 Western Ave.
Boston, MA 02134
E-mail: = EMAIL ADDRESS REMOVED =
617.300.4420

From: Austin, Darrel
Date: Thu, Jan 27 2005 2:10PM
Subject: Re: question about Div tags and content images
← Previous message | Next message →

> 1. Is there a way to place an alternative text attribute to
> communicate information to screen-readers?

Not in a background image.

> 2. Is this just an improper use of the DIV tag and should developers
> be made aware that this image and content should be placed using the
> IMG tag?

Yes.

What you may be seeing is poorly implemented image replacement methods:

http://www.ryznardesign.com/web_coding/image_replacement/

The concept is that you have a div with a span inside it. The span contains
the text. With CSS, you then position the text off-screen and put a
background of the text rendered as an image in the DIV. The idea is that CSS
browsers will see the image, but screen readers will still 'see' the text as
it's part of the source code.

This isn't a perfect method (the above link talks about the different
issues) of course.

The best way to test the sites these developers are showing you is to simply
open the site up in a text browser like Lynx. If you can't see any of the
content, odds are screen readers can't either (as well as rather important
things like Google bot or PDA users, etc.)

-Darrel

From: Patrick H. Lauke
Date: Thu, Jan 27 2005 2:13PM
Subject: Re: question about Div tags and content images
← Previous message | Next message →

skeegan wrote:
> 1. Is there a way to place an alternative text attribute to communicate
> information to screen-readers?

As I mentioned on the Accessifyforum, you may want to look at proper
image replacement techniques and read up on their various accessibility
issues http://www.mezzoblue.com/tests/revised-image-replacement/

> 2. Is this just an improper use of the DIV tag and should developers be
> made aware that this image and content should be placed using the IMG tag?

If the images are not purely visual fluff, then yes, one should either
use a proper IMG element or, at a stretch, a replacement technique.

--
Patrick H. Lauke
_____________________________________________________
re

From: Michael Moore
Date: Thu, Jan 27 2005 3:11PM
Subject: Re: question about Div tags and content images
← Previous message | Next message →

skeegan wrote:

>
> Two questions:
>
> 1. Is there a way to place an alternative text attribute to communicate
> information to screen-readers?

Well yes and no. You can place a clear gif over the background image
that is being loaded through the and give that the alt. This is
more of a hack to get around a problem that should not have been created
in the first place.
>
> 2. Is this just an improper use of the DIV tag and should developers be
> made aware that this image and content should be placed using the IMG tag?

Yes, you have hit the nail on the head. CSS and the element are
being used improperly in the above example. The proper way to have
placed the image would have been. <img ... alt="description of
image" ... /> If as you describe the image is just text then the
best method would be <p class="foo"
>Text Feel free to substitute your own structurally
appropriate text presentation elements. class and id are optional
attributes in the above example.

Mike

From: Tim Beadle
Date: Fri, Jan 28 2005 3:18AM
Subject: Re: question about Div tags and content images
← Previous message | Next message →


"mmoore" < = EMAIL ADDRESS REMOVED = > wrote
on 27/01/2005 22:12:51:
> Yes, you have hit the nail on the head. &nbsp;CSS and the <div>
element are
> being used improperly in the above example. &nbsp;The proper way to
have
> placed the image would have been. &nbsp;<div><img ... alt="description
of
> image" ... /></div> &nbsp;If as you describe the image
is just text then the
> best method &nbsp;would be <div class="foo" id="bar"
><p class="foo"
> &nbsp;>Text</p></div> Feel free to substitute your
own structurally
> appropriate text presentation elements. &nbsp;class and id are optional

> attributes in the above example.

Image-replacement should be used when an image is
purely presentational, and should replace (hence the name) some text that
reads the same as that in the image. It's often used for styled headlines,
logos etc.

I'd just like to point out that not all IR techniques
are the same, and the original (Fahrner Image Replacement - FIR) is now
deprecated, *precisely* because it uses display: none to hide the text,
which ends up not being read by AT devices.

There are, however, replacement Replacement techniques
(!) that have remained accessible.
Joe Clark did an article here which critiques the
FIR method and suggests ways forward:
&nbsp;- http://www.alistapart.com/articles/fir/

Douglas Bowman, the designer of the Wired.com CSS-based
redesign and who popularised FIR's use, wrote:
"The original technique (FIR) described in the
body of this article is no longer recommended for use, as it makes the
hidden text completely inaccessible for certain screen readers. Instead,
see one of the alternative techniques mentioned at the end of the article
under 'Important Notes'."
&nbsp;- http://stopdesign.com/articles/replace_text/

To the accessibility advocates I would just say that
there are a lot of standards-based designers out there that are chasing
the same goals as you, i.e. accessibility, fast page load times, well-structured
documents etc etc. Please don't write off their efforts, but rather seek
to work together to create a beautiful, semantic, accessible web.

Best regards,

Tim Beadle


Institute of Physics
Registered charity No. 293851
76 Portland Place, London, W1B 1NT, England

IOP Publishing Limited
Registered in England under Registration No 467514.
Registered Office: Dirac House, Temple Back, Bristol BS1 6BE England

This e-mail message has been checked for the presence of computer viruses.

From: Paul Bohman
Date: Sat, Jan 29 2005 8:19PM
Subject: Re: question about Div tags and content images
← Previous message | No next message

skeegan wrote:
> I am starting to come across websites using DIV tags to load images that
> contain content.

> 2. Is this just an improper use of the DIV tag and should developers be
> made aware that this image and content should be placed using the IMG tag?

I don't think the answer to your second question is as black and white
as some of the replies have made it sound. Using background images may
or may not be inappropriate, depending on how they're being implemented,
and what the purpose of the image is.

If the image is important to the content, then it will need alternative
text. The truth is that there is more than one way to provide
alternative text. The most obvious way is to use a normal tag and
type up some text for the alt attribute. This approach will satisfy the
vast majority of accessibility needs.

However, it is also possible to provide a text description of the image
in the content of the document itself, for all users to see and read. In
this case, if the tag is used, the most appropriate alt text would
be null alt text (alt=""). If the image is loaded as a background image,
then there is no need to provide an alt attribute at all. You could
argue that the image itself is purely decorative in a case like this.
Whether you provide null alt text or load the image in the background,
the functional end result will be the same.

Also, if the image doesn't require any descriptive text all--i.e. it is
purely decorative and doesn't require any kind of text description
either in an alt attribute or in the context of the page--then is there
any harm in loading it in the background? From an accessibility
standpoint, I don't think any harm is being done.

It is only harmful if the image is meaningful and needs a text
description... in which case the developer either needs to use a regular
tag (with alt text) or come up with some other way of providing a
text description of the image (in the context of the document, using an
accessible image replacement technique, etc.).

--
Paul Bohman
Director of Products and Services
WebAIM (Web Accessibility in Mind)
www.webaim.org
Utah State University
www.usu.edu