画像altの書き方｜文脈・空欄・リンクの役割を納品前に確認する

altを書く前に、画像を置いた場所と役割をそろえる

画像ファイルではなく掲載箇所を一件として数える

altは、HTMLの画像要素に付ける代替テキストです。画像を直接見なくても、その場所で必要な情報や機能を理解できるようにします。説明文を作る前に、画像があるページ、前後の文章、画像を押したときの動作を一緒に確認しましょう。素材フォルダーだけでは、このうち二つが分からない場合があります。

例えば教材のC01では、白いマグと木製のふたを商品紹介に載せます。周囲に外観の説明はないため、画像が商品の見た目を伝えています。この教材ではマグは陶器製、ふたは木製という設定が確定しています。その設定と掲載目的に合わせ、altを「白い陶器のマグカップと木製のふた」とします。

<img src="mug.jpg" alt="白い陶器のマグカップと木製のふた">

C02では同じmug.jpgを、休憩の記事に雰囲気を添える目的で置きます。マグの色や形は記事の説明に必要なく、リンクにもなっていません。この条件では空のaltが候補になります。素材の名前も内容も同じですが、画像を載せる理由が違うため、C01の文章をそのままコピーしません。

<img src="mug.jpg" alt="">

一枚の素材が三つのページで使われていれば、確認表にも三つの掲載箇所を記録します。同じページの上部と下部で用途が違う場合も、別の行にすると判断を追えます。「画像は全部で何ファイルあるか」と「altを決める場所がいくつあるか」を分けると、再利用画像の見落としを減らせます。

最初に集める情報は画像と文章と機能の三つ

作業の最初は、画像を拡大して内容を読み取り、前後の見出しと本文を読み、リンクやボタンの有無を確認する順で進めます。画像の見た目だけで考える時間を長くするより、掲載目的を一文にするほうが、何を残すべきかを決めやすくなります。

目的のメモは「この商品にふたが付属することを外観から示す」「本文で説明済みの休憩場面に雰囲気を添える」のように書きます。「画像の説明」というメモでは判断材料が増えません。読者がこの場所で知ることや行うことまで書くと、別の担当者も同じ条件で見直せます。

そのうえで、情報を補う画像、装飾の画像、移動や操作に使う画像、詳しい説明を必要とする図表、用途が未確定の画像へ仮に分けます。この分類名を正しく暗記することよりも、必要な情報が画像にだけ残っていないかを調べることが大切です。複数の役割がある画像は、機能と情報の両方を確認します。

※表は横にスクロールできます。

altと本文とキャプションを使い分ける

altは画像を代替する情報です。本文はページの説明を進め、キャプションは画像の近くに見える補足を置く場所です。商品説明の重要条件やグラフの全数値など、すべての読者が参照したい情報は本文や表に置くと、読み返したり比較したりしやすくなります。

キャプションがあるだけで、altを必ず空にできるわけではありません。「商品写真」というキャプションでは、ふたの有無や色は伝わりません。反対に、画像で伝えたい内容を周囲の文章が十分に説明し、画像に追加情報や機能がなければ、説明の重複を避ける選択ができます。文章の有無と十分さを別々に点検してください。

title属性やメディアのファイル名も、altの入力先と混ぜないようにします。編集画面で「タイトル」という欄を埋めても、同じ文章が画像のaltとして出力されるとは限りません。納品表には「どの欄を触ったか」だけでなく、「対象の画像要素にどの値が必要か」を残します。

判断の出発点は、W3C WAIの画像altの判断木で確認できます。判断木は典型例を整理したもので、すべての実装を網羅するものではありません。本記事でも、複雑な名前付けや実装の例外へ広げず、掲載文脈と基本的な画像要素を中心に扱います。

依頼を受ける時点で完成ページがなければ、原稿と配置案をセットでもらいます。「写真だけ先に処理してほしい」という依頼では、素材の説明候補は作れても、掲載箇所の最終判断は後に残ります。仮案と確定を分けておけば、後工程で用途が変わっても、何を見直すべきか分かります。

説明を書く画像と、空にする画像を比べる

書く内容は掲載目的に必要な事実へ絞る

C01のマグの説明には、確定した外観と素材の設定を使いました。ここへ「保温性が高い」「電子レンジ対応」「人気の商品」といった情報を追加すると、画像や教材仕様で確認していない説明が混ざります。実案件なら、材質や容量は依頼者の仕様表などで照合し、必要な場合だけ文章に含めます。

