生成AIに「アクセシビリティに配慮して」と頼むときに、具体的に伝えるべきこと

生成AIにサイトのHTML/CSSを書かせるとき、「アクセシビリティに配慮して」と一言添えたことがある方もいるのではないでしょうか。実際に出力を確認すると、画像にaltが無かったり、見出しタグが文章の構造と食い違っていたりと、期待した対応になっていないことがあります。

これは「レスポンシブにして」と同じく、AIにとって解釈の幅が広すぎる指示です。この記事では、あいまいな指示で起きやすいすれ違いと、代わりに伝えるとよい具体的な指示を紹介します。

「アクセシビリティに配慮して」は、ゴールの名前であって、手段ではない

アクセシビリティへの配慮とは「より多くの人がサイトを使える状態にする」というゴールの名前であり、そのための具体的な手段（alt属性の付け方、見出しタグの選び方、色の組み合わせなど）はいくつも存在します。AIに「配慮して」とだけ頼むと、そのどれを・どの程度反映するかはAI任せになります。

結果として、画像のalt属性が空のまま、見出しタグの順序が飛んでいる、文字色と背景色のコントラストが弱い、といった見落としが起きやすくなります。

具体的に伝えるとよい4つの指示

「アクセシビリティに配慮して」の代わりに、次のような具体的な指示を添えると、AIの出力が安定しやすくなります。

• 「画像にはすべて具体的なalt属性をつけて」
• 「見出しは<h1>から順に、レベルを飛ばさず使って」
• 「文字色と背景色のコントラストを確保して（WCAGのAA基準・目安4.5:1）」
• 「装飾だけのアイコンや画像には、alt=""やaria-hiddenを付けて」

生成された結果は、実際に確認する

指示を具体的にしても、AIの出力が完璧とは限りません。alt属性が「画像」のような中身の無い文言で埋められていたり、コントラストの数値が指示どおりになっていなかったりすることもあります。

公開前に、実際にコントラストチェッカーのようなツールで数値を確認したり、見出しタグの並び順をざっと見返したりする一手間を挟むと、AIの出力をそのまま信じるより安心です。

まとめ：具体的な指示が、確認の手間も減らす

「アクセシビリティに配慮して」という指示自体は間違いではありませんが、それだけでは足りません。altの付け方・見出しの順序・コントラスト・装飾要素の扱い、この4点を具体的に伝えることで、あとから直す手間を減らせます。

プロンプトの書き方全般のコツはChatGPT・Claude・GeminiにWebサイトの下書きを作らせるプロンプトのコツ5つで扱っています。Studioに取り込んだあとにアクセシビリティを整える方法はStudioのアクセシビリティ機能の基本でも扱っているので、あわせてご覧ください。