いまやマルチデバイスの時代。PCやタブレット端末、スマートフォン、将来的にはメガネ型デバイスも登場しつつある。「今はこのような時代。Webは特定のデバイスや環境のものではない」

こう語るのはミツエーリンクスの黒澤剛志氏だ。黒澤氏は同社のアクセシビリティエンジニア。顧客のWebサイト診断やコンサルティング、社内制作物のチェック業務のほか、同社が運営しているアクセシビリティBlogの執筆などを手がけている。またW3C UAWG（User Agent Accessibility Guidelines Working Group）のメンバーも務める。

マルチデバイス時代のWebアクセシビリティとは

先述したようにマルチデバイス時代では、Webはいろいろな環境から操作できること重要になる。「これはWebアクセスビリティそのもの」と黒澤氏は言う。Webアクセスビリティとは特定の環境に依存せず、多くの環境からWebを利用できることだからだ。

現在、登場しているデバイスは冒頭で紹介したものだけではない。テレビのリモコンのような細かな操作が難しいデバイスもあれば、キーボードがないデバイス、音声入出力、電子ペーパー（ディスプレイがモノクロやグレースケール）などのデバイスでも問題なくWebが利用できるようにしなければならない。

「考慮しなければならないのはデバイスだけではない。Webの使用環境もさまざまある」と黒澤氏は指摘する。

例えば屋外で直射日光の下に使う場合もあれば、音を出せない・聞こえない場合もある。またマウスを使うことが難しい場合もあるだろう。このようなさまざまな状況からアクセスした場合でも、「Webがきちんと利用できるようにすることがWebアクセスビリティに欠かせない条件」というわけだ。

また最近のOSには高齢者や障害者を支援する技術（支援技術）を標準で搭載されている。スクリーンリーダー（コンピュータの画面読み上げソフトウェア）、画面拡大やズーム機能、ハイコントラストモード（色を反転する機能）などは支援技術の一例だ。このような機能が「WindowsやMacOSだけではなく、iPhoneなどのスマートデバイスのOSにも標準搭載されだしたことで、これまで支援技術を使ってこなかった一般の人たちも支援技術を利用しつつある」と黒澤氏は言う。つまりこれらの支援技術の環境下でもWebが正しく操作できなければならない。

つまりさまざまな環境からWebにアクセスする時代において重要になるポイントは何か。黒澤氏が挙げたのは

• セマンティクス」
• さまざまなデバイス、環境でのインタラクション
• グラフィックスとマルチメディアの代替コンテンツ

の3点である。

ユーザーに合った環境で「セマンティクス」を可能にする

最初に取り上げたのは「セマンティクス」。セマンティクスとはプログラムが意図すること。どんなデバイス・環境でWebにアクセスしても「セマンティクスを正しく伝えられることことが重要になる」と黒澤氏は言うのである。

HMTL5ではユーザーや環境に合わせて情報・機能を提供される機能が実装されている。その一つとして黒澤氏が紹介したのは「progress要素」だ。ここで黒澤氏はprogress要素を使ったデモを実施。作業の進捗状況をプログレスバーで表示するというものだ。作業開始のボタンを押すと、進捗の領域が緑色に変わっていく。

「これをほかの環境で操作するとどうなるか」と黒澤氏が次に操作したのは、スクリーンリーダーを使った場合。
「progress要素に対応した画面には作業の進捗を音で表現することができる」

進捗音は欽ちゃんの仮装大賞の点数表示に使われるようなコミカルなものだったが、視覚障害者の方でも進捗がわかりやすく伝わると思われた。 「このようにHTML5ではユーザーの環境にあった形でセマンティクスが伝わり、情報がユーザーに正しく伝えられるようになっている。とはいえWebアプリケーションのセマンティクスをHTMLだけで表現するのは難しい」と黒澤氏は言う。

例えばHMTL5はWebアプリケーションのタブやツリーなどのUIコンポーネントや動的なコンテンツのセマンティクス、プルダウンメニューのようにフォーカスの制御が複雑なインターフェースなどはうまく表現できない。
「これらHTML5ではできないことを補足するための技術が、WAI-ARIA（Web Accessibility Initiative-Accessible Rich Internet Applications）である」（黒澤氏）

