Cursorで画像のalt属性とコントラストを一括点検・補正する手順

「自社サイトの画像、altが空っぽのまま放置されている」「文字色が薄くて読みづらいと言われたけど、どこをどう直せばいいか分からない」。こうした悩み、心当たりはありませんか。

この記事では、AIコードエディタのCursorを使って、画像のalt属性の抜けや、文字と背景のコントラスト不足を一気に洗い出し、補正していく具体的な手順を解説します。コードが書けなくても、指示の出し方さえ分かれば現実的に進められます。誰にでも届くサイトにするための、最初の一歩をいっしょに整理していきましょう。

Contents / 目次

1. 結論。Cursorに「探す・直す・確認する」を分担させれば内製で進む
2. 具体的なやり方。Cursorで探して直すまでの4ステップ
3. 取り組むとどう変わるか。工数とリスクの両面で効く
4. よくある失敗と回避法。AIに任せきると起きること
5. 判断の目安。どこまで自分でやり、どこから任せるか
6. よくある質問

結論。Cursorに「探す・直す・確認する」を分担させれば内製で進む

結論から言うと、alt属性とコントラストの補正は、Cursorに「サイト全体を走査して問題箇所を一覧化させる」「修正案を出させる」「直した結果を再チェックさせる」の3つを分担させるのが最短ルートです。ご自身で行うのは、AIが出した修正案が文脈に合っているかの判断と、仕上げの手動確認です。

ここで用語を整理しておきます。alt属性とは、画像が表示できないときや、目の見えない方が読み上げソフトを使うときに、その画像の内容を伝える代わりのテキストのことです。かんたんに言うと「画像の説明文」です。コントラスト比とは、文字色と背景色の明るさの差を数値にしたもので、差が小さい（コントラストが低い）ほど文字が読みにくくなります。

こうした対応を「アクセシビリティ対応」と呼びます。アクセシビリティとは、年齢や障害の有無にかかわらず、誰もが情報にアクセスできる状態のことです。国際的な基準としてWCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）があり、最新版はWCAG 2.2です。国内では、WCAG 2.0と同じ内容の日本産業規格JIS X 8341-3:2016が参照されることが多くなっています。正式版は、W3Cが英語で公開しているWCAG 2.2（W3C勧告）です。日本語の参考訳は、ウェブアクセシビリティ基盤委員会が公開しています。

まず、Cursorに何を任せ、何を自社で確認するのかを、次の表にまとめます。

工程	担当	具体的にやること
問題箇所を探す	Cursor（得意）	サイト内のHTMLを走査し、altが空・欠落している画像、コントラスト不足の色指定を一覧化
修正案を作る	Cursor（得意）	画像の文脈をふまえたalt文の下書き、基準を満たす代替色の提案
意味が合うか判断	人間（必須）	alt文が画像の「目的」に合っているか、装飾画像か意味のある画像かを最終判断
直した結果を再確認	Cursor＋人間	再走査でエラーが消えたか確認し、読み上げ・キーボード操作は人が体感チェック

ここがポイント。自動チェックツールで見つけられるのは、WCAG違反の一部にとどまります。altの欠落やコントラスト不足のように「ルールが明確な問題」はAIが得意ですが、「そのalt文が本当に意味を伝えているか」という主観的な判断は人にしかできません。だからこそ、AIに丸投げではなく分担が前提になります。

具体的なやり方。Cursorで探して直すまでの4ステップ

実際の手順は、大きく4ステップです。コードが読めなくても、Cursorに自然な日本語で指示すれば進められます。ここではWordPressやHTMLで作った自社サイトのファイルを、Cursorで開いている前提で説明します。

ステップ1。まずはalt属性の抜けを洗い出す

最初にやるのは「現状把握」です。Cursorのチャット欄に、プロジェクト全体を対象にしてalt属性の状態を一覧化するよう指示します。いきなり修正させず、まず全体像を出させるのがコツです。どれだけ問題があるか分かると、優先順位がつけやすくなります。

このとき使えるプロンプトの例が次のものです。角括弧の部分を自社の状況に合わせて書き換えてください。

あなたはWebアクセシビリティに詳しいフロントエンドエンジニアです。
このプロジェクト内のHTMLファイル（［例：public/ 配下のすべての.html］）を走査して、
以下の観点で画像（imgタグ）の問題を一覧表にしてください。

【チェックする項目】
1. alt属性が存在しない画像
2. alt属性が空（alt=""）だが、装飾ではなく意味がありそうな画像
3. alt属性が「image」「写真」「無題」などファイル名や無意味な値になっている画像

【出力形式】
ファイルパス / 該当行 / 現在のalt / 問題の種類 / 緊急度（高・中・低）
の列を持つ表で出力してください。

【注意】
・まだ修正はしないでください。現状の一覧だけ作ってください。
・装飾目的のアイコンなど、altが空でも問題ない可能性があるものは「要確認」と備考に書いてください。

