WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: media types; css


From: pixels 256
Date: Apr 23, 2009 1:10PM

Sorry for the confusion. Both "Hello1" and "Hello2" refer to the company

linewave.gif is a graphic file for the web that shows a jumbled graphic of
the company name; it looks aesthetically pleasing and is meant for only
those with "normal" web browsers. I want the webpage to look as clean as
possible, so I don't want any visitor to see both linewave.gif and the
company name ("Hello").

blank.gif is a "place-holder" for the company name ("Hello"); it is
transparent. I used it so visitors with a screenreader or Lynx will be able
to "see" the name of the company ("Hello").

When the page is printed, I only want "Hello" (i.e. "Hello2") to print but
not the linewave.gif.

I'm new to all this, so any help would be much appreciated. Thanks!

2) I want to toggle between a cool background image (say, linewave.gif)
for the screen and some (replacement) words in print.

For the XHTML, I have -

<div id="logo">

<img src="graphics/blank.gif" height="72px" alt="Hello1" />


<div id="title">



For its CSS, I set #title {display:none} for screen.css and #logo
for print.css because I don’t want the redundancy of having both “Hello1”
and “Hello2” read by a screenreader. Can those who use a screenreader (or
visitors who choose to have images turned off) be able to view the
alternative text in the <img> tag on their screen?