人物写真でも同じです。写っている人の名前、職業、感情、関係性を、表情や服装から決め付けません。紹介文などで確認できる情報と、見た目から想像した情報を分けてください。何でも詳しく描写するより、掲載目的に関係する確かな情報を短く選ぶほうが、誤解を生みにくくなります。

「画像」「写真」といった言葉も、必要かを考えて使います。写真とイラストの違いが説明の要点なら書く意味がありますが、すべてのaltに決まった前置きを付ける必要はありません。読者に残したい対象、状態、関係、行為が伝わるかを先に見ましょう。

文章を短くする段階では、重要な差を消さないようにします。「マグカップ」まで縮めると、C01で伝えたい白い外観や木製のふたがなくなります。逆に背景の机や照明を細かく説明しても、商品紹介に必要な情報が増えないなら省けます。短さだけを採点基準にしないことが大切です。

画像の中だけに残っている文字を探す

C09は「10月20日 14時 紙箱づくり体験」と書かれた架空の案内画像です。同じ情報は本文にありません。altを「イベントのバナー」とすると、何の体験をいつ行うかが抜けます。この教材では画像の必要な文字を「10月20日 14時 紙箱づくり体験」として残します。

<img src="workshop.png" alt="10月20日 14時 紙箱づくり体験">

まず画像内の文字を読み取り、本文にある文字と一つずつ突き合わせます。タイトルだけが同じでも、日時や条件が画像にしかなければ、完全な重複ではありません。日時、対象、場所、申込条件などの必要事項が多いときは、画像の外に読みやすい本文を用意することも検討します。

C10はC09と同じ画像ですが、必要な文字を直後の本文へすべて載せています。画像にはそれ以外の情報がなく、リンクでもありません。この条件なら画像のaltを空にし、本文で案内を読めるようにできます。「紙箱づくり体験」とだけ書いた短い見出しを添える場合とは条件が異なります。

<img src="workshop.png" alt=""><p>10月20日 14時 紙箱づくり体験</p>

案内画像を後で更新したときは、画像と本文の両方を見直します。日時を画像だけ変更すると、空altの判断時に根拠にした本文が古くなります。確認表に「日時などは直後の本文に同一内容あり」と理由を残しておけば、次の担当者も本文との照合が必要だと気付けます。

画像内の文字を扱う基礎は、W3C WAIの文字画像の解説も参考になります。長い案内を一枚の画像にまとめた場合には、altの作文だけで解決しようとせず、読みやすいテキストをページ側に用意できるかも確認しましょう。

空文字と属性の省略と未確認を分ける

C11の葉模様は、段落の周りに飾りとして置く素材です。警告や場面の切り替わりなどの意味はありません。「葉の模様」と説明するより、空のaltにする候補です。ただし、植物の種類を解説する記事に同じ模様を使えば、確認すべき目的が変わります。

<img src="leaves.png" alt="">

HTMLのaltを空にするとは、alt=””のように属性を残して値を空にすることです。alt属性を丸ごと書かない状態とは区別します。W3C WAIの装飾画像の解説では、属性を省いた場合、一部のスクリーンリーダーでファイル名が読み上げられることも説明されています。

確認表には、空文字の横に「装飾で、情報や機能を追加しない」「必要な案内文が直後の本文にそろっている」など、判断した条件を残します。「空欄」とだけ記録すると、作業漏れなのか、意図して空にしたのかが分かりません。理由を一文足すだけで、修正依頼の確認時間を減らせます。

用途を見ていない画像は、この空欄のグループへ入れません。C16のように本文もリンクの有無も不明なら「確認待ち」です。値を空に決めることと、値を決められないことは別の状態なので、作業用データでも空文字と未確定の値を分けて扱います。

見た目ではなく仕様上の意味が必要な場合もある

C14の赤丸は、架空教材の一覧で「受付終了」を表すと決まっています。別の可視文字がないため、altは「赤い丸」よりも「受付終了」が目的に合います。読者が知りたいのは、アイコンの形だけでなく、受付の状態だからです。

<img src="closed.png" alt="受付終了">

ただし、赤色の丸なら何でも受付終了と判断できるわけではありません。実際のサイトでは、エラー、選択中、未読など別の意味も考えられます。アイコンの意味が分からなければ、凡例や仕様を確認します。見えている形を言葉にする作業と、その場所での意味を確定する作業を混同しないでください。

