prog*sig

■14.0 Introduction

Accessible Rich Internet Applications (ARIA)

• ARIA ロール、状態、およびプロパティの UI オートメーションへのマッピング
• Accessible Rich Internet Applications - MDC
• WAI-ARIA 1.0 User Agent Implementation Guide

Webはリッチになったのでアクセスビリティを保つためには
音声ブラウザ-スクリーンリーダー。

• NVDA日本語化プロジェクト - NVDA Japanese Users | Google グループ
• GW Micro - Window-Eyes
• Orca - GNOME Live!
• Firefox Accessibility Extension Documentation: Overview and Installation

障害と言ってもいろいろあるが次の範囲をサポートすれば大体OK。

• 視覚障害 色弱者など
• 聴覚障害
• 運動障害 マウスが使えないなど
• 認識機能障害 アルツハイマーなど

ARIAはHTML5のD&Dイベントについても話し合ってるよ。

■14.1 Displaying a Hidden Page Section

Assistive Technology devices - Google 検索AT devices.
要素を隠すときにdisplay:noneとするとドキュメントのレイアウトから完全に消える。
完全に消えるとは、他の要素(子ノードをのぞく)に影響を与えなくなることを指す、visibilityは他の要素に影響を与えるのでレイアウトからは消えてない。
また上記の音声ブラウザのようなATデバイス向けにaria-hiddenという属性が存在する。
aria-hiddenがtrueだと要素は非表示状態であり、読まれません。
falseの場合(デフォルト)要素は表示してあり、読まれます。(音声ブラウザ)

var msg = document.getElementById("msg");
msg.style.display="block";
msg.setAttribute("aria-hidden", "false");
// and hide it, when not:
var msg = document.getElementById("msg");
msg.style.display="none";
msg.setAttribute("aria-hidden", "true");

前にも言ってたけど、JavaScriptオフの場合を考えると最初から要素を隠しておくのは適切ではない。

■14.2 Creating an Alert Message

AT devicesにもalertするには、要素のrole属性にalertと入れて明示的にすればいい。
The Roles Model | Accessible Rich Internet Applications (WAI-ARIA) 1.0

■14.3 Highlighting Form Field with Missing or Incorrect Data

入力ミスを促すエラー表示
onblurに入力をチェックする処理を付ける。
エラーになっているフォームをハイライトするのはよくあること。
またエラーになってるという情報を埋め込むことも大事で、ATデバイスに対してはaria-invalidをtrueにすることでどの要素が間違っているのかを通知できる。
まとめると

1. エラーになってるフォームを強調+aria-invalid=trueを付ける
2. submitボタン付近に何がエラーになってるのかを表示

もう一つのアプローチとして、onblurではなくすべてのフォームを埋めてsubmitしたタイミングでエラー表示する事もある。
これはマウスよりもキーボードを主体とする人たちにフレンドリー。
(いちいち表示されるといらいらするって事かな?

■14.4 Adding Keyboard Accessibility to a Page Overlay

キーボードのアクセスビリティ。
マウスクリックで写真をlightboxするのと同じ機能を、Enterキーを押した場合にもできるようにしている。またEscキーで戻れるようになっている。

// mouse click on image within link
function imgClick() {
    var img = this.firstChild;
    expandPhoto(img.getAttribute("data-larger"));
    return false;
}
// key press on image within link
function imgKeyPress(evnt) {
    evnt = (evnt) ? evnt : ((window.event) ? window.event : "");
    var keycode = (evnt.which) ? evnt.which : evnt.keyCode;
    if (document.getElementById("overlay")) {
        if (keycode == 27) {//esc
            restore();
            return false;
        }
    } else {
        if (keycode == 13) {//enter
            var img = this.firstChild;
            var src = img.getAttribute("data-larger");
            expandPhoto(src);
            return false;
        }
    }
}

また、lightboxした時画像の tabindex=-1をセットしている。これをすることでキーボードフォーカスをセットしている。

• Overlay

■14.5 Creating Collapsible Form Sections

折りたたみフォーム
aria-expanded=falseでたたんだ状態。

function switchDisplay() {
  var parent = this.parentNode;
  var targetid = "panel_" + this.id.split("_")[1];
  var target = document.getElementById(targetid);
  if (this.getAttribute("aria-expanded") == "true") {
    this.setAttribute("aria-expanded","false");
    target.style.display="none";
    target.setAttribute("aria-hidden","true");
  } else {
    this.setAttribute("aria-expanded","true");
    target.style.display="block";
    target.setAttribute("aria-hidden","false");
  }
  return false;
}

■14.6  Displaying a Flash of Color to Signal an Action

色の点滅で削除に成功かエラーか。
red:成功、yellow:エラー
要素を色づけしてフェードする。

var fadingObject = {
    yellowColor: function(val) {
        var r = "ff";
        var g = "ff";
        var b = val.toString(16);
        var newval = "#" + r + g + b;
        return newval;
    },
    fade: function(id, start, finish) {
        this.count = this.start = start;
        this.finish = finish;
        this.id = id;
        this.countDown = function() {
            this.count += 30;
            if (this.count >= this.finish) {
                document.getElementById(this.id).style.background = "transparent";
                this.countDown = null;
                return;
            }
            document.getElementById(this.id).style.backgroundColor = this.yellowColor(this.count);
            setTimeout(this.countDown.bind(this), 100);
        }
    }
};
// document.getElementById("one") => fade
fadingObject.fade("one", 0, 300);
fadingObject.countDown();

何か突然bind使ってるのでそのままだと動かないけど。
この色をfadeで変えるとき、原色から白色にするのでは無くて少しずらした値から変化させる方が自然。

■14.8 Live Region

定期的にアップデートされるエリアの定義
ARIAではARIA Live Regionsというものがあり、ページをロード後に変化する場所を示せる。

<ul id="update" role="log" aria-alive="polite" aria-atomic="true"
aria-relevant="additions">
</ul>

属性の説明
role=logはアップデートログをpollingする要素に付ける。
aria-liveのエリアがpoliteというのはクリティカルなアップデートではない場所を示す。
aria-live=assertiveは重要な更新場所であることを示し、スクリーンリーダーは作業中の事(他の部分を読み上げなど)を中断してそこ読み上げる。
aria-atomic=trueなら新しく追加された部分だけを読み上げます。falseだと毎回全部読み上げるのでうるさい。
aria-relevantがadditionsに設定(デフォルト)されていると追加の時のみに変化をATデバイスに伝える。他にもremovalsやtext、allがある。

• WAI-ARIA導入（日本語訳） - TRANS

ちょっと他では見かけないAccessible Rich Internet Applications (ARIA)について結構書いてあった章だった。
この著者はアクセスビリティについて結構訴えてる文が多いので、そういう視点でこの本を読むのもありだろう。
またJavaScriptを書いているときにこういう時にどういう名前にするべきかを決めるときにARIAは参考になるかもしれない。

• jQuery UI に見る WAI-ARIA の実装：dialog 編 - アークウェブアクセシビリティWiki
• 第1回 FF3、IE8が対応！これがWAI-ARIA | Think IT
• HTML5 + WAI-ARIA: 入門篇 - terkel.jp