BT

InfoQ ホームページ ニュース Web 2.0アプリケーションでは依然としてアクセシビリティが懸念されている

Web 2.0アプリケーションでは依然としてアクセシビリティが懸念されている

ブックマーク

Webサイトを確実にアクセシビリティなものにすることは、ビジネス的にも、法律的にも重要な問題である。TargetのWebサイトが視力障害者からアクセス不能になっていたため、同社は2006年、告訴された(source)。動的なページを作る上で重要な役割を果たすjavascriptがますます増加するにつれて、Webサイトをいかにしてアクセシビリティなものにしておくかという問題は、必ず考慮しなければならない。

javascriptを駆動力としているいかなる動的なWebサイトも、全世界の人々へ公開して使ってもらう前に、考慮すべきアクセシビリティのレベルが2つある。まず、javascriptを使用不可に設定している人々への対応だが、使用不可にしていてもサイトは機能するだろうか。次は障害者への対応で、障害者がサイトを利用した場合、それは障害者にとってどのようなエクスペリエンスになるのか。

1つ目のレベルは、プログレッシブエンハンスメントもしくはグレースフルデグラデーションと呼ばれる方法で対処できる。同一の解決策に対して、本質的に異なる2つの視点が存在する。プログレッシブエンハンスメントは、javascriptがなくても確実に機能するサイトにした後に、インタラクティブな機能を徐々に、控えめに追加していく、という考え方である。一方グレースフルデグラデーションではこの問題を逆から考察しており、javascriptが無効になっていても、必ず基本機能にフォールバックするサイトを作る。Christian Heilmann氏がプログレッシブエンハンスメントを利用した開発に関して素晴らしい手引きを書いており、その中でプログレッシブエンハンスメントの7つの規則(source)を概説している。この規則を要約すると、以下のようになる。:

  1. 可能な限り分離する
  2. 機能するものの上に構築する
  3. 依存マークアップを生成する
  4. 適用する前にあらゆるものをテストする
  5. 環境を調査する
  6. 要求があればロードする
  7. コードをモジュール化する

2つ目のレベルは、障害を持つユーザへの対処である。ARIA仕様書(source)と呼ばれるものを使うことにより、達成できる。インタラクティブ機能を持つhtml要素に、特定の属性を追加することを基本としている。Googleリーダーを支援するチームは最近、チームのプロダクトにこの仕様を実装し始めた(source)。その後チームは、学んだことを利用し、AxsJAX(source)というアクセシビリティ・エンハンスメントを自動注入するライブラリを作成した。jQueryライブラリのクリエータJohn Resig氏も、ページの特定部分を動的に更新するように指示するARIA属性の使用法について、簡単に説明している(source)。Resig氏は、ajaxの要求によってコードのセクションを更新させるサンプルコードとして、以下を提示している。:

        <b>Active Users:</b>
<p id="users-desc">A list of the currently-connected users.</p>
<ol aria-live="polite" aria-relevant="additions removals"
aria-describedby="users-desc" id="users">
<li>John</li>
<li>Mary</li>
<li>Ted</li>
<li>Jane</li>
</ol>

アクセシビリティなインタラクティブ・コンポーネントの開発に、ARIA仕様を利用することに関して、Filament Groupからも数種の手引きが出ている。まず、canvasタグを使ったアクセシビリティなグラフ(source)生成に関してである。表のデータを基にしているため、javascriptが無効になっていれば、うまくデグレードする。次の手引きでは、アクセスできる、非常に魅力的なスライダコントロール(source)を、javascriptを利用して作成する方法について詳述している。選択要素からのデータを使ってスライダを作成するため、javascriptがなくても、コントロールは働くし、類似の機能性を有する。両コンポーネントとも、挿入したhtmlに適切なARIA属性を自動的に追加する。別のブロガーMarco Zehe氏は、ARIAの簡単な秘訣をしたためた自らの記事2本の中で、サイト上でARIA仕様を使い始めることがどれほど容易かを説明している。1つ目の記事は、必要フィールドを表示するのに必要なariaの使い方について(source)である。2つ目の記事では、フォームのフィールドを使って「X日後に履歴を削除してください」などの文章を完成させるために、aria-labelledbyとaria-describedbyを使用する方法(source)を取り扱っている。

原文はこちらです:http://www.infoq.com/news/2008/06/aria-javascript

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。