アクセシビリティ』の最近のブログ記事

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
ALT属性に記述したテキストとヤフー SEOを研究するブログ
検索結果でウェブページの表示順序を上げるには - インフォセンター - Yahoo!検索
テキストと画像のalt属性でリンクの効果に違いはありますか? | Web担当者Forum