この記事の目次 開く・閉じる
今回の仕上がり
自作のゲーム画面図を3つの役割に切り替える作例です。飾りではaltが空になり、ボタンでは「星あつめの作例を選ぶ」という名前で操作できました。下のコード表示は実際の属性を読み取ったものです。ゲームを開く完成機能ではなく、役割を比べる見本です。
こちらは実際に触れる作例です。 スクリーンショットで操作や音を代用したものではありません。音の作例も自動では鳴りません。
必要なものと操作順
ブラウザだけで試せます。図はみっけメディアが作ったSVGで、他者のゲーム画面ではありません。altは通常の表示では見えないため、作例に属性の文字表示を添えています。
- 「情報を伝える画像」を押し、左のプレイヤーと右の3個の星を表す説明を見る。
- 「飾りの画像」を押し、コード表示がalt=""になることを確かめる。
- 「操作ボタンの画像」を押し、枠付きの小さな画像ボタンへ変わることを見る。
- その画像ボタンを押し、「星あつめの作例を選びました」と表示されることを確認する。
- 自分の記事の画像も、情報、飾り、操作のどれに当たるか考え、周囲の文字と重複しない説明を決める。
仕組みと使いどころ
情報を伝える画像には、必要な内容を書く
スクリーンショットのすべてを長文にする必要はありません。記事でその画面を見せる理由に合わせて、伝えたい状態や押す場所を短く書きます。作例はプレイヤーと星の位置を説明しています。
複雑な図やグラフなら、短いaltだけに情報を詰め込まず、本文や表にも内容を用意します。画像が見えないと理解できない手順を、そのまま残さないようにします。
飾りと、説明の省略を混同しない
本文の理解や操作に関係しない純粋な飾りでは、空のaltを使う方法があります。alt属性自体を消すのと、空文字を指定するのは別です。
同じ画像でも、記事の主役なら情報画像、背景の装飾なら飾りという違いが出ます。ファイル名だけで一律に決めず、置く場所と役割を見ます。写真やゲーム画面の権利確認は、説明文を付けても別に必要です。
画像ボタンは押すと何が起きるか伝える
画像だけのボタンでは「青い四角」より、実行する操作が分かる名前が必要です。作例はbuttonの中のimgに「星あつめの作例を選ぶ」と指定し、その名前で操作できることを確認しました。
すでに文字付きのリンクで同じ内容を説明している場合は、画像の説明が重複することもあります。WAIの判断フローを使い、リンク内の文字や画像の役割と合わせて決めてください。
コードの要点
<!-- 内容を伝える画像 -->
<img src="star-map.svg" alt="星あつめの画面例。左にプレイヤー、右に3個の星。">
<!-- 純粋な飾り -->
<img src="star-map.svg" alt="">
<!-- 画像が操作の名前を持つボタン -->
<button><img src="star-map.svg" alt="星あつめの作例を選ぶ"></button>3つの役割を並べた説明用コードです。作例ではボタンで役割を切り替え、現在の属性を表示します。読み上げソフトの実際の発声を録音したものではありません。
自作のHTML・CSS・JavaScript・SVGはCC0です。ZIP内のREADMEと、共通のサンプル利用条件をご確認ください。
できたかの確認とよくあるつまずき
- 情報画像の説明と、図の内容が一致する。
- 飾りへ切り替えるとaltが空文字になる。
- 画像ボタンを目的の名前で選べて、押した結果が文字で出る。
ここに注意。「画像」「スクリーンショット」という種類だけでは、必要な内容が伝わらないことがあります。何の状態を見せたいかを具体的にします。
ここに注意。コードにaltがあれば十分とは言えません。説明の正確さ、周囲との重複、読み上げる順番も実際に確認します。
出典と確認した範囲
作例の確認日：2026年10月3日。個別の条件と未確認範囲は以下の通りです。共通の検証方法も公開しています。
alt属性の切り替え、アクセシビリティ上のボタン名による選択と操作、390px幅を確認。読み上げソフトの発声、実機端末、すべての画像の適合は未確認です。
W3C WAI：An alt Decision Tree。情報画像、装飾画像、操作に使う画像の説明を判断する流れ。