ここまでの教材を見直すと、文章を付けるC01・C09・C14でも、選んでいる情報はそれぞれ違います。外観、画像内の案内文、状態を表す意味という違いです。空にするC02・C10・C11も、雰囲気、十分な重複、装飾という別の理由を持っています。理由まで書けると、画像の種類だけで機械的に決める失敗を防ぎやすくなります。

リンクやボタンは、見た目より行き先と動作を確認する

画像だけのリンクは行き先を伝える

C03は、架空の「アトリエ春」のホームへ移動するリンクです。リンク内にあるのはロゴ画像だけで、ほかに名前を付ける仕組みはありません。この場合、altは「緑色のロゴ」とするより、「アトリエ春 ホーム」として行き先を伝えるほうが機能を理解できます。

<a href="/home/"><img src="logo.png" alt="アトリエ春 ホーム"></a>

画像を押す前に、どこへ移動するのかを判断できる言葉を選びます。「クリック」「詳細」「こちら」といった言葉だけでは、ページ内に似たリンクが並ぶと区別しにくくなります。リンク先が商品ページなら商品、申込ページなら申込先というように、実際の行き先に合わせて確かめます。

リンク先を確認するときは、画像の見た目からURLを推測しません。ロゴが載っていても、ホームではなくキャンペーンページへ移動する設定かもしれません。依頼者の指定、設定されたリンク先、表示される内容の対応を調べ、異なっていれば文章を整える前に差を知らせます。

同じリンクの内側に文字がある場合を比べる

C04では、ロゴ画像と「アトリエ春 ホーム」という文字が一つのリンクに入っています。文字が十分に行き先を伝え、ロゴから追加情報はありません。この条件なら画像のaltを空にし、同じリンクの文字に行き先を担わせる選択ができます。

<a href="/home/"><img src="logo.png" alt="">アトリエ春 ホーム</a>

この判断では「近くに文字が見えるか」よりも、「その文字が同じリンクの内側にあるか」が重要です。HTMLでは、a要素の開始から終了までに画像と文字が両方入っているかを確認できます。画面上で隣に並んでいるだけでは、同じリンクであるとは限りません。

C05は、ロゴ画像だけのリンクが先に終わり、その後ろにリンク外の「アトリエ春 ホーム」という文字があります。ほかの名前付け属性はない教材です。C04と見た目が似ていても、外側の文字を理由に画像のaltを空にすると、画像だけのリンクの行き先を伝える情報が失われます。

<a href="/home/"><img src="logo.png" alt="アトリエ春 ホーム"></a><span>アトリエ春 ホーム</span>

C05ではC03と同じ「アトリエ春 ホーム」を画像のaltに残します。ここでの比較は、周りの文字が常に役立たないという意味ではありません。リンクの名前を考えるときに、画面で近くに見えるという理由だけで、その文字がリンクの名前に使われると決めないための教材です。

※表は横にスクロールできます。

W3C WAIの機能を持つ画像の解説でも、リンク先や動作を伝える考え方と、同じリンク内の文字を補う画像の例が示されています。実装に別の名前付けがある場合は、この単純な教材と条件が変わります。実際のアクセシブルな名前は、完成した要素を別途確認してください。

ボタンは押した後の動作を説明する

C06はプリンターの絵だけを入れた印刷ボタンです。画像のaltを「プリンター」としても、機器の紹介なのか、印刷する操作なのかが曖昧になります。この教材ではボタンの目的が「この教材を印刷」なので、その動作をaltに使います。

<button type="button"><img src="print.png" alt="この教材を印刷"></button>

コード例はボタン内の画像の名前付けを比較するための断片です。実際に印刷を実行する処理は含んでいません。「押すと印刷できた」という動作確認済みの例として扱わないでください。実案件では、名前が動作と合うかの確認と、操作が動くかの確認を分けて記録します。

C07は、同じボタンの中に「この教材を印刷」という見える文字を追加した例です。画像に別の情報はないため、画像のaltを空にして重複を避けます。「リンクやボタンの中に空altがあるから不合格」と一律に判定すると、このような適切なケースまで修正対象になります。

<button type="button"><img src="print.png" alt="">この教材を印刷</button>

ボタンに説明を付けるときは、操作前の状態と操作後の変化も混ぜないようにします。例えば「通知オン」が現在の状態なのか、押すとオンになる動作なのかが曖昧なら、仕様を確認する必要があります。名前の付け方だけで、操作設計そのものの不足を埋めようとしないことが大切です。

