ブログ内検索

by Futomi Hatano

Canvasのアクセシビリティ

先日の HTML5 3Days で「Canvas チュートリアル」を講演し、Canvas の概要を解説しましたが、ここで、もう少し突っ込んで、Canavs のアクセシビリティについて考えてみたいと思います。

HTML5 とアクセシビリティ

HTML5 では、アクセシビリティの考慮が随所に見られます。それが満足できるものかどうかは意見が分かれるところだと思いますが、いずれにせよ、これまでのマークアップと比べれば、良くなっていると思います。

マークアップでいえば、新たに導入された section, article, nav などのセクショニング・コンテンツに属する要素も、間接的ではありますが、アクセシビリティに大きく貢献することになるでしょう。これらの新要素と、HTML5 で新たに導入されたアウトライン・アルゴリズムの組み合わせにより、ページ内のさまざまな領域が、ページ内において、どの見出しレベルのコンテンツなのか、そして、それが、どんな意味を持つのかが明確になります。

例えば、nav 要素であれば、それはナビゲーションです。footer 要素であれば、それはフッターを意味します。aside 要素であれば、ページの主文に間接的にしか関係しないコンテンツです。トップレベルに article があれば、それがページのメインコンテンツだということが推測できます。このように、どこにページの主文が含まれ、どれがページの主文ではないのか、スクリーンリーダーからも判別しやすくなります。もしかしたら、将来的に、スクリーンリーダーや音声ブラウザーで、ページの本文だけをいきなり再生するといったコマンドが実現できるかもしれません。

img 要素でいえば、alt 属性の記述方法が厳密に規定されています。適切に alt 属性に値をセットすることで、スクリーンリーダーでは、その画像も含めて、利用者がページの内容をスムーズに理解できるよう、ページを読み上げることができるでしょう。

canvas のアクセシビリティ

このように、さまざまな要素でアクセシビリティについて考慮されていますが、canvas 要素も例外ではありません。満足できるほどではありませんが、canvas 要素にはフォールバックが考慮されており、それを適切に使うことで、ある程度のアクセシビリティを実現することができます。

アクセシビリティといえば、前述のように、スクリーンリーダーや音声ブラウザーへの配慮だけではなく、キーボードユーザーへの配慮などのように、ビヘイビアを伴う場合も含まれます。しかし、現状、Canvas の API には、全くといってもいいほど、アクセシビリティが考慮されていません。もともと、Canvas とは図を描くものですから、描いたものに対してアクセシビリティが考慮されていないのは当たり前ともいえます。極端なことを言えば、Canvas で描かれたものは、img 要素を使って組み込んだ画像と同じだからです。

とはいっても、Canvas は静的な絵を描くだけではなく、JavaScript の力を借りて、アニメーションを実現するなど、さまざまなシーンで応用可能です。描いたものに対して、何かしらのアクセシビリティが望まれています。そのような状況の中、実は、canvas 要素に、アクセシビリティを考慮した API を追加しようという動きもあります。2009 年 7 月に、W3C にて Canvas API のアクセシビリティについて検討するタスクフォースが発足することになりました。実際に、どこまでのアクセシビリティが考慮されるのかは分かりませんが、今後の活動成果に期待したいところです。

フォールバック

さて、ここからは、将来の話は置いておいて、今、現実問題として、アクセシビリティを実現するため、何ができるのかを考えてみましょう。しかし、万人にアクセシブルにするというのは現実的ではありません。ここでは、コンテンツ制作において、大きな負担をかけることなく、必要最低限のアクセシビリティを実現する方法を模索したいと思います。つまり、マークアップのレベルで対処できることを取り上げたいと思います。

先に触れたとおり、canvas 要素にはフォールバックが規定されています。残念ながら、マークアップレベルで実現できる方法と言ったら、フォールバックしかないのが実情です。

フォールバックとは、もともとはシステム用語なのですが、何かしらの理由で問題が発生したときに、別の手段を使ってサービスを提供し続ける、もしくは、機能を削って、一部の機能だけでもサービスを継続するといった仕組みを表します。HTML の要素に当てはめれば、フォールバックとは、もしブラウザーが該当の要素に対応していない場合に、完全なものではないにせよ、何かしらの手段を提供することを意味します。同等の代替手段がない場合は、もしかしたら、「ご利用頂けません。」というメッセージになるかもしれませんが、これでも、何も表示されない状況と比べれは、いくらかはマシと言えるでしょう。

canvas 要素のフォールバックは至って簡単です。

<canvas width="300" height="150">
  <!-- ここにフォールバックコンテンツを入れます。 -->
</canvas>

このように、canvas 要素の開始タグと終了タグの間に、フォールバックコンテンツを入れます。こうすることで、もしブラウザーが canvas 要素に対応していなかったり、JavaScript を無効にしていれば、フォールバックコンテンツが表示されることになります。

では、フォールバックコンテンツとして何を用意すれば良いでしょうか。

