Trans

NPOやソーシャルビジネスの創業・経営・マネジメント

WAI-ARIAの基本(Re:Creator’s Chat 1stで話したこと)

9月27日に開催されたRe:Creator’s Chat 1stも資料が公開されたことなので、自分が話したことをアウトプットします。パワポのスライドもたった5枚ですし、話した時間も5分間という短い時間ですので、ざっと見ていただくにはちょうどよいかも。以下は実際に自分が話したときのメモをちょっと整理したものです。

スライド1枚目

  • 視覚障害者は音声ブラウザやスクリーンリーダーを使う
  • HTMLの構造順に読み上げていく
  • Webは今まではクリック、移動、フォームに入力くらいしかなかったが、Google Mapsに代表されるAjax系サービスから変わってきた
  • Webのアプリケーション化とともにデスクトップソフトと同じ使い勝手ということでリッチなWebサービスが増えた
それに伴う課題
  1. 音声読み上げソフトがどのコンテンツが動的に変わったかを把握できない
  2. ツリー型のナビゲーションにキーボードだけではフォーカスできない
  3. それらのコンテンツが何を表しているのかを表現すべき方法がない

スライド2枚目

  • Twitterの投稿制限の文字数
  • 動的に入れ替わる
  • 視覚障害者が把握する手段がない

スライド3枚目

WAI-ARIA
  • Web Accessibility Initiative-Accessible Rich Internet Applications
  • W3Cの仕様、HTMLとかCSSみたいなもの

WAI-ARIA(Accessible Rich Internet Applications) とよばれる仕様群は、WebコンテンツおよびWebアプリケーションを障がい者ユーザーにとってよりアクセシブルにする方法を定義するものです。特に、 Ajax、HTML、JavaScript、そしてそれらに関連する技術を用いて開発された、動的なコンテンツや先進的なユーザーインタフェースのコントロールに役立ちます。

http://www.hitachi.co.jp/universaldesign/wai-aria/Overview/intro-aria.html

スライド4枚目

<a href="hoge" title="投稿する" role="button"><img src="post.gif" alt="投稿する"></a>

単なるリンクにrole属性でbuttonの役割を与える

<input type="image" src="off.gif" alt="太字" role="button" aria-pressed="false">
<input type="image" src="on.gif" alt="太字" role="button" aria-pressed="true">

ブログの記事投稿の際にあるような太字にするボタン。押しているか、押していないかを判断できる。

<span aria-live="polite">140</span>

ユーザが現在の活動を終わらせた後で変化をアナウンスする。例えば、140文字から120文字など。

スライド5枚目

まだ草案だけど、勧告までどんどん近づいているよ!

感想

と、WAI-ARIAを知っている人にはもう当たり前の内容かもしれませんが、このあたりを話しました。コードとかはWAI-ARIA It's Easyというプレゼンを参照ください。
いや、それにしてもRe:Creator’s Chat 1st、面白かった!僕みたくWebから情報をインプットすることに時間を割いている人間はどうも自分の関心分野ばかり深掘りしてしまって、新しい分野の知識をインプットすることを疎かにしてしまう傾向があるんですけど(僕だけ?)、あまり見聞きしたことない話を聞くのも面白いですね!
hilokiさんをはじめ中心で運営された皆さん、そして同じく話された皆さん、お疲れ様でした!
で、僕はというと、終電逃してこんな目に遭っていました(笑)