同じリンクに文字があっても追加情報は残す

C08は「納品チェック表」というリンク文字の後ろに、PDFのアイコンが付いています。リンク文字にはファイル形式がなく、アイコンだけがPDFであることを知らせています。この場合は画像のaltを「PDF」として、文字にない情報を補います。

<a href="/sample.pdf">納品チェック表<img src="pdf.png" alt="PDF"></a>

C04と同じように文字があるからといって、C08まで空にすると形式の情報が抜けます。逆にリンク文字を「納品チェック表 PDF」に改め、アイコンに追加情報がなくなった場合は、画像のaltをどうするか再検討できます。文字と画像を合わせた全体で、何が重複し、何が不足するかを見ましょう。

確認表では、リンク先と画像altだけを並べるより、「同一リンク内の可視文字」という欄もあると判断しやすくなります。C04なら「アトリエ春 ホーム」、C05なら「なし」と書けます。見た目の距離を文章で説明するより、リンクの内外を具体的に残すほうが引き継ぎ時の誤解を防げます。

ページ全体の確認時には、似た画像リンクが並ぶ箇所にも注意します。すべてのaltが「詳細へ」になっていれば、個々の移動先を区別できません。ただし、機能画像へ商品特徴を長く詰め込むと行き先が埋もれます。必要な識別情報を選び、同じページのほかのリンクと比べて読み直してください。

図表と操作説明は、短いaltと本文の説明を組み合わせる

グラフの題材をaltで知らせて詳細へつなぐ

C12は、架空の教材の申込件数を示した棒グラフです。4月が18件、5月が24件、6月が30件という三つの値があります。altには「教材の4〜6月の申込件数。数値と変化は直後の説明に記載」と書き、詳しい内容を直後の本文で説明します。

<img src="monthly.png" alt="教材の4〜6月の申込件数。数値と変化は直後の説明に記載"><div id="chart-detail">教材の申込件数は4月18件、5月24件、6月30件。合計72件。4月から6月へ12件増えた。</div>

直後の説明は「教材の申込件数は4月18件、5月24件、6月30件。合計72件。4月から6月へ12件増えた」です。何の数値か、いつの数値か、単位は何か、どのような変化があるかが分かるようにそろえています。数字を並べるだけの「18、24、30」では意味が伝わりません。

※表は横にスクロールできます。

この教材の合計は18＋24＋30＝72件、最初と最後の差は30−18＝12件です。数値は実行して検算しています。これは架空データの整合性確認で、現実の申込実績を示すものではありません。グラフを別の数値へ差し替えたら、本文、表、合計、差のすべてを同じ版へそろえます。

「右肩上がりのグラフ」とだけ書くと増加傾向は分かりますが、期間や値を参照できません。一方、複数の系列や細かな注釈まで長いaltへ詰め込むと、必要な数字を探しにくくなります。何を示す図かを短く知らせ、詳しいデータを読み返せる本文や表に置く方法が役立ちます。

短い説明と詳しい説明が離れないようにする

「詳しくは本文」と書くだけでは、どの文章を読めばよいか迷う場合があります。この教材では、説明をグラフの直後へ配置し、altでもその位置を知らせています。編集で図だけを移動したら「直後」という案内が正しいかも確認し直してください。

詳しい説明には、グラフを見る目的に応じた関係を含めます。比較が目的ならどれが多いか、推移が目的なら何がどう変わったかを残します。ただし、三か月の増加だけから「次の月も増える」「施策の効果が出た」といった因果関係や将来予測を足すことはできません。図が示す範囲を越えない説明にします。

表を併記するときは、列見出しと単位をそろえ、値の意味を追える構造にします。画像の表を文章へ移すときに、行と列の関係を一列の文字へ崩してしまうと比較しにくくなります。長いaltに表を押し込むより、必要な見出しを持つ表として置くほうが扱いやすい場面があります。

W3C WAIの複雑な画像の解説は、短い説明と、内容を伝える詳しい説明を組み合わせる考え方を示しています。実際の関連付け方法には複数の選択肢がありますが、本記事では直後の可視テキストを使う単純な教材に絞ります。

操作説明の図では目印と状態を選ぶ

C13は、架空の設定画面で「メール通知」がオフになっている図です。直後の手順では、これをオンへ変更するよう案内します。altは「架空設定図のメール通知がオフになっている」として、何の設定がどの状態かを伝えます。

