« JavaScript and Accessibility (1). | トップページ | JavaScript and Accessibility (3). »

2006-06-18

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

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

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


|

« JavaScript and Accessibility (1). | トップページ | JavaScript and Accessibility (3). »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/49009/10571440

この記事へのトラックバック一覧です: JavaScript and Accessibility (2).:

« JavaScript and Accessibility (1). | トップページ | JavaScript and Accessibility (3). »