フォールバックコンテンツは、Canvas を何のために使っているのか、どこまでフォールバックするのか、Canvas 以外の手段で同じものが実現できるか、制作コストによる制約、また、その canvas が表すコンテンツがどれほど重要なのか、などによって、大きく異なってきます。そのため、一概に、こうあるべきだとも言い切ることはできません。ここでは、ひとつのサンプルを提示したいと思います。

先日の HTML5 3Days Tech Talk で使ったマンデルブロ集合のサンプルを例に挙げてみましょう。これは、マンデルブロ集合の静的な図を見せるだけではなく、マウスクリックによって、拡大表示することもできます。これを、アクセシビリティをできる限り考慮してマークアップするとしたら、私は次のようにするでしょう。

<canvas id="sample" width="500" height="500">
  <img src="Mandelbrot_set.png" width="500" height="500" title="Canvas を使ったマンデルブロ集合の描画アプリケーション" alt="みなさんがよくご存じのマンデルブロ集合の図が描かれています。" />
  <p>本来であれば、画面上方の start ボタンを押すと、みなさんがよくご存じのマンデルブロ集合が描かれます。マウスクリックによって、クリック位置の拡大画像が再計算され描画されます。残念ながらご利用のブラウザーではご利用頂けません。</p>
</canvas>

canvas 要素に対応していないユーザーエージェントであれば、img 要素の代替の画像と、p 要素の説明文が表示されるはずです。そして、さらに、画像すら表示できないユーザーエージェントであれば、すくなくとも、p 要素の説明文だけでも伝えることができるはずです。

説明文には、やはり、もし canvas 要素が利用できたなら、どうなっていたかをイメージできる文章が良いと思います。そうすれば、canvas 要素が有効だったなら、どうなっていたかを、ある程度は想像することができるようになります。

もし canvas 要素にグラフを描画したいなら、そのフォールバックコンテンツは、そのグラフのもととなるデータを表す表(table 要素)が適切でしょう。

このように、canvas 要素に表される図画の代替となる情報を、できる限りフォールバックコンテンツとして用意してあげるのが重要です。

実際にフォールバックが機能するのか

このフォールバックが機能するのかどうか、とても狭い範囲ではありますが、調べてみました。

Internet Explorer は canvas を実装していませんが、期待通りに、フォールバックコンテンツがすべて表示されます。IE8, IE7, IE6 いずれも期待通りです。

では、canvas を実装しているブラウザーではどうでしょうか。このようなブラウザーでフォールバックの対象となる状況とは、JavaScript を無効にしている場合です。

Safari 4, Chrome 3, Opera 10 では期待通りでした。ところが Firefox 3.5 では、フォールバックコンテンツが表示されません。

HTML5 仕様では、JavaScript が無効になっている場合は、フォールバックコンテンツを表示することとなっていますが、Firefox では、まだそれに対応していません。次のバージョンアップでは、実装を期待したいところです。

次に、スクリーンリーダーです。NVDA で試してみました。NVDA 日本語化プロジェクトから NVDA 日本語版をダウンロードし、Windows XP の Firefox 3.5 で試してみました。残念ながら、canvas 要素の中に入れたフォールバックコンテンツが採用されることはありませんでした。

NVDA のように、canvas 要素の中にフォールバックコンテンツを入れた場合に、それを無視してしまうユーザーエージェントでもフォールバックコンテンツを表現できるようにしたい場合は、現状では、canvas 要素の外に用意するしか方法がないのが実情です。スタイルシートを使って、その外に出したフォールバックコンテンツを見えないようにすることも可能ですが、いくつかの支援技術(スクリーンリーダーや音声ブラウザーなど)で、スタイルシートで見えないようにしたコンテンツを認識するかどうか検証する必要となるでしょう。将来的には、このようなトリックを使わなくても、支援技術が、canvas のフォールバックを適切に扱うことができるようになることを期待したいところです。

NVDA 以外の支援技術(スクリーンリーダーや音声ブラウザーなど)については、残念ながら、手元に環境がないため、実際にどのような挙動を示すのかは分かりません。もし、この例がどうなるか、そして、支援技術にとって、もっと効果的なソリューションのアイデアがあれば、ぜひ、ご自身のブログで公開して、この記事にトラックバックしてください。もしご自身のブログがなければ、お問い合わせコーナーから連絡を頂いても構いません。この記事で紹介させて頂きます。

最後にテキストブラウザーでも試してみました。ここでは、代表的なテキストブラウザーである Lynx で試してみたところ、期待通り、フォールバックコンテンツが表示されました。

最後に

以上の通り、HTML5 で規定されている canvas 要素のマークアップの枠組みの中だけでは、まだまだ満足できるレベルのアクセシビリティは実現できませんが、ここで示した最低限の苦労も、全く無駄ではないでしょう。ないよりはマシです。canvas 要素を使いながらも、アクセシビリティを考慮したサイトを作る際には、ぜひとも、開始タグと終了タグにフォールバック・コンテンツを入れてください。

この投稿は 2009年10月5日 月曜日 1:25 AM に Canvas カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 現在コメント、トラックバックともに受け付けておりません。