AI生成HTMLでよく抜けるアクセシビリティ要素
アクセシビリティとは、視覚や操作に制約のある人を含め、できるだけ多くの人がコンテンツを使えるようにする考え方です。AIが生成したHTMLは見た目こそ整っていても、機械的に補える情報が欠けていることがよくあります。
代表的なのは、画像の alt 属性が空または不適切、文字色と背景色のコントラスト不足、見出しレベルが飛んでいる、フォーム部品にラベルがない、といった点です。これらは見た目では気づきにくく、共有してから指摘されると手戻りになります。
共有前に確認したいチェック項目
難しいツールがなくても、いくつかの基本だけ押さえれば多くの問題は拾えます。まずは次の観点で生成されたHTMLを見直しましょう。
- すべての img タグに、内容を説明する alt が入っているか。装飾画像は空 alt で良いか。
- 文字色と背景色のコントラストが十分か。薄いグレー文字は読みづらくないか。
- 見出しが h1 から順に並び、レベルが飛んでいないか。
- フォームの入力欄に label が結びついているか。
- リンクの文言が「こちら」だけでなく、行き先がわかる表現になっているか。
- キーボードのTabキーだけで主要な操作をたどれるか。
AI生成HTMLを共有する前の安全チェック
AI生成HTMLのアクセシビリティを確認してから共有では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。
ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。
- 外部送信: form action、fetch、script src、iframeの向き先を確認する
- 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
- 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
- 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める
ブラウザの標準機能で素早くチェックする
専用ツールを入れなくても、多くのブラウザには開発者ツールに簡単なアクセシビリティ検査が付いています。要素を選んでコントラスト比を確認したり、見出しの構造を一覧したりできます。
AIに「alt を補って」「コントラストを上げて」と指示して直せる部分も多いので、見つけた問題はその場で修正してから次に進むと効率的です。ただし最終的な見た目は人の目で確認しましょう。
確認版を一時URLで関係者に見てもらう
自分でひととおり直したら、確認版を一時URLにしてレビューに回します。ギガサイト便なら、HTMLファイルまたはZIPをドロップするだけで 〇〇.giga-site.com 形式のURLが発行されます。
- alt やコントラストなどを修正したHTMLを用意する。アセットがあればZIPにまとめる。
- ギガサイト便のトップページにドロップして共有URLを発行する。
- 公開期限と認証方式を設定する。
- URLをレビュー担当に送り、実際の表示で確認してもらう。
- 指摘があれば直し、同じURLのままファイルを差し替えて再確認してもらう。
公開と検索インデックスの扱い
確認用に一時公開するページには noindex が付くため、検証中の未完成な状態が検索結果に出る心配はありません。アクセシビリティ対応が固まる前の版が外部に拾われるのを避けられます。
ただし noindex はアクセス制御ではないので、URLを知っていれば誰でも開けます。社内外の限られた相手にだけ見せたい場合は、パスワードやメール認証を併用してください。
非エンジニアにも頼みやすい確認観点
アクセシビリティ確認は専門的に見えますが、最初のレビューでは非エンジニアにも頼める観点があります。コードを読ませるのではなく、実際のURLを開いて、読めるか・操作できるか・迷わないかを見てもらいます。
専門ツールでの検査は後からでもできます。まずは、画面上で困る人が出そうな箇所を早めに見つけることを目的にします。
- 文字が小さすぎず、スマホでも読めるか
- 薄い文字色や背景色で読みにくい場所がないか
- ボタンやリンクが押せるものとして分かるか
- 画像だけで重要な説明をしていないか
よくある質問
アクセシビリティ確認に専用ツールは必須ですか。
必須ではありません。alt属性・コントラスト・見出し構造・フォームのラベルといった基本観点を押さえるだけで多くの問題は拾えます。ブラウザの開発者ツールにある簡易検査も役立ちます。
AIに直させても問題ありませんか。
altの補完やコントラスト調整など、AIに指示して直せる部分は多いです。ただし最終的な見た目や意味の正しさは人の目で確認してください。直したら一時URLにして実表示で再チェックすると確実です。
確認中の未完成版が検索に出ませんか。
ギガサイト便の一時公開ページには noindex が付くため検索結果には出ません。ただし noindex はアクセス制御ではないので、限られた相手にだけ見せたいなら認証を併用してください。
指摘を受けて直したらURLは変わりますか。
変わりません。ギガサイト便は同じURLのままファイルを差し替えられるので、修正版に更新してもリンクはそのままです。レビュー担当には再読み込みを依頼するだけで済みます。
AIツールで作ったHTMLはそのまま共有しても安全ですか？
そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。
アクセシビリティ確認は専門家に頼まないと意味がありませんか？
専門家の確認は有効ですが、初期レビューでは非エンジニアの実機確認だけでも発見できる問題があります。文字の読みやすさ、操作の分かりやすさ、スマホでの見やすさをまず確認してください。