ARIA: figure ロール

{{ariaref}}

ARIA の figure ロールは、適切な意味論が存在しないページコンテンツ内の図表を識別するために使用できます。 図表は、通常、1つまたは複数の画像、コードスニペット、または情報を通常のテキストの流れとは異なる方法で配置するその他のコンテンツとみなされます。

<div role="figure" aria-labelledby="caption">
  <img src="image.png" 
      alt="画像の完全な代替説明"> 
  <p id="caption">図表 1: キャプション</p> 
</div>

上記の例では、画像とキャプションの2つの別々のコンテンツ項目で構成される図表があります。 これは、コンテンツを role="figure" を使用して図表として識別する <div> 要素で囲まれます。

図表を作成するために ARIA を使用する代わりに、<figcaption> 要素と共に、ネイティブな意味論の HTML <figure> 要素の使用を検討してください。 以下のベストプラクティスをご覧ください。

説明

一緒にグループ化され、図表(画像、動画、音声、コードスニペット、または他のコンテンツを含む)として消費されるべきコンテンツは、 role="figure" を使用して図表として識別できます。

図表のコンテンツをどのように書くべきかについての鉄則はありません。 他のコンテンツと同様にアクセス可能であることを確認するべきです。 例えば、支援技術のユーザーがキーボードやマウスなどで操作できることを確認してください。

図表にキャプションやラベルを追加する場合は、さまざまな方法でキャプションやラベルを追加できます。 図表を説明するコンテンツを含む要素に ID を追加し、図表上の適切な属性でその ID を参照して、次のように図表をラベルに関連付けることができます。

<div role="figure" aria-labelledby="figure-1">
  ...
  <p id="figure-1">図表を説明するテキスト。</p>
</div>
  • テキストが簡潔なラベルである場合は、aria-labelledby を使用してください。
  • テキストがより長い説明である場合は、aria-describedby を使用してください。

ここでも、ARIA 無しで、HTML の <figure> 要素と <figcaption> 要素を使用して、意味論的に行うことができます。

<figure>
  ...
  <figcaption>図表を説明するテキスト。</figcaption>
</figure>

ラベルを画面に表示したくないが、支援技術のユーザーにわかりやすいラベルを提供したい場合は、図表コンテナの aria-label 属性を使用できます。

<div role="figure" aria-label="図表を説明するテキスト。">
  ...
</div>

aria-label<figure> と一緒に使うことができます。

<figure aria-label="図表を説明するテキスト。">
  ...
</figure>

一般的には、メインテキストから図表を参照するべきですが、図表は参照元の要素と同じ場所に表示する必要はありません。

: 可能な限り、意味論的 HTML 要素を使用して図表とそのキャプション(<figure><figcaption>)をマークアップするべきです。 詳しくは、ベストプラクティスを参照してください。

 

関連する WAI-ARIA のロール、ステート、プロパティ

aria-describedby
キャプションとしての参照テキストを含む要素の ID。
aria-labelledby
ラベルとしてのテキストを含む要素の ID。
aria-label
ラベルとして機能することができるテキストを含む要素がない場合は、figure ロールを持つ要素や <figure> 要素の aria-label の値として直接ラベルを追加できます。

キーボードインタラクション

ロールに固有のキーボードインタラクションはありません。

必要な JavaScript 機能

ロール固有の JavaScript 要件はありません。 HTML の意味論を制御できない場合は、JavaScript でこれらのロールとプロパティを追加することで、HTML のアクセシビリティを向上させることができます。

aria-labelledby でその ID を参照することによって、図表の説明的なラベルを提供する段落を識別するために、このページの最初の例を拡張することもできます。

<div role="figure" aria-labelledby="figure-1">
  <img src="diagram.png"
       alt="素晴らしい4つの層と相対的な優先順位を示すダイヤグラム — 
            音楽、猫、自然、そしてアイスクリーム">
  <pre><code>
    let awesome = ['音楽', '猫', '自然', 'アイスクリーム'];
  </code></pre>
  <p id="figure-1">図表 1: 素晴らしい4つの層。</p>
</div>

ベストプラクティス

たとえば、HTML を制御できないが、JavaScript を使用した後でアクセシビリティを動的に向上させる必要がある場合など、role="figure" のみを使用する必要があります。

可能であれば、図表とそのキャプション(<figure><figcaption>)をマークアップするために、適切な意味論の HTML 要素を使用する必要があります。 たとえば、上記の例は次のように書き直されます。

<figure>
  <img src="diagram.png"
       alt="素晴らしい4つの層と相対的な優先順位を示すダイヤグラム —
       音楽、猫、自然、そしてアイスクリーム">
  <pre><code>
    let awesome = ['音楽', '猫', '自然', 'アイスクリーム'];
  </code></pre>
  <figcaption>図表 1: 素晴らしい4つの層。</figcaption>
</figure>

仕様

仕様 状態
Accessible Rich Internet Applications (WAI-ARIA) 1.1
figure の定義
勧告

スクリーンリーダーのサポート

TBD

関連情報