Display: none

Hello,
 
I was just wondering what peoples thoughts were on the use of the css
property "display: none" to provide content to screen readers that's
hidden from visual browsers.
 
The context that I was planning to use this, was to hide h1 text titles
from visual browsers by using the display: none property to hide them
and replacing them with graphical titles displayed using the css
background property.
 
So for example;
 
HTML
 
<h1><span class="hidethis">This is my title</span></h1>   
 
CSS
 
h1 {
    background: url("images/this_is_my_title.gif");
    width: 150px;
    height: 20px;
}
 
.hidethis {
    display: none;
}
 
My belief is that this would render the graphical image of the title in
visual browsers like Internet Explorer etc. and the text h1 title in
screen readers and browsers with CSS turned off. I'm I correct in making
this assumption? What are people's opinion on this methodology?
 
Many thanks in advance of any help anyone can offer,
 
Mike 

Kind regards.

--

Mike Costello
Senior Developer
Latest News: The Royal Armouries appoints HMA. Go to http://www.hma.co.uk/latest.asp#84 for more information. 

HMA Designed Solutions
The Coach House
51 Sackville Street
Barnsley
South Yorkshire
S70 2BZ

t: 01226 209 450
f: 01226 209 451
e: mike@hma.co.uk
w: www.hma.co.uk

This email should not be used by anyone who is not an original intended recipient. Nor may it be copied or disclosed to anyone who is not an original intended recipient. If you have received this email by mistake please notify us by emailing the sender, and then delete the email and any copies from your system. E-mail transmission cannot be guaranteed to be secure or error free as information may be intercepted, corrupted or contain viruses. HMA. nor the sender accepts any responsibility for viruses contained in this e-mail. It is your responsibility to scan the e-mail and any attachments for viruses.

Liability cannot be accepted for statements made which are the sender's own and not made on behalf of HMA.