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

TRANS

神戸のNPOやソーシャルビジネスの創業・起業のお手伝い

TwitterでWAI-ARIAの雰囲気を理解する

日記 ユーザビリティ・アクセシビリティ

(追記2008年9月5日)属性のことをタグと書き間違えていた箇所を修正しました。(id:kitsさんより)

Twitterの投稿文字数の制限というのはWAI-ARIAを理解する上で手っ取り早いサンプルだと思います。

@media 2008のプレゼンテーション資料

今年5月29日と30日にロンドンで行われたらしい@media 2008で、WAI-ARIA: It’s Easyというプレゼンが行われました。スライドも公開されています
僕にとってWAI-ARIAというのは直感的に理解しにくいという面があったので、このブログでもあまり取り上げてこなかったのですが、このスライドの事例が自分にとって「ストン」と腑に落ちる部分があったので紹介します。

Ajaxとスクリーンリーダーの課題

WebサイトでAjaxの導入が進むに連れて、スクリーンリーダーが対応できないという課題がいろいろと出てきています。そのあたりの課題はWeb標準の日々のときの梅垣さんのスライドで詳しく紹介されています。何が問題なのかをざっくりと言ってしまうと、

  1. ユーザが変化したコンテンツにアクセスできない
  2. ユーザが変化したコンテンツに気づかない

ということです。当記事ではこの2番目の問題にフォーカスします。そこで、Twitterを事例にします。

Twitterのユーザの画面はこんな感じですね。赤丸したところ(テキストボックスの左側にある数字)は可能な投稿文字数がカウントされています。ユーザが文字を入力するごとに字数が減っていき、140文字を越えるとマイナスの表記になります。僕たちのように視覚でコンテンツを把握できるユーザはそれを見ながら、投稿可能な文字数を把握できます。
では、スクリーンリーダーユーザのように視覚でディスプレイを見ることができない場合はどうなるでしょうか。そうです、文字数を把握できないのです。
そこで、WAI-ARIAの出番です。

WAI-ARIAマークアップ

例えば、Twitterのその文字数のマークアップがこんな感じだとします(実際は違いますが)。

<span>115</span>

WAI-ARIAを使った場合はこんな感じです。

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

見たこともないタグ属性が入りましたね。この属性はAccessible Rich Internet Applications (WAI-ARIA) Version 1.0で定義されているところによると、

  • off:ユーザにコンテンツが変化したことを伝えない
  • polite:ユーザが現在のアクションを終わらせた後でその変化を伝える
  • assertive:UAがユーザのアクションに割り込んで伝える。しかし、それはすぐではなくてよい
  • rude:UAがユーザのアクションに割り込む

というようになっているようです。この場合はユーザが投稿の入力フォームから別の箇所にフォーカスを移動させた際に何らかの形でUAがユーザにその文字数を伝えるということになるようです。
これで、スクリーンリーダーのユーザもコンテンツにアクセスすることができるということになります。アクセシブルなAjaxが完成というわけです。WAI-ARIAの何となくの雰囲気は掴めましたか?

注記

ちなみに、冒頭で紹介したスライドの日本語訳が必要な方はTwitter / aratakojima、もしくはaratakojima@gmail.comあたりにでもメールください。といっても今まで公開してきたようなしっかりとした訳文ではなく、本当に自分が読むためだけのメモ書きなので、あまり役立つとも思えないのですが…。