1|2|3|4|5アクセシビリティJavaScriptによってインタラクティブなコンテンツを実現する際の問題点として、アクセシビリティの低下があります。APIの描画内容はDOMドキュメントの構造には反映されないので、Webブラウザ組み込みのキーボード操作や読み上げといった機能がまったく適用されません。APIの解説の締めとして、そうしたアクセシビリティの欠如を改善するための工夫を取り上げます。静的な代替コンテンツ記事の冒頭でも触れましたが、canvasタグの内部に記述した内容はcanvas未対応のブラウザでのみ表示されます。そこに適切な代替コンテンツを含めることで、音声ブラウザなどのユーザーにも表示内容を伝えることができます。インタラクティブな動作をしない場合は、これだけで十分な場合も多いでしょう。APIによる表示内容を具体的に説明する文章が強く推奨されています。「xxxとyyyの商品画像を交互に表示」というような、それだけでユーザーが表示内容を把握できるものにするのがよいでしょう。APIに対応したブラウザでは表示されないと書きましたが、これにはもう少し補足事項があります。HTML5の規格では、代替コンテンツにリンクやボタンなどの操作可能な要素が含まれる場合、表示こそされませんがTABキーによるフォーカス移動やEnterキーによる選択などは通常どおり機能することになっています(「規格では」と断りを入れた理由は後述)。APIで描画するのと同等のUIを含めておけば、音声ブラウザのユーザーやマウスが使えないユーザーでも操作が可能になります。フォーカスリング等は自動では表示されないため、focusやblurのイベントで表示を更新し、自前でボタンの強調表示などを行う必要があります。APIでキーボード操作も可能なボタンを実装した例を以下に示します。タブキーでbuttonタグをフォーカスすると画面上の矩形に枠が表示され、Enterキーでalertが表示されます。APIによる表示でもアクセシビリティが確保できる配慮がなされています。Chromeはバージョン22でサポートするようです)。他のブラウザは代替コンテンツの内容を単純に無視してしまい、ボタンなどがフォーカスを受けることはありません。14以外では動作しません。いえ、すべてのブラウザがサポートしていなくても、アクセシビリティに配慮する意味がないわけではありません。「対応ブラウザを使えば操作できる」と「どのブラウザでも操作できない」では天と地ほどの差があります。それに、この機能を活用したWebページが増えることで、現在未対応のブラウザベンダにモチベーションを与えることにもなるでしょう。APIを採用する際には、ぜひアクセシビリティについても検討してください。APIの使い分けについて触れておきます。APIはいずれもWebブラウザ上で使える2次元グラフィックAPIであり、両者のユースケースは重なる部分が多くあります。APIをつい使ってしまいたくなるかもしれません。APIのどちらでも目的が達成できる場合、筆者はSVGの採用をお勧めします。SVGは表示内容をDOMで表現するため、ブラウザがそれを理解できます。SVG中のテキストは容易に抽出できますし、リンクに対するフォーカス制御もブラウザが処理してくれます。特別な工夫なく使った場合、SVGの方がユーザーにとって使いやすいものになる可能性が高いのです。APIを採用するとよいでしょう。以下のような処理です。APIは必ずしもを排他的な存在ではありません。APIの描画結果をSVGに含めることができます。APIを使ってSVGを表示するCanVGのようなライブラリもあります。これらを利用すれば、両者のメリットをうまく組み合わせることも可能でしょう。CanVGいずれにしても、まずは両者の機能を正しく把握することが重要です。その上で、目的に合わせて適材適所で使い分けるようにしてください。白髪になってもプログラムを組んでいたい、ゲームプログラマあがりのWebエンジニア。360のゲームの開発に従事し、グラフィックエンジンやコリジョン、スクリプトなどを幅広く担当。その後、全世界のコンピュータを1つにつなげるWeb技術に魅力を感じ、Webエンジニアに転身。Railsによるシステム開発に携わった後、フリーランスに。Goodies」にて情報発信を行っている。Expert(ソーシャル担当)。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。