CSUN 2014セッションレポート1：Canvas要素のアクセシビリティ

米国サンディエゴで開催中のCSUN 2014では、今日（3月19日）からセッション発表が始まりました。この記事では、3月19日のセッションの中から気になったトピックスを紹介します。

canvas要素のアクセシビリティ

W3CのMark Sadeckiさん（@cptvitamin）が行った「Accessibility Features of HTML5」ではHTML5仕様に含まれるアクセシビリティを高める機能が紹介されていました（スライド）。スライドを見ると予定されていた内容のすべてを発表することはできなかったようですが、セッションでは基礎的な内容から最近の話題まで紹介されていました。

特に私が興味深いと思ったのはcanvas要素をアクセシブルにするための機能です。Canvas 2D Contextには、グラフィックスをアクセシブルにする機能がいくつかあります。

1つは描画領域の特定の部分を「領域（Region）」として指定できるようになることです。さらに「領域」を特定のフォールバックコンテンツ（canvas要素の子孫）と関連付けることもできます。これらはHit Regions（ヒット領域）と呼ばれる機能です。

もう1つの機能はフォールバックコンテンツにフォーカスがあたった場合に、canvas要素上にフォーカスリングを表示させ、支援技術にもフォーカスのあたている領域を通知できるというものです。この機能については、以前の記事「canvas要素のフォーカス領域を指定する」で簡単に紹介しましたが、記事公開後にdrawSystemFocusRing()メソッドの名前がdrawFocusIfNeeded()に変更されました（なお、本記事執筆時点のHTML Canvas 2D ContextのEditor's DraftもdrawFocusIfNeeded()になっています）。

これらの機能は現時点では設定を有効にしたFirefox Nightlyで試すことができるとのことです。セッションでも、canvas要素上に描画されたチェックボックスのOn/Offをキーボードで変更するデモが行われていました。スライドの29ページがデモにあたります。

セッションでは特に触れられていませんでしたが、Canvas 2D Context仕様を読むと、Hit Regionsにはアクセシビリティ以外のメリットもあることがわかります。現在は、canvas要素上に描画されているオブジェクトがマウスでクリックされたかどうかの判定は、開発者がJavaScriptを使って行っていますが、Hit Regionsを使うと開発者が行わなくても済むようになります。具体的にはMouseEventのregionプロパティを見ることでイベントが発生した「領域」がわかるようになったり、「領域」に関連付けたフォールバックコンテンツにMouseEventのハンドラを登録できること、などが検討されています。

開発者にもユーザーにもメリットのあるHit Regionsの標準化に期待したいと思います。

ミツエーリンクスでは、WCAG準拠やJIS X 8341-3対応をはじめ、さまざまなWebアクセシビリティ関連サービスをご提供しています。是非アクセシビリティのページをご覧いただき、お気軽にお問い合わせください。

Pick Up

• アクセシビリティ

  Webサイトのアクセシビリティ対応状況の診断から構築・運用支援まで幅広く対応、障害者差別解消法への対応が気になるかたにも