Smart Communication Design Company
ホーム > ナレッジ > Blog > アクセシビリティBlog > 2013年11月 > canvas要素のフォーカス領域を指定する

canvas要素のフォーカス領域を指定する

2013年11月1日
アクセシビリティ・エンジニア 黒澤

HTML5のcanvas要素には、フォーカス領域をシステムや支援技術にどう伝えるか、という問題があります。Google Chromeの開発版はこの問題を解決するdrawSystemFocusRing()とdrawCustomFcusRing()を実験的にサポートしています。この記事では、問題の概要とGoogle Chromeの実装状況を紹介します。

問題の概要

canvas要素のフォールバックコンテンツは画面には表示されていませんが、キーボードフォーカスは移動します。そのため、フォーカスの移動に応じて描画を更新しない場合、ユーザーはフォーカスを見失ってしまいます。そこで、これまでは次のようにコンテンツ側が描画を更新してきました。

  1. コンテンツ側がフォールバックコンテンツのフォーカスの有無を判定
  2. コンテンツ側がフォーカスリングに相当する表現を描画

例えば、The Paciello Groupが2012年6月に公開したHTML5 Canvas Accessibility in Firefox 13の例ではフォールバックコンテンツにfocusとblurイベントハンドラを設定し、focusイベントでフォーカスリングに相当する赤い枠線を描画し、blurイベントで領域全体の再描画を行って枠線を消しています。

しかし、フォーカスに応じてcanvas要素の描画を変更したとしても、システムや支援技術からはフォーカスがあたっている領域(以下、フォーカス領域)として認識されません。このため、拡大鏡ソフトウェアでフォーカス領域を追跡して拡大する機能を使っていても、canvas要素ではフォーカス領域を追跡できない、といった問題がおこっています。なお、フォーカス領域の追跡機能は、Windows 7の拡大鏡では「オプション」の「追跡」にある「キーボードフォーカスを追跡する」をチェックすることで利用できます。

実際のブラウザーを見てみると、Internet Explorer 9はcanvas要素のフォールバックコンテンツをオフスクリーン(画面に表示されていない)として扱います。そのため、フォールバックコンテンツにフォーカスがあたっても、支援技術は画面上のフォーカス領域を知ることができません。

一方、Mozilla Firefoxではcanvas要素のフォールバックコンテンツは、画面には表示されませんが、canvas要素の領域にレイアウトされます。そのため、フォーカスがあたったフォールバックコンテンツが仮想的に存在している領域がフォーカス領域となり、画面上のフォーカス(が当たっているかのように表現されている)領域とは異なってしまいます。

図1はHTML5 Canvas Accessibility in Firefox 13の例をFirefoxで利用した際のスクリーンショットです。フォーカスに相当する表現が描画されている領域と、支援技術が認識しているフォーカスがずれていることがわかります。

図1:Mozilla Firefoxにおけるフォーカス領域

drawSystemFocusRing()とdrawCustomFocusRing()

この問題を解決するためにCanvas 2D ContextにはdrawSystemFocusRing()drawCustomFocusRing()というメソッドが用意されています。どちらのメソッドも引数にフォールバックコンテンツを指定すると、ブラウザーがフォーカスの有無を判定します。

drawSystemFocusRingは指定したフォールバックコンテンツにフォーカスがあたっている場合、現在のパスに対してシステムのフォーカスリングを描画します。

drawCustomFocusRingは指定したフォールバックコンテンツにフォーカスがあたっている場合にtrueを返します。コンテンツ側はメソッドがtrueが返した時のみ、カスタムのフォーカスリングを描画すればよくなります。ただし、ユーザーがシステムのフォーカスリングを描画することを望んでいる場合にはフォーカスがあたっていてもfalseが返り、ブラウザーがフォーカスリングを描画します。

これらのメソッドはGoogle Chromeの開発版で実験的に実装されています(Issue 261998 Implement canvas drawSystemFocusRing and drawCustomFocusRing)。この機能を試すにはchrome://flagsで「試験運用版の canvas 機能を有効にする」を有効にします。

例えば、Googleが作成したデモ、Canvas Clock Exampleでは、アナログ時計(canvas要素)の短針と長針に対して、それぞれinput要素がフォールバックとして記述されています。Tabキーを押してフォールバックコンテンツ(input要素)にフォーカスがあてると、canvas要素上にはフォーカスリングが表示されます(この状態で、上下の矢印キーを押すと対応する針を動かすことができます)。図2は実際のスクリーンショットで、画面上にフォーカスリングが表示されていること、支援技術も正しいフォーカス領域を認識できていることがわかります。

図2:Google Chromeにおけるフォーカス領域

また、Mozilla FirefoxでもdrawSystemFocusRing()とdrawCustomFcusRing()を実装中です(Bug 540456 - Support HTML5 canvas draw{Custom,System}FocusRing())。フォーカス領域の問題は、コンテンツ側で解決することが難しいため、ブラウザーでのサポートがますます広がることを期待しています。

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

Pick Up