canvas 要素内へのフォーカス動作サンプル

IE9、及び Firefox 13 （2012年6月現在）では、canvas による埋め込みコンテンツの表示が可能な状況でも、canvas 要素内のフォールバックコンテンツに対してキーボードや支援技術でのアクセスが可能になりました。このサンプルはその動作検証のためのものです。

IE9、Firefox 13 で表示している場合は、Tab キーで canvas 要素内のコンテンツにアクセスできることが確認できると思います。

詳しくは記事「Firefox 13 における HTML5 canvas 要素のアクセシビリティ」をご覧ください。

なお、このサンプルは「Interactive image (canvas) with text alternative:」の翻訳版です。

ソースコード

<canvas id="example" width="260" height="200">
  <h2>図形</h2>
  <p>
    黒い枠線で囲まれた中に、
    ピンクの背景色をした<a href="http://ja.wikipedia.org/wiki/円" onfocus="drawCircle();" onblur="drawPicture();">円</a>があります。
    その円の一部に重なるように、緑色の背景色をした<a href="http://ja.wikipedia.org/wiki/正方形" onfocus="drawCircle();" onblur="drawPicture();">正方形</a>と
    紫色の背景色をした<a href="http://ja.wikipedia.org/wiki/三角形" onfocus="drawCircle();" onblur="drawPicture();";>三角形</a>がありますが、
    これらは半透明なので、下にある円はすべて見ることができます。
  </p>
</canvas>