ちょっとアクセシブルになるエレガントなjQueryスライダー[js]

Fancy FAQs with jQuery Slidersのエントリーを読んで、こうすればさらにアクセシブルになるのではないかと思いましたので、ちょっとだけ書かせて頂きます。

Fancy FAQs with jQuery Slidersのデモページを見てもらったら、すぐにわかると思いますが、何かの要素をクリックすると、ゆっくりとスライドしながら文字などが表示されるようなテクニックってよくありますよね。

今回、このFancy FAQs with jQuery Slidersを見て、こういう風にマークアップするだけで、Ajaxのコンテンツをアクセシビルにできるのです。

使うHTMLは、label要素です。

label要素

label要素とは、フォームのコントロール部品の各部が何であるかを示すもので、識別子として使われます。

ですので、Fancy FAQs with jQuery Slidersのような、質問内容に対して、回答が動的に表示されたりするコンテンツを識別されるので、スクリーンリーダを使っているユーザにとって非常に有効的になるのです。

元のHTMLソースコード

<h3>This is question 1?</h3>
<div>
	<p>This is the answer to question #1.  Pellentesque habitant morbi....</p>
</div>
<h3>This is question 2?</h3>
<div>
	<p>This is the answer to question #2.  Pellentesque habitant morbi....</p>
</div>

label要素を用いたHTMLソースコード

<h3><label for="q1">This is question 1?</label></h3>
<div id="q1">
	<p>This is the answer to question #1.  Pellentesque habitant morbi....</p>
</div>
<h3><label for="q2">This is question 2?</label></h3>
<div id="q2">
	<p>This is the answer to question #2.  Pellentesque habitant morbi....</p>
</div>

一応、自身で「label要素を用いたHTMLソースコード」で動作したことを、確認をしましたが、Fancy FAQs with jQuery Slidersの動作を保障するものではありませんので、一応、ご注意ください[無責任]。