figcaptionとvisually-hiddenを使っていますか？画像説明のHTML設計とaltとの違い

多くのホームページでは、画像に alt属性（代替テキスト） を設定して説明を補います。

しかしHTMLには、画像をより適切に説明するための仕組みとして figure と figcaption という要素が用意されています。

さらにCSSのテクニックである visually-hidden を使えば、デザインを崩さずに補足説明を追加することも可能です。

これらを適切に組み合わせることで、HTMLの意味構造をより明確にし、アクセシビリティ（すべての人が情報を利用できる状態）の向上にもつながります。

本来であれば、図や情報の構造は HTMLとCSSだけで表現できることが理想的です。しかし、複雑な図やインフォグラフィックの場合、デザインや制作上の理由から 画像として表現せざるを得ないケースもあります。

そのような場合でも、figure と visually-hidden を使用することで、画像と説明文を意味的に結びつけることができます。

しかし実際のホームページ制作では、alt と figcaption の違いや、どのように使い分ければよいのかが分かりにくいと感じることも少なくありません。

この記事では、画像説明のHTML設計として figcaption とは何か、alt との違い、visually-hidden の役割、そして実際のホームページ制作での使い分けについて解説いたします。

figcaption は、figure 要素の中で図や画像の説明を書くためのHTML要素です。

例えば次のように使用します。

<figure>
  <img src="example.jpg" alt="井戸水クーラーの設置例">
  <figcaption>井戸水クーラーの設置例</figcaption>
</figure>

この構造では figure が図や画像のまとまり、img が画像本体、figcaption が図の説明という関係になります。

写真だけでなく、図・グラフ・イラスト・インフォグラフィックなど、意味を持つ視覚的なコンテンツに対して使うことができます。

alt 属性と figcaption はどちらも画像説明に関係しますが、役割は異なります。

簡単に言うと、alt は画像の要約、figcaption は図の説明です。

例えば図の場合は次のようになります。

<figure>
  <img src="diagram.jpg" alt="井戸水クーラーの設置例の図">
  <figcaption>
  井戸水を熱交換器に通して冷却する井戸水クーラーの設置例。
  </figcaption>
</figure>

alt に図の概要を短く書き、figcaption に図の内容をより詳しく説明するというのが基本的な使い分けです。

visually-hidden は、視覚的には非表示にしつつ、スクリーンリーダーには読み上げられる状態にするCSSテクニックのひとつです。

Bootstrap 5 では標準でこのクラス（.visually-hidden）が用意されています。

一方、自前で実装する場合は、次のようなCSSが一般的です。

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

position: absolute で通常のレイアウトから外した上で、サイズを1pxに絞り overflow: hidden で視覚上の表示を消しています。clip プロパティも組み合わせることで、古いブラウザを含めてより確実に非表示にできます。

このクラスを適用した要素は画面には表示されませんが、HTML構造には残るためスクリーンリーダーで読み上げられます。
このような実装は、アクセシビリティのための非表示テキストとして広く使われている方法です。

figcaption は通常、画像の下にキャプションとして表示されます。デザインによってはキャプションを表示したくない場合もありますが、そのまま削除してしまうとHTMLの意味構造も失われます。

そこで visually-hidden を使うことで、説明テキストをHTML構造として保ちながら、視覚的には非表示にすることができます。

<figure>
  <img src="example.jpg" alt="インフォグラフィック">
  <figcaption class="visually-hidden">
    低価格・高品質ホームページ制作サービスの特徴をまとめた図
  </figcaption>
</figure>

opacity: 0 や display: none ではダメなのか？

「画面に見せなければいい」と考えると、opacity: 0（透明にする）や visibility: hidden（不可視にする）、display: none（非表示にする）といったCSSプロパティが思い浮かぶかもしれません。

しかし、これらはスクリーンリーダーへの読み上げという観点では、意図した動作になりません。

display: none と visibility: hidden は、スクリーンリーダーからも要素を隠してしまいます。opacity: 0 は環境によって読み上げられることもありますが、一貫した動作は保証されません。

