ChatGPTは、Webページの見出し構造、画像の代替テキスト、フォームのラベルなどから、利用しにくさにつながる候補を見つける一次点検に使えます。
ただし、コードを貼って「アクセシビリティに対応していますか」と聞くだけでは不十分です。キーボードだけで操作できるか、文字を拡大しても読めるか、代替テキストがページの文脈に合うかは、人が実際のページで確かめる必要があります。
この記事では、ChatGPTの確認結果をうのみにせず、公開前に基本的な障壁を減らす5ステップを解説します。
Webアクセシビリティとは
Webアクセシビリティは、年齢、障害、利用環境などにかかわらず、できるだけ多くの人がWebの情報や機能を利用できるようにする考え方です。
W3Cのアクセシビリティ原則では、情報や操作を「知覚できる」「操作できる」「理解できる」「堅牢である」という観点で整理しています。初心者が最初に確認しやすいのは、次の4点です。
- 見出し：内容の順序と階層が分かるか
- 画像：必要な画像に適切な代替テキストがあるか
- 色：文字と背景に十分な差があるか
- 操作：キーボードだけでも移動・実行できるか
ChatGPTはHTMLや説明文を読み、確認漏れを減らすのが得意です。一方で、実際の見え方や操作感を体験できるわけではありません。「AIで候補を洗い出し、人が画面で確かめる」と役割を分けます。
確認前に準備するもの
次の4つを用意します。
- 確認するページの目的
- 利用者にしてほしい操作
- 対象部分のHTMLとCSS
- 実際に表示できるテストページ
たとえば問い合わせページなら、目的は「問い合わせ方法を伝える」、主な操作は「入力して送信する」です。この前提が分からないと、画像の説明やボタン名が適切か判断しにくくなります。
会員情報、入力済みフォーム、APIキー、非公開URLなどはChatGPTへ貼り付けません。コードは対象範囲だけに絞り、公開して問題ない内容か確認してください。
既存ページの修正が初めてなら、先にChatGPTでWebサイトを作る方法でHTML・CSSの役割を確認すると進めやすくなります。
ChatGPTでWebアクセシビリティを確認する5ステップ
1. ページの目的と確認範囲を決める
「サイト全体を確認して」ではなく、1ページ、または1つの機能へ絞ります。ページの目的、想定利用者、重要な操作も一緒に伝えます。
最初は、記事ページの見出しと画像、問い合わせフォーム、申込みボタンなど、結果を自分で確かめやすい範囲がおすすめです。
2. タイトル・見出し・構造を確認する
対象HTMLを渡し、ページタイトル、言語指定、見出しの順序、ランドマーク、リンクやボタンの名前を確認してもらいます。
見出しは文字を大きくするためではなく、内容の階層を示すために使います。h1 の次に理由なく h3 へ飛んでいないか、同じ文言のリンクが別の場所へ移動しないかなどを見ます。
ChatGPTの指摘には、該当箇所、問題になり得る理由、最小限の修正案を付けてもらいます。コード全体の一括書き換えは避け、1項目ずつ修正します。
3. 画像と代替テキストを確認する
画像には、見えない場合でも意味が伝わる代替テキストが必要なことがあります。ただし、すべての画像へ詳しい説明を付ければよいわけではありません。
本文と同じ内容を繰り返す装飾画像は、空の alt="" が適切な場合があります。一方、グラフや手順図は、ページ内で伝えたい意味を文章でも示す必要があります。W3CのEasy Checksでも、代替テキストは画像の文脈と目的に応じて確認するよう案内されています。
ChatGPTには、画像の見た目だけでなく「この画像がページで果たす役割」を伝えます。生成された代替テキストは、周囲の文章と重複していないか、人が最終確認してください。
4. 色とキーボード操作を確認する
文字色と背景色を伝えると、ChatGPTにコントラスト比の確認方法や修正候補を整理してもらえます。WCAG 2.2のコントラスト解説では、通常サイズの文字に少なくとも4.5:1のコントラスト比を求めています。
ただし、色コードの入力間違いや背景画像の影響もあるため、専用のコントラスト確認ツールでも検証します。色だけでエラーや選択状態を伝えていないかも見ます。
次に、マウスを使わず Tab、Shift + Tab、Enter、矢印キーなどで操作します。
- フォーカス位置が見えるか
- 移動順が画面の流れと合うか
- メニューやダイアログから抜けられるか
- リンクやボタンを実行できるか
これはHTMLを読むだけでは確定できません。ChatGPTには確認項目を作ってもらい、操作は人が実施します。見た目を修正する場合はChatGPTでCSSコードを作る方法のように、変更範囲を小さく保ちます。
5. 人が再確認して結果を記録する
修正後は、同じページをもう一度確認します。キーボード操作に加え、ブラウザーの文字拡大、スマートフォン幅、フォームのエラー表示も試します。
結果は次の3つに分けると、AIの推測と確認済みの事実が混ざりません。
| 状態 | 意味 |
|---|---|
| 確認済み | 実ページで操作・表示を確認した |
| 要確認 | ChatGPTが候補を挙げたが、人の確認が終わっていない |
| 対象外 | 今回のページや機能では確認できない |
ChatGPTの回答だけを根拠に「WCAG準拠」「アクセシビリティ対応済み」と断定しないでください。W3CのEasy Checksも、簡易確認だけではページ全体の評価にならないと説明しています。
アクセシビリティ確認用のコピペプロンプト
次のひな型へ、対象ページの情報とコードを入力してください。OpenAIのプロンプト作成ガイドでも、目的や文脈を具体的に伝え、結果を見ながら改善する方法が案内されています。
次のWebページについて、アクセシビリティ上の
改善候補を一次点検してください。
【ページの目的】
（例：問い合わせ方法を案内し、フォームを送信してもらう）
【利用者にしてほしい主な操作】
（例：項目を入力し、送信ボタンを押す）
【対象HTML・CSS】
（個人情報や秘密情報を除いた対象部分を貼る）
次の順で確認してください。
1. ページタイトル・見出し・ランドマーク
2. 画像の役割と代替テキスト
3. リンク・ボタン・フォームの名前とラベル
4. 色のコントラストと色だけに依存した表現
5. キーボード操作で人が確認すべき項目
結果は「該当箇所／改善候補／理由／最小限の修正案／
人が実ページで確認すること」の表で出してください。
コードだけでは判断できない点は推測せず「要確認」としてください。
WCAGへの準拠や合格を断定しないでください。修正コードを受け取ったら、元のコードを保存し、1項目ずつ反映します。変更後はChatGPTでコードレビューする方法も使い、意図しない変更がないか確認できます。
修正の優先順位を決める
指摘が多い時は、次の順で整理します。
- 操作できない：キーボードで到達できない、閉じられない
- 情報が伝わらない：見出し、ラベル、代替テキストが不足
- 読みにくい：コントラスト不足、拡大時の文字切れ
- 使いにくい：分かりにくい文言、移動順、エラー案内
影響の大きい問題から1つずつ直し、毎回同じ操作で再確認します。修正後に表示が崩れた場合は、ChatGPTでエラー原因を調べる方法のように、期待した結果と実際の結果を分けて伝えます。
よくある失敗
「準拠していますか」と一度だけ聞く
ページの目的や実操作が分からないため、確かな判定になりません。確認項目を分け、根拠と人の確認事項を出してもらいます。
AIが作った代替テキストをそのまま使う
代替テキストは画像の文脈で変わります。周囲の文章との重複、画像が担う意味、装飾かどうかを人が確認します。
コードだけ見て操作確認を省く
フォーカスの見え方やダイアログの動作は、実ページで操作しなければ分かりません。必ずキーボード、拡大表示、スマートフォン幅で試します。
指摘を一度に全部直す
表示や機能が崩れた時に原因を追えません。バックアップを取り、1項目ずつ修正と再確認を繰り返します。
公開前の最終チェックリスト
- ページタイトルと主見出しが内容を表している
- 見出しの階層が内容の順序と合っている
- 意味のある画像に文脈に合う代替テキストがある
- 文字と背景のコントラストをツールで確認した
- 色だけで状態やエラーを伝えていない
- キーボードだけで主要な操作を完了できる
- フォーカス位置が見える
- 文字拡大とスマートフォン幅で内容が欠けない
- フォームのラベルとエラー案内を確認した
- ChatGPTの指摘と人の確認結果を分けて記録した
まとめ
ChatGPTでWebアクセシビリティを確認する時は、見出し・画像・色・操作の4点へ対象を分けます。AIで改善候補を洗い出し、人がキーボードや拡大表示で確かめ、一次情報と照合するのが基本です。
一度の質問で適合を判断しようとせず、1ページ、1機能、1修正ずつ進めてください。小さく確認を重ねる方が、初心者でも変更の影響を追いやすく、利用しにくさを着実に減らせます。
コメント