アクセシビリティとSEOを考慮したポップアップウィンドウ

• 2009年5月 7日 09:01
• JavaScriptSEOアクセシビリティ

Tweet

そもそもポップアップウィンドウはアクセシブルじゃない

アクセシビリティに少なからず関心を持っている方は、まず「アクセシビリティを考慮したポップアップウィンドウ」というタイトルに違和感を感じるかもしれません。アクセシビリティを考慮するならば、そもそもポップアップウィンドウ(別ウィンドウ)を使わない方がよいからです。

しかし、案件上ポップアップウィンドウを使わざるを得ない場合もあるでしょう。これから紹介する方法は、その時にできる限りアクセシビリティを保つための方法です。

通常のポップアップウィンドウ記述

よく使われるポップアップウィンドウの記述は、下記のようにJavaScriptを使います。

<a href="javascript:void(window.open('popup.html','',''));">

• ポップアップウィンドウ デモA

この記述ですとJavaScriptを無効にしてある場合、なにも起こりません。リンクがあるのに何も起こらないというのはかなり不親切です。ついでにポップアップウィンドウ先のページが検索エンジンに登録されません。検索エンジンのクローラーがJavaScript経由のページを見つけることができない(できにくい)からです。

アクセシブルなポップアップウィンドウ記述

JavaScriptが無効になっていてもリンクが機能する記述は下記になります。

<a href="popup.html" target="open" onclick="if (window.open) { window.open('popup.html','open',''); return false; };">

• ポップアップウィンドウ デモB

この記述であれば、JavaScriptが有効であればポップアップウィンドウが開き、無効であれば別ウィンドウでリンク先が開きます。そしてa要素でリンクが張ってありますので、検索エンジンに登録されます。SEOも考慮することができるのです。

通常のポップアップウィンドウに比べるとソースは長くなりますが、受ける恩恵を考えるとたいした問題にはならないと思います。一度おためしあれ。

Tweet