読者です 読者をやめる 読者になる 読者になる

WAI-ARIA クライアントサイド野郎向けまとめ

WAI-ARIA HTML JavaScript

何これ

Web Accessibility Initiative(WAI) が作った Accessible Rich Internet Applications(ARIA) のためのご提案。(X)HTML 上で動く RIA をターゲットにしているので当然 (X)HTML に属性を追加しようとするもの。

※「HTML 文書をアクセシブルにする」ためのものではない。RIA は前提として JavaScript でビヘイビアが記述されるので「JavaScriptオフ」というのは基本想定外(と思う)。
※ちなみに、ほとんどのスクリーンリーダは JavaScript を普通に処理します。

今更 HTML4 と XHTML1.0 に属性付けられるの? Valid じゃないのでは?

Embedding Accessibility Role and State Metadata in HTML Documents 参照。

HTML4

JavaScript で付けよう。と書いてあります。

XHTML1.0

XHTML1.0 は XML 名前空間だけあってモジュール機能はないのでやっぱり今更くっつけられん。JavaScript で付けよう…と言うと思ったら、名前空間で切って(例はなんかよくわからないやり方でやってるんですけど)使えば、とのこと。でもたぶん、それは XML としてはいいけど XHTML1.0 では無くなる気が。別に DOCTYPE はずしたりオリジナルでもいいんですが。それでブラウザが互換モードに落てもね。

XHTML1.1

モジュール追加して好きなように。

どうやってアクセシブルに?

UA が理解できるように、ふるまい方役割といったメタ情報を要素に付加する。あるいはあるHTML要素を用いて作ったあるコントローラが、いったいどんな状態にあるのかを明示させておく。ページ表示後に、スクリプト等によって更新されるような要素(ライブな要素)も、そうであることを UA に教え、内容に更新があれば通知する。

役割にはどんなものが?

役割リスト

  • alertdialog
  • slider
  • button
  • tree

これらを role 属性の値として取り、UA にふるまい方を通知する。

僕スライダー。最大50で最小0。今は33です。
<span role="slider" valuemin="0" valuemax="50" valuenow="33"></span>

※Valid じゃない HTML4

ふるまい方だけじゃなく、ページ内での役割的な role も

  • banner
  • search
  • navigation
  • main

※この辺りは XHTML Role Attribute Module で定義されてるものを引き継いでる感じ。ARIA っぽくないですもんね。

僕バナー
<div role="banner">Flashなんか置いちゃったりして。</div>

HTML5 ではどうなるの?

よくわかってない。無いんじゃないかなあ…。HTML5 では ARIA みたいにパッチじゃなくて、もっとちゃんとした姿で含まれるって話。

じゃあどうすれば?

RIA を作るならライブラリ使うだろうから、そいつに任すのが正解。

dojo が既に最高。YUI はもうちょっと。jQuery とか Prototype は足回りなので目的が違うけど、jQueryUI は実装中。足回りライブラリだけを使ってその上のUIコンポーネントやらウィジェットやらといわれるものを自分で作る人は、自分でやらねばならない。ふぬぬ。あ、ページ役割モノは今すぐにでもできるからやっちゃえば?。とは WAI の弁。

UA の対応は?

ブラウザ
  • IE8
  • FF3
  • Opera9.5

Webkit は「やるやる」って言ってる。

スクリーンリーダ

IE の出力をすくってる系」じゃない有名どころは対応しているらしい。すくってる系は、IE8 がその辺りもメッセージ出力するようになれば、いけるらしい。すいません調査足りてません。