このプロンプトのポイントは「まだ修正しないで」と明示している点です。AIは指示するとすぐ直そうとするので、まず全体を見せてもらう段階を分けると、抜け漏れや誤修正を防げます。うまく一覧が出ない場合は、対象フォルダの指定を具体的にすると精度が上がります。

ステップ2。文脈をふまえたalt文を作らせる

次に、洗い出した画像に対してalt文を作らせます。ここで大事なのは、画像を単体で説明させるのではなく「そのページのどこに、何のために置かれているか」をふまえさせることです。たとえば同じ製品写真でも、製品紹介ページなら「型番と特徴」、事例ページなら「導入シーン」を伝える方が役立ちます。

alt文には目安があります。読み上げで聞いたときに長すぎず短すぎず、画像の「目的」を一文で簡潔に伝えるのが基本です。代替テキストの長さに仕様や規格の上限はありませんが、デジタル庁のウェブアクセシビリティ導入ガイドブックは、スクリーンリーダーで読みやすいように80字を目安にするよう勧めています。冗長な描写を削り、要点だけに絞ることを意識しましょう。純粋な飾りのアイコンや区切り線などは、あえて空（alt=””）にして読み上げ対象から外すのが正解です。すべての画像に説明をつければいいわけではない、という点は覚えておきましょう。

alt文を作らせるときに、判断軸を一緒に渡すと品質が安定します。次のチェックリストをプロンプトに含めると効果的です。

• 目的を書く：「何が写っているか」より「なぜこの画像があるか」を優先する
• 重複を避ける：すぐ近くの見出しや本文と同じ説明を繰り返さない
• 冒頭に「画像」と入れない：読み上げソフトが自動で画像と伝えるため不要
• 装飾は空に：意味を持たない飾りはalt=””にして読み飛ばさせる
• 固有名詞は正確に：製品名・人名・地名は推測せず、分からなければ人が補う

ステップ3。コントラスト不足を見つけて代替色を出させる

コントラストは、CSSで指定された文字色と背景色の組み合わせをCursorに調べさせます。WCAGのAAレベルでは、通常サイズの文字で4.5対1以上、大きな文字（およそ18.66px太字または24px以上）で3対1以上のコントラスト比が求められます。この数値基準は明確なので、AIに判定させやすい領域です。

次のようなプロンプトで、問題のある配色と修正案を出させます。

あなたはWCAG 2.2に詳しいデザインエンジニアです。
このプロジェクトのCSS（［例：style.css と各HTML内のstyle指定］）から、
文字色（color）と背景色（background）の組み合わせを抽出し、
コントラスト比を計算してください。

【判定基準】
・通常テキストは 4.5:1 以上で合格
・大きい文字（18.66px太字 または 24px以上）は 3:1 以上で合格

【出力形式】
セレクタ / 文字色 / 背景色 / 現在の比率 / 合否 / 修正案の色（HEX）/ 修正後の比率
の表で出してください。

【修正案の条件】
・元のブランドカラーの色味（色相）はできるだけ保ち、明度だけ調整してください。
・修正案は必ず基準を満たす値にしてください。
・背景画像やグラデーション上の文字は「自動判定が難しい・要目視」と備考に書いてください。

「色相は保って明度だけ調整」と指示しているのが工夫です。こうすると、ブランドの印象を大きく変えずに読みやすさだけを上げられます。背景が画像やグラデーションになっている箇所は自動判定が難しいので、AIに「要目視」と分けさせ、そこだけ人が確認します。

ステップ4。直して、もう一度チェックさせる

修正案に納得したら、Cursorに反映させます。このとき一気に全部直させるのではなく、ファイル単位やセクション単位で区切って指示し、差分を見ながら進めるのが安全です。AIの一括置換は便利な反面、意図しない箇所まで変えてしまうことがあるためです。直し終えたら、ステップ1と3のプロンプトをもう一度走らせて、エラーが消えたかを確認します。最後に、実際にキーボードだけで操作できるか、読み上げで意味が通るかを人が体感で確かめれば完了です。

作業前に必ずGitなどでバックアップを取るか、コミットしてから進めてください。AIによる一括修正は範囲が広いため、元に戻せる状態にしておかないと、表示崩れが起きたときに復旧が大変になります。

取り組むとどう変わるか。工数とリスクの両面で効く

こうした補正に取り組むと、まず「作業時間」が劇的に変わります。手作業ではとても終わらない量を、現実的な時間で片づけられるようになります。

手作業で数百枚、数千枚の画像に一枚ずつaltを書く作業は、想像するだけでも気が遠くなります。これをCursorのようなAIに走査と下書きまで任せ、人が意味のチェックだけを担えば、同じ作業量でもかかる時間は大きく圧縮できます。どれだけ短縮できるかは画像の枚数やサイトの構造によって大きく変わりますが、「一枚ずつ書く」から「仕組みで生成して自分で確認する」へ変えるだけで、現実的に片づく作業になります。

効果は工数だけではありません。次の3つの面で、じわじわ効いてきます。

