text-indent:-9999px;の代替手法

サイトのロゴのH1やトップに戻るボタンなど、テキストを表示させずに画像のみを表示させたときがあります。でも、SEO対策のチェックを受けたりすると、**「aタグに有効なテキストがありません」**みたいに指摘されることがあります。

ちょっと古いやり方だと、text-indent:-9999px;を使って視覚エリアの外に文字を配置して、事実上みえなくする手法が取られていましたが、最近は以下の方法が流行っているみたいです。

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

説明としたら、文字列を折り返さず、コンテンツの幅100%までずらし、はみ出ている部分は非表示にするといった感じです。ややこしいやり方ですが、でもこれでペナルティは回避できるので気にって使っています。