デザイン,ユーザビリティ,マーケティングなどの観点からwebについて綴っていきます

Smashing Magazineの「アクセシビリティに関する記事」を読んで、やってみようと画策中なのがタイトルのそれ 。

SEOというよりは、アクセシビリティに配慮したマークアップをしようよ。ってことなので、タイトルは釣りに近いです。すんません。

早速その方法。Smashing Magazineで紹介されていた例を以下で紹介します。

たとえばロゴなんかをマークアップするとき、画像にalt属性を付けて記述したりする。
だが、これはアクセシブルでないので、テキストを含んだマークアップにしましょうよ、とまあそういうこと。

以下、マークアップ例。（サンプルはこちら）

1) アクセシビリティがよくないマークアップ

<h2><img src="logo.gif" alt="エアロパス" /></h2>

2) アクセシブルなマークアップ

<h2><img src="logo.gif" alt="エアロパス" />エアロパス</h2>

3) 2のままだと表示があれなので、ちょっと改良

.alternate{
	position:absolute;
	text-indent:-1000em;
}
<h2><img src="logo.gif" alt="エアロパス" /><span class="alternate">エアロパス</span></h2>

この方法なら、CSSオフ・画像オフの環境でも内容が読み取れるし、スクリーンリーダーもOK。おまけに検索エンジンにも優しいので、試してみる価値はあるかも。

最近、「SEOが...」と言われることが増えて色々とやってるけど、そういう細かい部分より、コンテンツが一番重要だということを忘れないでいたいものだ。

（参考記事）：
・10 Ways To Make Your Site Accessible Using Web Standards | How-To | Smashing Magazine
・ＡＬＴ属性に記述したテキストとヤフー SEOを研究するブログ
・検索結果でウェブページの表示順序を上げるには - インフォセンター - Yahoo!検索
・テキストと画像のalt属性でリンクの効果に違いはありますか？ | Web担当者Forum

固定リンク