<img src="mock-settings.png" alt="架空設定図のメール通知がオフになっている">

画面の四隅の飾りや関係のないメニューをすべて説明する必要はありません。読者が手順を実行するために必要な目印、項目名、現在の状態を選びます。図に矢印を置く場合も、「赤い矢印の先」だけで済ませず、矢印が指す項目を本文で呼べるようにします。

教材の操作文は「メール通知の切り替えをオンにします」です。実際のアプリでは保存が必要か、自動で反映されるかなどの確認も必要ですが、この架空図に実在サービスの仕様を付け足しません。図の説明と、製品について検証した操作手順を分けて扱うことが、誤案内の防止につながります。

スクリーンショットを使う実案件なら、画面の版、表示言語、権限による違いを確認します。古い図ではボタン名が変わっていることもあります。altだけを最新の操作名へ変えても、画像の表示が古ければ一致しません。画像と文章を同じ対象に合わせて更新する必要があります。

短い手順図なら行為と順番を簡潔に書く

C15は、封筒を開く場面と申込書を取り出す場面を矢印でつないだ画像です。この二段階なら「封筒を開き、中の申込書を取り出す」というaltで行為と順番を表せます。「封筒と紙のイラスト」では手順の関係が抜けてしまいます。

<img src="open-envelope.png" alt="封筒を開き、中の申込書を取り出す">

ここに「本人確認書類を照合する」「不備があれば返送する」などの分岐が加わると、短い文だけで理解するのは難しくなります。その場合は図の題材をaltで知らせ、番号付き手順や分岐の説明を本文に置きます。画像の種類で固定するより、関係の複雑さを見て説明の場所を決めましょう。

最後に、説明を読んだ人が、図を見た人と同じ判断に使える情報を得られるかを確認します。描かれたものを全部言葉にしたかだけでは十分ではありません。グラフなら比較、設定図なら状態、手順図なら順番というように、その画像を載せた目的が文章側にも残っているかを点検します。

WordPressでは、設定した場所と表示結果を分けて点検する

画像ブロックとメディアの既定値は範囲が違う

WordPressでは、画像ブロックの設定と、メディアライブラリ側の代替テキストを区別します。WordPress.orgの画像ブロックの公式説明では、ブロック設定で追加したaltは、その特定の投稿または固定ページの画像に適用されると説明されています。メディアライブラリで設定するaltは、画像を別の場所へ挿入するときの既定値です。

したがって、メディア側のaltを変更すれば、過去に挿入したすべての掲載箇所へ一括反映されるとは約束しません。C01の商品紹介で使う説明をメディアに保存しても、C02の休憩記事では別の判断が必要です。素材の共通値を置く場所と、掲載箇所ごとに確認する場所を分けて考えましょう。

受託作業では、「メディアの代替テキストを更新」と「指定した記事の画像altを確認」を同じ成果として扱わないようにします。依頼者が期待している範囲を確認し、対象URLと対象画像を一覧にします。過去の全記事が対象なのか、今回納品する一記事なのかで、必要な確認件数が変わります。

一般手順は対象の版と画面に合わせて確認する

以下は公式説明をもとにした一般的な確認手順です。本記事の制作では実際のWordPressを操作していません。画面の項目名や配置は、WordPressの版、編集環境、利用するブロックなどによって異なる可能性があるため、対象サイトの画面で確認してください。

1. 対象の投稿や固定ページを特定し、修正する画像ブロックを選びます。
2. 画像の前後の文章とリンク設定を読み、掲載目的に合うaltを決めます。
3. 対象ブロックの代替テキストを確認し、文章または意図した空の判断を記録します。
4. 承認された範囲で保存し、保存後の表示と対象要素を確認します。
5. 確認表に、対象箇所、値、空にした理由、実施した確認方法を残します。

2026年10月に確認した公式資料には、画像を装飾として指定する項目も載っています。ただし、すべての環境に同じ表示があるとは限りません。「その項目が見当たらないからaltの判断ができない」とせず、対象環境の説明と出力を確認します。見えていない操作結果を推測で報告しないことが重要です。

ブロック選択や配置の操作で迷う場合は、WordPressブロックエディターの使い方も参照してください。ここで扱うのはaltの判断と確認範囲です。画像の寸法、縦横比、容量の調整は、WordPress画像サイズの決め方で別に確認できます。

差し替えと複製の後は元の説明を読み直す