• 届く相手が増える：読み上げソフトの利用者や、明るい屋外でスマホを見ている人にも情報が伝わる
• 検索とAIに拾われやすくなる：altは画像の内容を機械に伝える情報源でもあり、画像検索やAIによる理解の助けになる
• 法的・取引リスクが減る：アクセシビリティ未対応は「見えない負債」として、後からの修正コストや取引上のリスクになりやすい

背景として、EUでは2025年6月28日から欧州アクセシビリティ法（EAA）が適用されています。対象はEUの消費者に向けた電子商取引・銀行サービス・電子書籍など、指定された製品とサービスで、サービスを提供する零細企業は要件の適用が免除されます。EU向けに製品やサービスを販売している企業は、対象になるかを確かめておくと安心です。日本国内では、デジタル庁がウェブアクセシビリティ導入ガイドブックを無料で公開しています。ウェブアクセシビリティに初めて取り組む行政機関の職員や事業者に向けて、優先して対応する達成基準や、チェックツールで見つけられる問題は2割から3割程度にとどまることを解説しているので、一読をおすすめします。

よくある失敗と回避法。AIに任せきると起きること

便利な反面、Cursorに任せきると典型的な失敗が起きます。起こりやすい3つを、原因と防ぎ方のセットで紹介します。

失敗1。AIが「見たまま」を全部書いて、目的がぼやける

これは、altの目的を指定せずに生成させたときに起きます。AIは画像内の視覚的な詳細をすべて書こうとする傾向があり、「青いシャツの男性が白い机の前で笑顔で…」のように冗長なalt文を作りがちです。結果として、読み上げで延々と細部を聞かされ、肝心の「なぜこの画像があるか」が伝わりません。防ぐには、ステップ2で示したように「目的を優先」「冗長な描写は避けて簡潔に」とプロンプトで明確に縛ること。そして必ず人が読み返し、画像の役割に合っているかを確認することです。

失敗2。AIが画像を誤認識し、事実と違う説明をつける

AIは「幻覚」を起こすことがあります。画像に写っていないものを書いたり、人物やロゴを誤認識したり、勝手に解釈や感想を足したりするのです。製品名や人名を取り違えると、そのまま公開すれば誤情報を発信することになります。回避策はシンプルで、固有名詞が絡む画像のalt文は必ず自分で事実確認をすること。AIには「分からない固有名詞は推測せず空欄にして」と指示し、最後は自分で埋める、という線引きが安全です。

失敗3。自動チェックの合格を「完了」だと勘違いする

自動ツールでエラーがゼロになると、つい「対応完了」と思ってしまいます。しかし前述のとおり、自動で検出できるのはWCAG違反の一部にすぎません。残りの多くは、たとえばキーボードだけで操作できるか、読み上げの順序が自然か、動画に字幕があるかといった点で、人が実際に触らないと分かりません。回避策は、自動チェックを「入口」と位置づけ、最後に必ず手動チェックを入れること。キーボードのTabキーだけでメニューやフォームを操作してみる、スマホの読み上げ機能で一度通して聞いてみる、この2つをやるだけでも見え方が変わります。

判断の目安。どこまで自分でやり、どこから任せるか

ここまで「内製でできる」と書いてきましたが、率直に、すべてを自社で抱えるのが正解とは限りません。妥協点と判断軸をお伝えします。

まず、altとコントラストの一次補正は、内製と相性が良い領域です。ルールが明確で、Cursorに任せやすく、効果も実感しやすい。ここは自社でやってみる価値が十分あります。一方で、つまずきやすいのが「装飾画像か意味のある画像かの線引き」「フォームのラベルや操作順序の設計」「読み上げソフトでの実機確認」です。これらは知識と経験がものを言う部分で、AIの自動判定だけでは越えられません。

もう一つの落とし穴がコストの見落としです。一度きりの修正で終わらせると、新しいページを追加するたびにまた崩れます。アクセシビリティは「一回直すプロジェクト」ではなく「更新のたびに保つ習慣」として設計することが大事です。Cursorのプロンプトを社内の手順書として残し、ページ公開前のチェックに組み込めば、属人化せずに回り続けます。

判断軸の目安。「既存ページのalt・コントラスト補正」は内製でトライ、「サイト全体の設計見直しや、取引条件として準拠証明が必要なケース」は専門家と並走、と切り分けると失敗しにくいです。

業者やツールを選ぶときの注意点も一つ。「ボタン一つで全自動対応」をうたうツールは便利ですが、自動でできる範囲には限界があるという前提を理解した上で選ばないと、「導入したのに使いにくいまま」というズレが起きます。AIにできること・できないことの線引きを正直に説明してくれる相手を選ぶのが、結局いちばん安全です。なお、コードが読めなくてもCursorでWordPressサイトを修正する手順はCursorでWordPressを修正する手順の記事でも解説しています。配色やデザインのトレンド調整に踏み込みたい方はCursorでダークモードを実装する記事もあわせてどうぞ。

よくある質問

画像の代替テキストや文字色の点検を、サイトのリニューアルとあわせて進めたい方は、コレットラボのホームページ制作・LP制作をご覧ください。スマートフォン版を先に設計し、公開前にスマートフォンとパソコンの両方で文章とリンクを確認します。