h1要素にimg要素を入れ，alt属性で

<h1><a href="http://blog.d-spica.com/">
  <img src="http://blog.d-spica.com/img/bg-logo.gif" alt="d-spica">
</a></h1>

これが最も簡単な方法でしょう。タイトルはalt属性に書き入れます。でも，検索エンジンのクローラーや音声ブラウザが，alt属性のテキストとh1要素に直に入っているテキストを同じように扱うかは保証できません。

text-indentで外に出す

ぼくが今やっている方法は，HTMLのほうは

<div id="header">
  <h1><a href="http://blog.d-spica.com/">d-spica</a></h1>
  <p id="discription">discription</p>
</div>

として，CSSのほうでこのテキストを画面の外に出すものです。画像は背景として入れてあります。

#header {
  position: relative;
  height: 98px;
  background: url(http://blog.d-spica.com/img/bg-logo.gif) no-repeat;
}

h1 a {
  display: block;
  position: absolute;
  top: 50px;
  left: 60px;
  width: 135px;
  height: 48px;
  text-indent: -9999px;
}

h1の中のa要素をブロックにして左上からの位置と幅・高さを設定します。a要素はふつうインライン要素ですから，なかみ（テキストや画像。ここだと「d-spica」というテキスト）のある部分しかリンクは効きませんが，こうすると135×48pxの領域でリンクが効くようになります。で，ブログタイトルのテキストはインデントを思いっきりとって，この領域の外に追いやってしまいます。

HTMLソースにはh1要素に「d-spica」というテキストが入っているので，検索にもかかるし，音声ブラウザでも読み上げてくれると思います。アクセシビリティ上もさほど問題はないかと思います。が，text-indentでテキストを画面の外にとばす手法がSEOスパムにあたらないか，というところは今後の様子を見ておく必要があると思います。

h1要素を隠す

h1 {
  visibility: hidden;
}

という方法もありますが，検索エンジンのクローラーや音声ブラウザが，隠された要素も解析の対象にするかは保証できません。アクセシビリティ上の問題を起こす可能性や，SEOスパムと判断される可能性も否定できません。display: none;とするとh1要素がないものとして扱われるので，さらに問題ありです。

overflow: hidden;で下に隠す

#header {
  height: 98px;
  overflow: hidden;
  background: url(http://blog.d-spica.com/img/bg-logo.gif) no-repeat;
}

h1 {
  margin-top: 100px;
}

という方法もあります。div id="header"部分の高さを決めておいて，そこに入らない分は隠すという設定です。h1要素そのものにvisibility: hidden;をあてるよりも，アクセシビリティ上の問題はないでしょう。

アクセシビリティを確保しながらデザインもかっこよくするには，ちょっと工夫が必要ですね。今のところ，text-indentで外に出すか，overflow: hidden;で下に隠す方法がよいかなと思っています。

追記　2007-05-19

画像置換について，あまり薦められない趣旨のエントリを書きましたので，参考にしてください。

• 画像置換の問題点