うぇぶもよう

生成AIでWebアクセシビリティをチェック・改善する方法｜プロンプト例付き

うぇぶもようの中の人
生成AIとWebアクセシビリティを表すイラスト

Webサイトのアクセシビリティを改善したいと思っても、「どこから確認すればよいのか分からない」「チェック項目が多くて手が回らない」と感じることがあります。

そんなときは、ChatGPTなどの生成AIを最初のチェック担当として活用すると便利です。HTMLやCSSを渡して問題点の候補を洗い出したり、より適切なマークアップ案を作ったりできます。

ただし、生成AIだけでアクセシビリティの適合を保証することはできません。この記事では、Web制作者が生成AIを補助ツールとして使い、最後にブラウザやキーボードで確認するところまでを実例付きで解説します。


Webアクセシビリティとは

Webアクセシビリティとは、年齢や障害、利用環境などにかかわらず、できるだけ多くの人がWebサイトの情報や機能を利用できる状態を目指す考え方です。

国際的な指針としてはW3Cの「WCAG」があり、現在はWCAG 2.2の資料を参照できます。内容は「知覚可能」「操作可能」「理解可能」「堅牢」の4原則に整理されています。

生成AIが得意なアクセシビリティチェック

生成AIは、コードを読んで改善候補をまとめる作業に向いています。特に次のような確認は効率化しやすいです。

一方、実際の読み上げ方、フォーカスの移動順、見た目の分かりやすさ、操作中の違和感などは、コードだけでは正しく判断できない場合があります。

生成AI・自動チェック・手動確認を組み合わせて確認します。

生成AIにコードを確認してもらう手順

1. 確認範囲を小さくする

ページ全体を一度に渡すより、ヘッダー、ナビゲーション、フォーム、モーダルなど、部品ごとに確認する方が具体的な回答を得やすくなります。個人情報、APIキー、未公開情報は削除してから入力してください。

2. 役割と確認基準を伝える

「問題がないか見て」だけでは、回答が曖昧になりがちです。対象ユーザー、確認したい基準、回答形式を指定します。

あなたはWebアクセシビリティに詳しいフロントエンドエンジニアです。
以下のHTMLをWCAG 2.2の観点で確認してください。

【確認してほしい項目】
・見出し構造
・キーボード操作
・フォームのラベル
・画像の代替テキスト
・リンクとボタンの名前
・ARIA属性の使い方

問題点を「重要度・該当コード・理由・修正案」の表で整理してください。
コードだけでは判断できない項目は、推測せず「実機確認が必要」と書いてください。

【HTML】
ここに確認するコードを貼り付ける

3. 修正コードと確認方法を分けて依頼する

修正案を受け取るときは、コードだけでなく「なぜ直すのか」と「ブラウザで何を確認するのか」も出してもらいましょう。

指摘した問題を修正したHTMLを提示してください。
次の条件を守ってください。

・見た目を大きく変えない
・必要以上にARIA属性を追加しない
・標準のHTML要素で表現できる場合はARIAよりHTMLを優先する
・変更した行にコメントを付ける
・修正後にキーボードで確認する手順も示す

実例1：ラベルのないフォームを改善する

フォームは見た目だけでなく、ラベルや操作要素の構造も確認します。

プレースホルダーだけで項目名を示したフォームは、入力後に説明が見えなくなり、支援技術にも正しく名前が伝わらない可能性があります。

<form>
  <input type="text" placeholder="お名前">
  <input type="email" placeholder="メールアドレス">
  <div class="send-button" onclick="submitForm()">送信</div>
</form>

labelと入力欄を関連付け、操作要素にはbuttonを使用します。必須項目は視覚的な表示だけでなく、HTMLでも伝わるようにします。

<form>
  <div class="form-field">
    <label for="name">お名前 <span aria-hidden="true">必須</span></label>
    <input id="name" name="name" type="text" autocomplete="name" required>
  </div>

  <div class="form-field">
    <label for="email">メールアドレス <span aria-hidden="true">必須</span></label>
    <input id="email" name="email" type="email" autocomplete="email" required>
  </div>

  <button type="submit">送信</button>
</form>

実例2：アイコンだけのボタンを改善する

見た目では虫眼鏡のアイコンから検索ボタンだと分かっても、画像に代替テキストがなく、ボタンにも名前がなければ、読み上げ環境では目的が伝わりません。

<button class="search-button">
  <img src="icon-search.svg" alt="">
</button>

装飾用アイコンは読み上げ対象から外し、ボタンそのものに名前を付けます。

<button class="search-button" type="button" aria-label="サイト内を検索">
  <img src="icon-search.svg" alt="" aria-hidden="true">
</button>

aria-labelは便利ですが、画面上にテキストを表示できる場合は、見えるラベルを優先します。ARIAを増やせば必ず良くなるわけではありません。

実例3：フォーカスが見えないCSSを改善する

outline: noneだけを指定すると、キーボード利用者が現在位置を確認できなくなります。フォーカスを消すのではなく、サイトのデザインに合う表示へ置き換えます。

/* 避けたい例 */
a:focus,
button:focus {
  outline: none;
}
/* キーボード操作時のフォーカスを分かりやすくする */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #087f8c;
  outline-offset: 3px;
}

色や太さは背景との組み合わせで調整してください。固定ヘッダーやモーダルがフォーカス位置を隠していないかも確認します。

画像のalt属性をAIに考えてもらうときのポイント

代替テキストは画像だけを見て決めるのではなく、画像の目的と前後の文章を踏まえて考えます。同じ写真でも、記事の主題によって適切な説明は変わります。

この画像に適切なalt属性の文章を提案してください。

【画像の内容】
パソコン画面にお問い合わせフォームが表示されている

【前後の文章】
Contact Form 7で作成したフォームの完成例を紹介している

【画像の目的】
読者に完成後の見た目を伝える

装飾画像としてaltを空にする方が適切な場合は、その理由も説明してください。
「画像」「写真」という言葉は必要な場合だけ使用し、簡潔な案を3つ提示してください。

AIの提案をそのまま採用せず、周囲の文章と内容が重複していないか、画像を見られない人にも必要な情報が伝わるかを確認します。

AIだけでは判断できない項目

次の項目は、生成AIの回答だけで完了と判断せず、実際のページで確認します。

ブラウザで行う最終チェック

最後は実際にキーボードと読み上げ環境で操作します。

キーボードだけで操作する

  1. マウスを使わずTabキーでページ内を移動する
  2. Shift＋Tabで逆方向にも移動する
  3. EnterまたはSpaceキーでボタンやメニューを操作する
  4. Escキーでモーダルやメニューを閉じられるか確認する
  5. フォーカスが画面外や非表示領域へ消えないか確認する

自動チェックツールを併用する

Chrome DevToolsのLighthouseやaxe DevToolsなどを使うと、機械的に検出できる問題を確認できます。ただし、自動テストでエラーがゼロでも、すべての人が使いやすいとは限りません。AI、自動チェック、手動確認を組み合わせることが大切です。

生成AIを使うときの注意点

まとめ

生成AIは、アクセシビリティの問題候補を見つけ、修正案を考える時間を短縮してくれます。特に、フォーム、見出し、ボタン、画像、ARIA属性などのコードレビューに役立ちます。

ただし、アクセシビリティはコードだけでは判断できません。生成AIで一次チェックを行い、自動チェックツールを併用し、最後にキーボード操作や読み上げ環境で確認する流れがおすすめです。まずはお問い合わせフォームやナビゲーションなど、小さな部品から試してみてください。

モバイルバージョンを終了