Smart Communication Design Company
ホーム > ナレッジ > Blog > Web標準Blog > 2009年6月 > <canvas>とアクセシビリティ

<canvas>とアクセシビリティ

2009年6月12日
フロントエンド・エンジニア 矢倉

先月末のGoogle I/Oで取り上げられてから、HTML5がにわかに盛り上がってきました。

I/Oのキーノートでまず紹介されたのが、スクリプトからビットマップ画像を操作するcanvasでした。これまでGDやFlashが使われていた画像処理をブラウザー内で完結できるため、多くの開発者から期待されているようです。

しかし、一方でアクセシビリティの専門家は懸念を抱いているようです。The Paciello GroupのSteve Faulknerが先日公開した、canvasとアクセシビリティに関する記事が面白かったので、今回はこれを取り上げてみようと思います。

canvas APIのアクセシビリティ対応

彼がcanvas APIの問題点として挙げているのは、次の二点です。

ここで難しいと思うのが、テキストを取得できたとしても、それだけでは代替となる適切な情報が得られるか分からないことです。とくにcanvasは視覚的な表現にかなり依存したものになることが多いでしょうから、APIが用意されるだけで問題が簡単に解決できるわけではないように感じます。

さらに、canvasは一度描画されてしまうと、一部を書き換えるといったことができません。動的な更新には全体の再描画が必要となるのですが、動きが加わってしまうと、さらに代替情報を提供することは難しくなるでしょう。

代替情報は入れられるが……

canvasがアクセシビリティについて何も考慮していないかというと、そうはありません。要素内容を持つことができるので、そこに代替情報を記述すればよいわけです。

たとえば、円グラフを描きたい場合を考えてみましょう。canvas内にtableを記述し、そこにデータを持たせるのです。canvasがセルの情報をひろって描画するようなコードを書けば、アクセシブルになりそうです。

<canvas id=pie-chart>
  <table border id=data-browser>
    <caption>2009年5月のブラウザーシェア</caption>
    <tr><th>ブラウザー<th>割合
    <tr><td>IE7<td>40.83％
    <tr><td>Firefox 3.0<td>20.43％
    <tr><td>IE6<td>16.94％
    <tr><td>IE8<td>6.85％
    <tr><td>Safari 3.2<td>4.56％
    <tr><td>Safari 3.1<td>1.81％
    <tr><td>その他<td>8.41％
  </table>
</canvas>

ところが残念なことに、スクリーンリーダーはcanvas要素をすべて無視してしまい、中にある代替情報を読み上げることができないとのことです。

記事では、空のcanvasの後に代替情報を配置し、スタイルシートで画面外へ押し出すという回避策も紹介していますが、あまり賢い解決方法ではないように思います。

canvasだけの問題か

canvasには、代替テキストに関連するインターフェースがなく、スクリーンリーダーが内容を読んでくれないという問題があることがわかりました。

しかし、canvasは一つの手段でしかありません。canvasで表現される情報をアクセシブルにしても、実現したい機能すべてについてアクセシビリティが確保されなければ、問題の解決とはいえません。これは画像やFlashにについても同じことがいえるでしょう。

機能ごとのアクセシビリティ対応ももちろん重要なのですが、それだけに気をとられてしまって、ちぐはぐな「対応」になってしまわないように気をつける必要があります。それにはやはり、「何を実現したいのか」「何が適切な手法なのか」をきちんと考えることが大切なのではないかと考えています。