「視覚的には見せたくないが、スクリーンリーダーには届けたい」という要件を確実に満たすには、レイアウトから切り離しつつサイズをほぼゼロにして clip でクリッピングするという、visually-hidden 固有の実装が必要になります。

デザインを崩さず、HTMLの意味構造とアクセシビリティを同時に保てる点がメリットです。

figcaption 自体が検索順位を直接大きく左右する要素ではありません。ただし、画像や図の周辺テキストとして、内容の文脈を補足する役割は持っています。

alt は必須、figcaption は補足という位置付けです。特に図やインフォグラフィックのように、画像だけでは内容が伝わりにくい場合には、説明テキストとして有効に機能します。

写真

基本的に alt 属性だけで十分です。figcaption は必要な場合のみ使います。

<img src="office.jpg" alt="AEDIのオフィス">

図（diagram）

alt に図の概要を書き、figcaption に図の内容説明を加える構造が適しています。

イラスト

写真に近い扱いになります。alt でイラストの内容を記述し、figcaption は必要に応じて補足します。

インフォグラフィック

情報量が多いため、alt で図の要約、figcaption で内容の補足説明という構造にすると理解しやすくなります。visually-hidden と組み合わせることで、デザインを維持しながら説明テキストをHTML上に保つことができます。

シンプルなHTML + CSS

<figure>
  <img src="image.jpg" alt="画像の説明">
  <figcaption class="visually-hidden">
    図の説明テキスト
  </figcaption>
</figure>

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

Bootstrapを使用している場合

Bootstrap 5 には .visually-hidden クラスが標準で用意されています。追加CSSなしでそのまま使用できます。

<figcaption class="visually-hidden">
  図の説明
</figcaption>

WordPressの投稿の場合

ブロックエディタでも同様の構造を作ることができます。

1. 画像ブロックを挿入します
2. キャプションを入力します
   （キャプションはメディアライブラリから画像を選択し、キャプション欄に入力します。）
3. ブロックエディタで画像を選択し、管理画面右側の 「高度な設定」→「追加 CSS クラス」 に任意のクラス名を入力します
   ここでは例として 「infographic」 というクラス名を使用します（visually-hidden というクラス名である必要はありません）
4. ブロックエディタの 「カスタムHTML」 ブロックを追加し、次のCSSを入力します。

.infographic figcaption {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

これにより、キャプションを非表示にしながらHTML構造として残すことができます。
※ WordPressでは画像ブロックのクラスは figure 要素に付与されるため、figcaption だけを指定するようにCSSを書く必要があります。

シンプルテイストのブログ記事

2026年3月12日にアップした弊社AEDIのホームページ制作の姉妹ブランドで、低価格ホームページ制作「シンプルテイスト（SimpleTastes）」のブログ記事「低価格で高品質なホームページ制作が可能な理由 – シンプルテイストの5つの仕組み」では、インフォグラフィックを使用しています。figcaption は、visually-hidden （この記事では visually-hidden を infographic というクラス名にしています）を使用し視覚的に非表示にしています。

この記事のインフォグラフィックの場合
alt → 図の概要
figcaption → 図の説明

という構造にすることで、HTMLとして意味のある画像説明を作っています。なお、シンプルテイストはWordPressとBootstrapで構築していますので、もともとBootstrap 5に備わっている .visually-hidden を使用することも可能です。この件につきましては、今後、シンプルテイストのホームページの方でご説明したいと思います。

画像説明のHTML設計では、次の使い分けが基本になります。

HTMLは見た目を作るためのものではなく、意味を設計するための言語です。figcaption や visually-hidden を適切に使うことは、見えない部分まで丁寧に設計されたホームページを作ることにつながります。

単に img タグを置くだけでなく、どのように説明するかというHTML設計を意識することで、意味構造とアクセシビリティを同時に整えることができます。

特に図やインフォグラフィックを使う場合には、figcaption と visually-hidden の組み合わせを積極的に取り入れてみられてはいかがでしょうか。