画像を差し替えたら、前の画像のaltが残っていないかを見ます。例えばマグの写真をふたの拡大図へ変更した場合、「白い陶器のマグカップと木製のふた」という説明が現在の画像に合うとは限りません。ファイルが更新されたことと、文章が更新されたことは別々に確かめます。

ブロックを複製して使うときも、複製元と掲載目的が同じかを確認します。商品紹介から休憩の記事へ移すなら、C01からC02への変化に相当します。リンク先だけを変えた場合には、C03の行き先を表すaltも新しいリンク先に合わせる必要があります。

トリミングで画像の一部が見えなくなった場合も注意が必要です。ふたが切れて見えなくなったのに、altだけがふたの説明を続けていれば、表示内容との対応を見直す必要があります。切り抜きが単なる装飾上の調整なのか、説明に使っていた情報を消してしまったのかを確認してください。

本文を改稿した場合にも判断が変わります。C10で案内内容をすべて本文へ載せていたのに、後から本文を短縮して日時を消すと、画像だけに必要な情報が残ります。画像の更新だけを検知して確認する運用では、この変化を拾えません。altを空にした根拠の文章も見直し対象へ含めます。

入力欄の確認と完成ページの確認を分ける

編集画面の欄に文章が入っていることは、一つの確認結果です。保存後のページで対象の画像要素がどう出力されているか、リンクの範囲がどうなっているかは別の確認です。テーマやブロックによって構造が変わる可能性があるため、納品時にどこまで見たかを区別して記録します。

例えば「入力欄を確認済み、保存後のHTMLは未確認」と書けば、残っている作業が分かります。「alt対応済み」という一言だけでは、文章を考えた段階なのか、実装した段階なのか、支援技術まで確認した段階なのかが伝わりません。作業を終えた場所まで正確に言葉にしてください。

実環境の確認を契約範囲に含める場合は、対象ブラウザーや確認方法、誰が実施するかを事前にそろえます。高度なARIAの設計、CSS背景、SVG全般、PDFやSNSの代替テキストまで、同じ画像確認の依頼に自動で含めないようにします。範囲が増えたら、必要な知識と検証条件も合わせて見直しましょう。

確認表に判断と未確認を残して納品する

確認表は次の人が同じ箇所を探せる形にする

納品する確認表には、掲載URL、ページ内の位置、画像ファイル、役割、altの値、判断理由、確認方法、保留事項を入れます。画像のファイル名だけでは、同じ素材がどこで使われているか分かりません。「商品説明の最初」「料金表の直後」など、探すための位置情報も添えます。

値の欄には文章をそのまま記録し、空文字の場合は別の状態欄で「意図した空」と示します。保留は「未確定」にして、回答待ちの質問を別に書きます。表を受け取った人が、空のセルを見て自動的に補完しないよう、三つの状態の意味を先に共有してください。

※表は横にスクロールできます。

本教材の16場面は、文章を付けるものが10件、意図して空にするものが5件、用途の回答待ちが1件です。これは教材の条件に基づく集計で、実サイトの望ましい割合ではありません。「全画像の何割にaltを付ければよい」という目標にはしないでください。

最初は一ページ分の確認表で練習すると、欄の不足に気付きやすくなります。例えばリンク画像が多いページなら、リンク先と同一リンク内の文字を別欄にします。図表が多いページなら、詳細説明の場所と元データの版を追加します。すべての現場へ同じ表を押し付けず、判断を再現するために必要な情報を選びます。

機械的な確認と意味の確認と実環境の確認を分ける

静的HTMLでは、img要素にalt属性があるか、値が空か、教材で決めた文章と一致するかなどを調べられます。本教材では、確定した15件のHTML断片を対象に確認しています。C16には確定した値もHTML断片もなく、未確認のまま検査済みに数えていません。

一方、文章が掲載目的に合っているか、画像だけに必要な情報が残っていないかは、文脈と画像を照らして考える確認です。属性があることだけでは、この判断まで正しいとはいえません。「写真01.jpg」という値でも属性の存在確認は通るため、技術的な有無と内容の妥当性を分けます。

さらに、完成ページのDOM、アクセシビリティツリー、スクリーンリーダーの読み上げなどを確認する工程があります。静的な教材検査を、この実環境の検証へ読み替えないでください。チェックツールで警告が出なかったことだけをもって、ページ全体のアクセシビリティ適合を保証することもできません。

