JavaScript and Accessibility (2).

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

今回の例は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ライクな実装だって可能である。

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

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

---