小規模なWebサイトでは、すべてを一度に直そうとせず、画像、キーボード操作、フォーム、見出し、リンクの5項目から確認すると進めやすくなります。これはWCAG 2.2への適合を保証する一覧ではありませんが、制作や更新のたびに確認できる実務的な入口です。
アクセシビリティを後工程だけにしない
W3CのWCAG 2.2は、知覚可能、操作可能、理解可能、堅牢という4つの原則で整理されています。公開直前に自動検査だけを実行しても、画像の意図、見出しの順序、リンク文言、エラーの伝え方までは判断できません。デザインデータの確認、HTML実装、WordPress入力、公開前テストに分けて確認項目を持つことが重要です。
画像の役割に合わせて代替テキストを決める
内容を伝える写真や図には、画像を見られない場合にも目的が分かる代替テキストを設定します。記事タイトルや周囲の文章をそのまま繰り返すのではなく、画像が補っている情報を簡潔に書きます。一方、区切り線や背景模様など純粋な装飾は、支援技術が読み上げない実装にします。画像内に重要な文字を置く場合は、本文にも同じ情報が必要です。
キーボードだけで主要導線をたどる
マウスを使わずTabキーとShift＋Tabキーで、メニュー、リンク、ボタン、フォームを順に移動します。現在位置を示すフォーカス表示が消えていないか、メニューやモーダルから抜けられなくならないか、操作順が画面の理解と一致するかを確認します。独自のクリック部品を作ると、キーボード操作や役割の情報が欠けやすいため、まずHTML標準のリンクやボタンを使えるか検討します。
フォームは入力前とエラー後を確認する
入力欄には、何を入力するか分かるラベルを関連付けます。プレースホルダーだけでは、入力を始めると説明が見えなくなります。必須項目、入力例、形式、送信エラーは、色だけに頼らず文字でも伝えます。エラー後は、問題のある項目へ移動できるか、入力済みの内容が不必要に消えないか、送信完了が画面上と支援技術の両方へ伝わるかを確認します。
見出しとリンク文言でページの構造を伝える
見出しは文字を大きくするためではなく、内容の階層を伝えるために使います。H1の後に主要項目をH2、その内訳をH3として並べ、見た目だけで順序を決めません。リンクは「こちら」だけではなく、リンク先で何ができるか分かる文言にします。文字を拡大したときの重なり、スマートフォンでの横スクロール、文字と背景のコントラストも合わせて確認します。
ARIAはHTMLを補うために使う
ARIAのラベル、ロール、状態は、支援技術へ部品の意味を伝えるために使えます。ただし、標準HTMLで表現できる要素へ複雑なARIAを重ねると、見た目と読み上げ内容がずれる場合があります。OpenAIのPublisher FAQでも、ChatGPT AtlasのエージェントがARIAの情報を利用してボタン、メニュー、フォームを理解すると案内されています。人の利用を第一に、正しいHTMLを基礎として必要な情報だけを補います。
公開前に5分で確認する項目
- 主要画像の代替テキストが内容と役割に合っている
- Tabキーでメニュー、本文リンク、フォーム、送信ボタンへ移動できる
- フォーカス位置が見え、操作不能になる箇所がない
- 入力欄にラベルがあり、エラーが文字でも説明される
- 見出し順、リンク文言、拡大表示、スマートフォン表示に無理がない
自動検査はHTML上の問題を探す助けになりますが、それだけで利用しやすさを判断することはできません。キーボード操作と実際の読み順を人が確認し、修正内容を記録します。GreenCodingでは、支給デザインの意図を確認しながら、HTML構造、レスポンシブ表示、WordPress入力画面まで含めて実装を整理します。詳しくは制作会社様・デザイン事務所様向けコーディング支援をご覧ください。