Webサイトのアクセシビリティを改善したいと思っても、「どこから確認すればよいのか分からない」「チェック項目が多くて手が回らない」と感じることがあります。
そんなときは、ChatGPTなどの生成AIを最初のチェック担当として活用すると便利です。HTMLやCSSを渡して問題点の候補を洗い出したり、より適切なマークアップ案を作ったりできます。
ただし、生成AIだけでアクセシビリティの適合を保証することはできません。この記事では、Web制作者が生成AIを補助ツールとして使い、最後にブラウザやキーボードで確認するところまでを実例付きで解説します。
もくじ
Webアクセシビリティとは
Webアクセシビリティとは、年齢や障害、利用環境などにかかわらず、できるだけ多くの人がWebサイトの情報や機能を利用できる状態を目指す考え方です。
国際的な指針としてはW3Cの「WCAG」があり、現在はWCAG 2.2の資料を参照できます。内容は「知覚可能」「操作可能」「理解可能」「堅牢」の4原則に整理されています。
- 画像の内容を代替テキストで伝える
- キーボードだけでも操作できるようにする
- 文字と背景のコントラストを確保する
- フォームの入力欄とラベルを正しく関連付ける
- 見出しを文書構造に沿って使用する
- エラーの内容と修正方法を分かりやすく伝える
生成AIが得意なアクセシビリティチェック
生成AIは、コードを読んで改善候補をまとめる作業に向いています。特に次のような確認は効率化しやすいです。
- 画像の
alt属性の不足や内容の確認 - 見出しレベルの順序
- フォームの
labelと入力欄の関連付け - リンクやボタンの分かりやすい名前
- ランドマーク要素の使い方
- ARIA属性の過不足
- キーボード操作で問題になりそうな実装
一方、実際の読み上げ方、フォーカスの移動順、見た目の分かりやすさ、操作中の違和感などは、コードだけでは正しく判断できない場合があります。
生成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の回答だけで完了と判断せず、実際のページで確認します。
- キーボード操作：Tabキーで自然な順序に移動できるか
- フォーカス表示：現在位置が常に見えるか
- モーダル：開いた後にフォーカスが内部へ移り、閉じた後に元へ戻るか
- 読み上げ：VoiceOverなどで名前・役割・状態が伝わるか
- コントラスト：通常時だけでなくホバー、エラー、無効状態も読めるか
- 拡大表示：200％程度に拡大しても内容や操作部品が欠けないか
- 動的な変化：エラーや完了メッセージが支援技術にも通知されるか
ブラウザで行う最終チェック
キーボードだけで操作する
- マウスを使わずTabキーでページ内を移動する
- Shift＋Tabで逆方向にも移動する
- EnterまたはSpaceキーでボタンやメニューを操作する
- Escキーでモーダルやメニューを閉じられるか確認する
- フォーカスが画面外や非表示領域へ消えないか確認する
自動チェックツールを併用する
Chrome DevToolsのLighthouseやaxe DevToolsなどを使うと、機械的に検出できる問題を確認できます。ただし、自動テストでエラーがゼロでも、すべての人が使いやすいとは限りません。AI、自動チェック、手動確認を組み合わせることが大切です。
生成AIを使うときの注意点
- クライアント情報や個人情報を入力しない
- AIが存在しない基準や達成方法を提示する可能性を考える
- 修正後のコードをそのまま本番へ入れず、表示と動作を確認する
- 標準HTMLで実現できる機能に不要なARIAを追加しない
- 「WCAG準拠」と断定する材料にAIの回答だけを使わない
- 使用したAIサービスのデータ利用設定を確認する
まとめ
生成AIは、アクセシビリティの問題候補を見つけ、修正案を考える時間を短縮してくれます。特に、フォーム、見出し、ボタン、画像、ARIA属性などのコードレビューに役立ちます。
ただし、アクセシビリティはコードだけでは判断できません。生成AIで一次チェックを行い、自動チェックツールを併用し、最後にキーボード操作や読み上げ環境で確認する流れがおすすめです。まずはお問い合わせフォームやナビゲーションなど、小さな部品から試してみてください。