WAI-ARIAはWebアプリケーションをよりアクセシブルにするW3Cで策定をされた仕様である。ホスト言語と組み合わせ、専用の属性でセマンティクスを表現できる特徴を持っている。そしてHTML5をホスト言語にすると容易に扱える。というのも、「すでにHTML5にWAI-ARIAが取り込まれているので特別に用意することはない」（黒澤氏）からだ。

WAI-ARIAではロール（役割）、ステート（状態）、さらにプロパティ（補足情報）を表現する。ここで黒澤氏はWAI－ARIAのタブモデルを画面で紹介。さらにWAI-ARIAを使えば動的なコンテンツに対してもセマンティクスを指定することができることをデモで証明して見せた。

「WAI-ARIAはあくまでもセマンティクスを表現するもの。見た目はCSS、動作はJavaScriptで指定する」と黒澤氏。
このようにWAI-ARIAを使うことで、ブラウザや支援技術などの機能・制御をユーザーに提供できるようになるのだ。

さまざまなデバイス・環境下でのインタラクション

次は第二のポイント「さまざまなデバイス、環境でのインタラクション」である。ユーザーが利用する入力デバイスも多様化している。1つのデバイスが例えばキーボードやマウス、タッチスクリーン、音声認識というように、複数の入力デバイスを持っていることも多い。「そのインタラクションをHTML5のimput要素を使えば可能になる」と、実際にその記述の仕方をデモとともに紹介した。

例えばスライダーの操作。マウスでもキーボードでも操作でき、タッチスクリーンにも対応するには、HTML5のinput要素を使うと実装できるという。「カスタムUIを実装することもあるだろう」と黒澤氏。その場合はHTML5のDOMイベントのように特定のデバイスに紐づかないイベントを使えば、カスタムUIを実装する手間が少し削減できるそうだ。

クリックイベントとは、マウスクリックのように物理的なものだけでなく、要素が活性化したときに発生するイベントだ。具体的にはa要素やbutton要素などがそれにあたる。要素を活性化する例としては、マウスクリックのほか、キーボードであればフォーカスを当てた上体でEnterキーやスペースキーを押下した場合などである。

「これは今までにあったイベントだが、HTML5ではユーザーの入力を表すイベントが追加された。それがinputイベント。これはユーザーがマウスやキーボード、音声入力などいずれの入力デバイスを使ったとしても入力を活性化することができるイベントだ」（黒澤氏）

実際、どのようなインタラクションになるか、黒澤氏はデモを実施。ただinputイベントには「互換性にまつわる問題がある」と黒澤氏は注意を促す。それは。IE8以下ではサポートされていないからだ。しかし今後は多くの環境でサポートされるはずなので「インタラクションには欠かせないので、覚えておいてほしい」。

グラフィックスとマルチメディアの代替とは

そして最後のポイント「グラフィックスとマルチメディア」。グラフィックスとマルチメディアはリッチな表現でよいが、「あらゆる環境で利用できるわけではない」という。例えば視覚障害者や画像が読み込まれない状況下では、グラフィックス表現だと理解できない。またマルチメディアも、聴覚障害者や音が聞き取れない状況下だと理解はできない。ではどうすればよいのか。「代替となるコンテンツの提供だ」と黒澤氏は代替テキストのデモを見せながら紹介した。

HTML5ではグラフィックの表現にCanvas要素が使えるようになっているが、この要素に対しても代替コンテンツが提供できる。それがフォールバックコンテンツである。フォールバックコンテンツは画面上では非表示となっているが、Canvas要素を無効にすると、フォールバックコンテンツが表示される。もちろんキーボードフォーカスもフォールバックコンテンツに移動するというものだ。

またマルチメディアの代替コンテンツには「字幕とキャプション」がある。「HTML5のtracck要素を使うと簡単に設定できる」と黒澤氏。「WebVTT」というフォーマットファイル（実態はテキストファイル）に、キャプションを表示させる時間や内容を順番に書いていくだけで、文字の位置、大きさ、色などを指定することができるという。

「この機能はブラウザの対応状況によって使えない場合もあるので、注意が必要だ。ただこれも実装されていく方向にあるのは間違いない」そう力強く語り、セッションを締めた。

【講演資料・セッション映像】