このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

ヒット領域とアクセシビリティ

<canvas> 自体は単なるビットマップであり、描かれているオブジェクトに関する情報は提供しません。canvas の内容物は、セマンティック HTML のようなアクセシビリティ機能に公開されません。通常、アクセシブルなウェブサイトやアプリでは、canvas の使用を避けるべきでしょう。以下のガイドラインは、canvas をよりアクセシブルにする助けになります。

フォールバックコンテンツ

<canvas> ... </canvas> タグの内部にあるコンテンツは、canvas のレンダリングをサポートしないブラウザー向けのフォールバックコンテンツとして使用できます。また支援技術 (スクリーンリーダーなど) ユーザーに対しても、タグ内のサブ DOM を読み上げたり対話することができますので、とても役に立ちます。この方法を示すよい例が html5accessibility.com にあります:

html

<canvas>
  <h2>Shapes</h2>
  <p>A rectangle with a black border.
   In the background is a pink circle.
   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
   Partially overlaying the circle is a green
   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
   both of which are semi-opaque, so the full circle can be seen underneath.</p>
</canvas>

Steve Faulkner による、この例を NVDA がどのように読み上げるかを示した動画もご覧ください。

ARIA ルール

Accessible Rich Internet Applications (ARIA) は、障がいがある人たちに対してウェブコンテンツやウェブアプリをよりアクセシブルにするための手段を定義しています。canvas 要素の振る舞いや目的を説明するために、ARIA 属性を使用できます。詳しくは ARIA や ARIA techniques をご覧ください。

html

<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>

ヒット領域

canvas 上の特定の領域内にマウス座標が存在するかは、解決する価値がある一般的な問題です。ヒット領域 API を使用して canvas 内の領域を定義することができます。また、canvas 上のインタラクティブコンテンツをアクセシビリティツールに公開する機能もあります。これによりヒット検出が容易になり、イベントを DOM 要素に送ることができます。この API には、以下の3つのメソッドがあります (これらは現行のウェブブラウザーでまだ実験的です。ブラウザー実装状況を確認してください)。

CanvasRenderingContext2D.addHitRegion() Experimental: canvas にヒット領域を追加します。
CanvasRenderingContext2D.removeHitRegion() Experimental: 特定の id を持つヒット領域を、canvas から削除します。
CanvasRenderingContext2D.clearHitRegions() Experimental: すべてのヒット領域を canvas から削除します。

たとえば以下のように、パスにヒット領域を追加して、その領域にマウスがヒットしたかを判断するために MouseEvent.region を確認できます。

html

<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
ctx.fill();
ctx.addHitRegion({id: "circle"});

canvas.addEventListener("mousemove", function(event) {
  if(event.region) {
    alert("hit region: " + event.region);
  }
});
</script>

addHitRegion() メソッドには、イベントを要素 (canvas の子孫要素) へ送るための control オプションがあります:

js

ctx.addHitRegion({control: element});

これはたとえば、<input> 要素へイベントを送るのに有用です。こちらの codepen demo もご覧ください。

フォーカスリング

キーボードで操作するとき、フォーカスリングはページ上のナビゲーションを支援するために役に立つインジケーターです。canvas の描画物にフォーカスリングを描くために、drawFocusIfNeeded プロパティを使用できます。

CanvasRenderingContext2D.drawFocusIfNeeded() Experimental: 指定した要素にフォーカスがあるとき、このメソッドは現在のパスの周囲にフォーカスリングを描きます。

また、たとえばフォーカスがある場合に要素をスクリーン上に見せるために、scrollPathIntoView() メソッドを使用できます。

CanvasRenderingContext2D.scrollPathIntoView() Experimental: 現在のパスまたは指定したパスを表示するようにスクロールします。

関連情報