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

アクセシビリティBlog

Webサイトのアクセシビリティを高めるための方法や国内外の関連情報など、さまざまな角度からWebアクセシビリティに関する話題をご提供していきたいと思います。

当Blogの更新情報は、Twitter経由でも配信しています。興味のある方はぜひ、@mlca11yをフォローしてください。当Blogへのご意見・ご質問は、Twitter経由でも受け付けております。

2013年11月1日

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

アクセシビリティ・エンジニア 黒澤

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