WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Making HTML text invisible to screen readers.

for

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

From: Austin, Darrel
Date: Thu, Nov 15 2007 2:10PM
Subject: Making HTML text invisible to screen readers.
No previous message | Next message →

Normally, when putting images on a web page, one sets the alt attribute
to blank for any decorative/non-content related image.

I have a situation where we're placing a random, decorative image on our
site's banner, along with a caption.

This is purely decorative (it randomly shows a picture of one of our
buildings with the name of the building). Because it's decorative, I'm
just putting it as a background image in an empty DIV. However, the
caption is text based, so has to be part of the HTML markup. Short of
having someone render all the captions as text, is there any method to
mark this as 'not important' for a screen reader?

-Darrel

From: Keith Parks
Date: Thu, Nov 15 2007 2:50PM
Subject: Re: Making HTML text invisible to screen readers.
← Previous message | Next message →

On Nov 15, 2007, at 1:06 PM, Austin, Darrel wrote:

> Normally, when putting images on a web page, one sets the alt
> attribute
> to blank for any decorative/non-content related image.
>
> I have a situation where we're placing a random, decorative image
> on our
> site's banner, along with a caption.
>
> This is purely decorative (it randomly shows a picture of one of our
> buildings with the name of the building). Because it's decorative, I'm
> just putting it as a background image in an empty DIV. However, the
> caption is text based, so has to be part of the HTML markup. Short of
> having someone render all the captions as text, is there any method to
> mark this as 'not important' for a screen reader?

In theory, this could be handled through an aural style sheet
property...

<http://www.w3.org/TR/REC-CSS2/aural.html#speaking-props>;

<span style="speak:none;">The XYZ Building</span>

But I understand aural style sheets are poorly supported still. :^(

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

(Objects on your screen may be closer than they appear)


From: Michael Stenitzer
Date: Wed, Nov 21 2007 9:30AM
Subject: Re: Making HTML text invisible to screen readers.
← Previous message | Next message →

sorry for the late reply...

On Nov 15, 2007 10:06 PM, Austin, Darrel
< = EMAIL ADDRESS REMOVED = > wrote:

> I have a situation where we're placing a random, decorative image on our
> site's banner, along with a caption.
>
> This is purely decorative (it randomly shows a picture of one of our
> buildings with the name of the building). Because it's decorative, I'm
> just putting it as a background image in an empty DIV. However, the
> caption is text based, so has to be part of the HTML markup. Short of
> having someone render all the captions as text, is there any method to
> mark this as 'not important' for a screen reader?

well, if it has an caption than i would classify it as more than just
decoration (like a rounded corner would be). so why don't you give
your blind visitors also an idea of what is shown here. blind people
also might want to get an "emotional impression" of your site, of what
you have to say and to show.

on the other hand, if it is just a photo credit, then you might render
it into the image (that's what i'm sometimes doing with important
background images). but i know, this is far from optimal.

what do others think about this?
regards, michael

--
Michael Stenitzer | WIENFLUSS information.design.solutions
www.wienfluss.net

From: Benjamin Hawkes-Lewis
Date: Wed, Nov 21 2007 9:50AM
Subject: Re: Making HTML text invisible to screen readers.
← Previous message | Next message →

Michael Stenitzer wrote:

> on the other hand, if it is just a photo credit, then you might render
> it into the image (that's what i'm sometimes doing with important
> background images). but i know, this is far from optimal.

A better approach might be to put the photo credit in a colophon. After
all, a screen reader user might need to know that information too.

--
Benjamin Hawkes-Lewis

From: Austin, Darrel
Date: Wed, Nov 21 2007 11:40AM
Subject: Re: Making HTML text invisible to screen readers.
← Previous message | Next message →

> well, if it has an caption than i would classify it as more than just
> decoration (like a rounded corner would be). so why don't you give
> your blind visitors also an idea of what is shown here. blind people
> also might want to get an "emotional impression" of your site, of what
> you have to say and to show.

It's purely decorative. It's an intranet, and it's a random picture of
one of our buildings as an element in the header graphics, with the
caption just naming the building. The caption would be something like
'County Courthouse' so pretty much described the image. Doesn't really
add to the content of the page, though.

> on the other hand, if it is just a photo credit, then you might render
> it into the image (that's what i'm sometimes doing with important
> background images). but i know, this is far from optimal.

Yea, I think that's the only viable option. Given that this is a
SharePoint site (shudder!) I'm not about to figure out how to get
dynamic image rendering working.

It was more of a curiosity question, though. Thanks for all the answers!

-Darrel

From: Andy Mabbett
Date: Thu, Jan 10 2008 12:40PM
Subject: Re: Making HTML text invisible to screen readers.
← Previous message | No next message

In message
< = EMAIL ADDRESS REMOVED = .u
s>, "Austin, Darrel" < = EMAIL ADDRESS REMOVED = > writes

>Normally, when putting images on a web page, one sets the alt attribute
>to blank for any decorative/non-content related image.
>
>I have a situation where we're placing a random, decorative image on
>our site's banner, along with a caption.
>
>This is purely decorative (it randomly shows a picture of one of our
>buildings with the name of the building). Because it's decorative, I'm
>just putting it as a background image in an empty DIV. However, the
>caption is text based, so has to be part of the HTML markup. Short of
>having someone render all the captions as text, is there any method to
>mark this as 'not important' for a screen reader?

[belated response]

Purists might wince, but you could make images of the text, a use null
alt attributes on them also.

Or why not superimpose caption on the images?

--
Andy Mabbett
* Say "NO!" to compulsory UK ID Cards: <http://www.no2id.net/>;
* Free Our Data: <http://www.freeourdata.org.uk>;
* Are you using Microformats, yet: <http://microformats.org/>; ?