10章「アクセシブルなJavaScript」

• 1 JavaScriptの歴史
• 2 なぜJavaScriptは悪評を立てられてしまったのか
• 3 JavaScriptについて考慮すべきこと
  • 3-1 ユーザーは何を必要としているか
  • 3-2 動的なJavaScriptのためのガイドライン
• 4 控えめなJavaScript
  • 4-1 ふるまいのレイヤーとしてのJavaScript
  • 4-2 インタラクティブ性
  • 4-3 ルック・アンド・フィール
  • 4-4 新しいウインドウ
  • 4-5 要素の可視性
  • 4-6 時代遅れのテクニックと代替方法
• 5 アクセシブルなフォームとJavaScript
  • 5-1 フォームの拡張
  • 5-2 フォームの検証
• 6 まとめ

JavaScriptのアクセシビリティ問題

ユーザビリティを阻害（3節）

• 前のページに戻れない
• ステータスバー乗っ取り
• 右クリック禁止！
• 勝手にポップアップ・ウィンドウ
• スクロールバーがない

JavaScriptが使えなければ利用できない

• 基本操作部分（ナビゲーションメニュー，ボタン）をJavaScriptで作成
• Ajax：マウス操作に依存，音声で利用できる？
• Googleアプリケーションのアクセシビリティ問題などなど

著者の主張

出しゃばらない（控えめな）JavaScript
－JavaScriptを利用できる時はユーザの利用体験を向上させる－

• ユーザがJavaScriptを利用できる・有効にしていることを仮定できない
  • noscriptでは不十分！
• ユーザ環境（ブラウザ，画面サイズ）を仮定できない
  • Web標準に従う
• よいコード例を示す
  • DOMの利用方法（4-1項）
  • 正しいコーディング作法(10章全体)
  • 適切な，ポップアップウィンドウの作り方（4-4項）
  • 適切な，要素の隠し方（4-5項）
  • アクセシブルなフォームの作り方（5節）

3-2項 動的なJavaScriptのためのガイドライン

• ブラウザではなく，標準に従う
• 基本的なマークアップはJavaScriptに依存すべきではない
• HTMLを生成するときは，HTMLを書くときと同じルールに従う
• ユーザとユーザーエージェントの制限に注意する
• やりすぎない方がいいこともある
• あまり多くの決まりごとを無視しない
• アクセスするものすべてをテストする
• すべてを分離しておく

正しいコーディング作法の例

p349：DOMやオブジェクトを利用できることを確認．キーボードでも操作可能

function addMagic() {
  // DOMやh1オブジェクトを利用できることをまず確認
  if ( !document.getElementById || !document.createTextNode )
      { return; }
  var h1=document.getElementById('home');
  if ( !h1 ) { return; }
	
  // 関数を呼ぶイベントハンドラを適用
  h1.onmouseover=doJSMagic;
  h1.onclick=function() {
    doJSMagic();
    moreSpells();  // 複数の関数をイベントハンドラに適用することも可能
    return false;
  };
}

4-1項 構造，表現，ふるまいの分離

p346 「図10-3 Web製作の3つのレベル」

• HTML：構造
• CSS：表現
• JavaScript：ふるまい

DOMを使えば，JavaScriptとHTMLやCSSを分離できる．

分離の例

DOMを使えば，JavaScriptとHTMLやCSSを分離できる．

• p345のコード例：（あまりよい例ではないが...）

  var f=document.getElementById('contactform');
  if (f) {
    f.setAttribute('action','otherscript.php');
  }
  

• JavascriptでCSSのclass名を変えて，メニューやサブツリーなどを表示・非表示する．（どう見せるかはCSSで指定）

ふるまいのレイヤーとしてのJavaScript

• プログラミングが可能
• インタラクティブ性の強化（5節）
• HTMLもCSSも制御可能
• 適切なポップアップ・ウィンドウを生成可能（4-4項）

さて，

この本を離れて，動的なWebサイト(RIA)のアクセシビリティの最新動向を紹介する．

