Experts.jp日本に、もっとエキスパートを。(11)いまやマルチデバイスの時代。PCやタブレット端末、スマートフォン、将来的にはメガネ型デバイスも登場しつつある。「今はこのような時代。Webは特定のデバイスや環境のものではない」こう語るのはミツエーリンクスの黒澤剛志氏だ。黒澤氏は同社のアクセシビリティエンジニア。顧客のWebサイト診断やコンサルティング、社内制作物のチェック業務のほか、同社が運営しているアクセシビリティBlogの執筆などを手がけている。Group)のメンバーも務める。マルチデバイス時代のWebアクセシビリティとは先述したようにマルチデバイス時代では、Webはいろいろな環境から操作できること重要になる。「これはWebアクセスビリティそのもの」と黒澤氏は言う。Webアクセスビリティとは特定の環境に依存せず、多くの環境からWebを利用できることだからだ。現在、登場しているデバイスは冒頭で紹介したものだけではない。ペーパー(ディスプレイがモノクロやグレースケール)などのデバイスでも問題なくWebが利用できるようにしなければならない。「考慮しなければならないのはデバイスだけではない。Webの使用環境もさまざまある」と黒澤氏は指摘する。屋外で直射日光の下に使う場合もあれば、音を出せない・聞こえない場合もある。マウスを使うことが難しい場合もあるだろう。このようなさまざまな状況からアクセスした場合でも、「Webがきちんと利用できるようにすることがWebアクセスビリティに欠かせない条件」というわけだ。最近のOSには高齢者や障害者を支援する技術(支援技術)を標準で搭載されている。スクリーンリーダー(コンピュータの画面読み上げソフトウェア)、画面拡大やズーム機能、ハイコントラストモード(色を反転する機能)などは支援技術の一例だ。このような機能が「WindowsやMacOSだけではなく、iPhoneなどのスマートデバイスのOSにも標準搭載されだしたことで、これまで支援技術を使ってこなかった一般の人たちも支援技術を利用しつつある」と黒澤氏は言う。これらの支援技術の環境下でもWebが正しく操作できなければならない。さまざまな環境からWebにアクセスする時代において重要になるポイントは何か。黒澤氏が挙げたのはセマンティクス」さまざまなデバイス、環境でのインタラクショングラフィックスとマルチメディアの代替コンテンツの3点である。ユーザーに合った環境で「セマンティクス」を可能にする最初に取り上げたのは「セマンティクス」。セマンティクスとはプログラムが意図すること。どんなデバイス・環境でWebにアクセスしても「セマンティクスを正しく伝えられることことが重要になる」と黒澤氏は言うのである。HMTL5ではユーザーや環境に合わせて情報・機能を提供される機能が実装されている。その一つとして黒澤氏が紹介したのは「progress要素」だ。ここで黒澤氏はprogress要素を使ったデモを実施。作業の進捗状況をプログレスバーで表示するというものだ。作業開始のボタンを押すと、進捗の領域が緑色に変わっていく。「これをほかの環境で操作するとどうなるか」と黒澤氏が次に操作したのは、スクリーンリーダーを使った場合。進捗音は欽ちゃんの仮装大賞の点数表示に使われるようなコミカルなものだったが、視覚障害者の方でも進捗がわかりやすく伝わると思われた。「このようにHTML5ではユーザーの環境にあった形でセマンティクスが伝わり、情報がユーザーに正しく伝えられるようになっている。いえWebアプリケーションのセマンティクスをHTMLだけで表現するのは難しい」と黒澤氏は言う。HMTL5はWebアプリケーションのタブやツリーなどのUIコンポーネントや動的なコンテンツのセマンティクス、プルダウンメニューのようにフォーカスの制御が複雑なインターフェースなどはうまく表現できない。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」というフォーマットファイル(実態はテキストファイル)に、キャプションを表示させる時間や内容を順番に書いていくだけで、文字の位置、大きさ、色などを指定することができるという。「この機能はブラウザの対応状況によって使えない場合もあるので、注意が必要だ。これも実装されていく方向にあるのは間違いない」そう力強く語り、セッションを締めた。