アルファサード株式会社 代表取締役 野田 純生のブログ


JavaScript and Accessibility (2).


公開日 : 2006-06-18 01:27:32


さて、レガシーなブラウザに対する配慮について書いてみよう。

今回の例はMac IE5について。

※MacIE5の話としてだけ見るかどうかはお任せする。言いたいのはそういったことではない。考え方である。

XHTML:

<div id="canvas"><!--Ajax実行結果を挿入する場所--></div>
<noscript><p>代替要素</p></noscript>
JavaScript:

try{ //XMLHttpRequest対応ブラウザ向けの処理 }catch(exception){ //エラーが発生した時の処理 var UA=navigator.userAgent; var UAName=navigator.appName; if((UA.indexOf('Mac') !=-1) && (UA.indexOf('MSIE 5')!=-1) && (UAName=='Microsoft Internet Explorer')){ //MacIEの処理。この例では noscript要素の内容をそのまま id="canvas" の中に放り込む var alt=document.getElementsByTagName("noscript"); document.getElementById('canvas').innerHTML=alt[0].innerHTML; } }

IE/Firefoxの場合はこの方法でnoscript要素にアクセスできるが、Safari/Operaではアクセスできない。そのあたりの配慮は必要。また、IE以外ではinnnerHTMLをそのまま放り込んでもタグを認識してくれないケースがある。

そもそもnoscriptである必要はなくて、非対応UAに対しては「普通に」その機能を提供しつつ、Ajax対応UAではリッチに、という考え方をする方が望ましいと思う。

<div id="canvas"><p>代替要素</p><!--Ajaxが正しく実行されたら実行結果と置換する--></div>

ちなみに、MacIEの場合 IFRAME を使ってそれっぽい処理を作ることもできる。OBJECT要素ではなく IFRAME を使うのが良いかどうかはともかくとして。

この点については以下のページにサンプルがある。 http://developer.apple.com/internet/webcontent/iframe.html

簡単な例で説明する。以下のようなIFRAMEを用意しておくか、動的に生成する。

<iframe id="RSIFrame"
  name="RSIFrame"
  style="width:0px; height:0px; border: 0px"
  src="server.html"></iframe>

フレームのドキュメントへは document.frames['RSIFrame'] のようにしてアクセスできる。

IFRAME内のソースがロードされたかどうかはフレーム内文書の onload イベントで判別できるから、 Ajaxライクな実装だって可能である。

まぁ、ここまでするかどうかはどもかく (というかやらなくても良いと思う)。

エラーに対して寛容であることが大切なのだ。




このブログを書いている人
野田純生の写真
野田 純生 (のだ すみお)

大阪府出身。ウェブアクセシビリティエバンジェリスト。 アルファサード株式会社の創業者であり、現役のプログラマ。経営理念は「テクノロジーによって顧客とパートナーに寄り添い、ウェブを良くする」。 プロフィール詳細へ