Accessible Rich Internet Applications関連情報

• Becky Gibson："Enabling an Accessible Web 2.0"(PDF)，W4A2007
  上記論文の要点を日本語でまとめた資料
• W3CのWAI-ARIA Overview
  • WAI-ARIA Roadmap
  • WAI-ARIA Roles
  • WAI-ARIA States and Properties
• Mozillaの開発者向けARIA情報
• 渡辺のソーシャルブックマーク
• Universal Web（渡辺）

WAI-ARIAの概要

WAI-ARIAの主な3ポイント

role属性とstate属性の付与

部品のsemantic情報（部品の役割と状態）を支援技術に伝える（例参照）

live region：

部品が変化した際に支援技術がどう対応するかを指定（例参照）

tabindex

全要素にタブキーでフォーカス．タブオーダーを制御．カーソルキーなどでも制御．

WAI-ARIAを利用できる支援技術

上記に示すWAI-ARIAを利用できる支援技術は少ない．

• Firefox：2.0から対応開始
• Windows-Eyes＋FF：最も対応が進んでいるが日本語版はない
• JAWS＋FF：対応しつつある．日本語版もある．
• Fire Vox（Firefox音声化アドオン）：Live regionに積極的に取り組んでいる．日本語も使える．
• その他

Window-Eyesによるroleやstate利用

<span role="wairole:treeitem" expanded="true" tabindex="-1" >Penguins</span>

例：Window-EyesとFirefoxによるツリー構造の読み上げ

• AntArcticにフォーカス：AntArctic closed one of two tree view.
• 矢印キーを押すとツリーが開いて：AntArctic expanded tree items one of two tree view.
• 下矢印キーを押すと、Penguinsノードにフォーカスが当たり：Penguins closed one of three depth two.

Fire VoxによるLive Region利用

「Universal Web」に情報をまとめています．

• 「Fire Voxのインストールと使い方」
• 「Fire Voxを用いたLive Regionのテスト」

デモ：Fire VoxがLive Regionをどう処理するか

Google RIAのケーススタディ

前回のセミナーでは，福祉情報工学研究会・ヒューマンインターフェース学会合同研究会（2007年12月）の松田の発表の一部を紹介．

Google RIAの問題点：

• 基本操作：キーボードでは操作できないボタンやメニュー
• 文字入力：支援技術を使うと文字入力ができない
• ドロップダウンメニューの表示・非表示に伴うソースの処理が不適切なので，音声利用ユーザが混乱
• 動的なWeb：変化に気付かない or 変化に気付いてページ先頭から読み上げる

詳細は，松田理沙：「JavaScriptを利用した動的なWebのアクセシビリティ －Googleのケーススタディ－」，2007年度卒業研究．

おわりに

• 研究：何が問題で、どう解決すればよいのか（人間の認知）
• Web標準（3層の分離）：HTML、CSS、JavaScript
• コンテンツの制作者：アクセシブルなライブラリ、ガイドライン、コーディングのGood Practice
• 技術仕様：WAI-ARIA、IAccessible2
• 支援技術：IE、FF、...、スクリーンリーダ、音声ブラウザ
• ユーザ：RIAの理解、支援技術操作のスキル

Ajaxを初めとするRIAのアクセシビリティへの取り組みは始まったばかり。
（日本の）支援技術の向上が急務。

このスライドの公開URL： http://www.comm.twcu.ac.jp/~nabe/UAI/20071220/nabe/

『Webアクセシビリティ』

I. Webアクセシビリティの影響 Webアクセシビリティ入門，法律とガイドライン，実装 II. アクセシブルなWebサイト実装 技術の概要，支援技術 コンテンツ，ナビゲーション，データ入力，CSS，JavaScript，Flash，PDF アクセシビリティ・テスト，WCAG 2.0，ケーススタディ III. 法律と政策 米国と世界 付録 用語集，リハ法508条，PAS78，日本のスクリーンリーダー，日本の最新動向

毎コミの書籍紹介 UAI研究会