納品表には「HTML属性確認」「意味の確認」「実環境確認」を別々に記録します。実施していない項目は未実施と書きます。実施した場合は対象と方法を残し、問題があれば再現する条件も添えます。確認の種類を分けるほど、後から追加検証を頼むときに必要な作業を限定できます。

十個の負例から修正する場所を見つける

確認の練習では、正しい例だけを読んで終わらず、条件を崩した例も見ます。教材には十個の負例があり、想定した問題を静的な検査で十件とも検出しました。ただし、あらかじめ決めた教材条件に対する検査です。どんなサイトの誤りでも自動発見する万能な判定ではありません。

※表は横にスクロールできます。

例えばC04の空altに機械的に「アトリエ春 ホーム」を追加すると、同じリンク内の文字と説明が重なります。この修正は、未入力らしく見える場所を埋める作業としては自然でも、教材の目的には合いません。空欄を抽出した後に理由の欄を読む工程が必要です。

逆にC05をC04と同じものとして空にするのは、リンクの範囲を見落とした修正です。見た目だけの比較では発見しにくいため、対象の要素がどこで始まりどこで終わるかを確かめます。同じ画像や同じ文字を使っていても、構造が違えば結果が変わることを覚えておきましょう。

用途が分からない画像は質問を一つにまとめる

C16は写真だけが届き、掲載先、本文、用途、リンクの有無が分かっていない場面です。この段階で装飾だと決めたり、ファイル名から文章を自動生成したりせず、必要な情報をまとめて質問します。確認待ちの行を残せば、残作業も納品対象の件数も追えます。

質問文の例は「この写真を載せるページと前後の本文、写真で伝えたい内容、リンクにするかどうかを教えてください」です。単に「altは何にしますか」と聞くよりも、判断に必要な材料がそろいやすくなります。相手に専門用語の判断を丸ごと委ねず、用途を確かめる質問にします。

返答が「休憩記事の飾りで、リンクは付けない」なら、C02に近い条件として再判断できます。「商品ページでふたを紹介する」なら、C01に近い情報画像として確認します。どちらの返答でも、写真と掲載本文を見てから確定します。回答が来たという事実だけで、確認表を完了へ変えないでください。

判断が変わったときは、古い理由を消して値だけ上書きするより、確認日と変更理由を残すと便利です。「本文へ日時を追記したため、C09相当からC10相当へ変更」のように記録すれば、修正の意味を説明できます。大規模な管理を始めなくても、一行の履歴で十分に役立つ場面があります。

副業の納品では成果の範囲を具体的に伝える

記事入稿や小規模なサイト更新の仕事では、altの文章案、指定箇所への設定、保存後の確認をどこまで担当するかをそろえます。「画像対応一式」とだけ見積もると、依頼者が過去記事の一括修正や支援技術の検証まで期待している可能性があります。対象ページと確認方法を先に書き出してください。

納品文には、対象の掲載箇所数、文章ありと意図した空の件数、回答待ち、実施した確認を短く記載します。本教材なら「16場面の判断表を作成。文章10件、意図した空5件、用途確認待ち1件。確定15件のHTML断片を静的確認。実サイトへの設定と実環境検証は未実施」という範囲になります。

この書き方なら、依頼者は残っている一件と次の確認工程を判断できます。「アクセシビリティ対応済み」「SEO対策完了」と広く言い切るより、渡した成果を具体的に示すほうが合意しやすくなります。案件獲得、単価、検索順位、売上の改善を、この作業だけで保証しないようにしましょう。

SEOの観点でも、読者に有用で文脈に合ったaltを考えることが基本です。Googleの画像SEOの公式説明は、適切な文脈で役立つ内容を記し、キーワードを詰め込まないよう案内しています。「alt 書き方」「副業」「おすすめ」をすべての画像へ並べても、その画像の説明にはなりません。

記事全体の検索意図や根拠の整え方は、SEOライティングの実践手順で確認できます。原稿の受け取り方や納品前チェックを練習する場合は、Webライターのテストライティングも参考にしてください。画像altの確認は、原稿と実装の引き継ぎを具体的にする作業として取り組めます。

最後に一枚選び、その掲載場所で必要な情報、周りの文章、リンクの範囲を確認してみましょう。文章を書く場合は必要な内容を残し、空にする場合は理由を残し、分からない場合は質問を残します。この三つを区別して渡せれば、次の担当者が空欄を埋め直したり、未確認を完了と取り違えたりするのを防ぎやすくなります。