WordPressサイトのアクセシビリティ改善は、WCAG 2.2 のレベルAAを目安に、「画像の代替テキスト」「見出しとランドマーク」「コントラスト」「キーボード操作とフォーカス表示」「フォーム」の順に確認していくと、少ない手間で効果の大きいところから直せます。この記事では、各項目がWCAGのどの達成基準に対応するか、WordPressのどこを直せばよいか、どう確認するかを説明します。
WCAG 2.2 と日本での位置づけ
WCAG（Web Content Accessibility Guidelines）は W3C が定めるウェブアクセシビリティの指針で、現行版は2023年10月に勧告された WCAG 2.2 です（2026年10月現在）。達成基準にはレベルA・AA・AAAがあり、一般的なサイトの目標はレベルAAです。
WCAG 2.2 では、2.1 に対して次の達成基準が追加されました。
- 2.4.11 フォーカスが隠されない（最低限）（AA）
- 2.4.12 フォーカスが隠されない（強化）（AAA）
- 2.4.13 フォーカスの外観（AAA）
- 2.5.7 ドラッグ動作（AA）
- 2.5.8 ターゲットのサイズ（最低限）（AA）
- 3.2.6 一貫したヘルプ（A）
- 3.3.7 冗長な入力（A）
- 3.3.8 アクセシブルな認証（最低限）（AA）
- 3.3.9 アクセシブルな認証（強化）（AAA）
また、4.1.1 構文解析は削除されました。
日本では、JIS X 8341-3:2016 が WCAG 2.0 と同じ内容の規格になっています。2024年4月からは改正障害者差別解消法により、民間事業者にも障害のある人への合理的配慮の提供が義務付けられました。ウェブサイトのアクセシビリティそのものは、その前提となる環境の整備として努力義務と整理されていますが、問い合わせ窓口や予約・購入の手段をウェブに頼っている事業者にとっては、対応を進める理由が増えています。
手順1：画像の代替テキスト（1.1.1 非テキストコンテンツ）
画像には、その画像が伝えている情報を代替テキスト（alt属性）で記述します。WordPressでは、メディアライブラリで画像を選んだときの「代替テキスト」欄、またはブロックエディタで画像ブロックを選択したときの設定パネルで入力できます。
書き方の目安は次のとおりです。
- 情報を伝える画像は、その内容を簡潔に書く（「グラフ」ではなく「2026年の月別アクセス数。9月が最も多い」など）
- リンクやボタンになっている画像は、リンク先や機能を書く（「お問い合わせフォームへ」など）
- 装飾だけの画像は、代替テキストを空にする。空にすると
alt=""が出力され、スクリーンリーダーは読み飛ばします - 画像の周りの本文と同じことを繰り返さない
メディアライブラリの「代替テキスト」は、画像を挿入した時点の値がブロックにコピーされます。後からライブラリ側を直しても、すでに記事に入っている画像には反映されない点に注意してください。
手順2：見出しとページの構造（1.3.1 情報及び関係性、2.4.1 ブロックスキップ）
スクリーンリーダーの利用者は、見出しの一覧やランドマーク（ヘッダー、ナビゲーション、メイン、フッター）でページ内を移動します。
- 見出しは文字の大きさではなく構造で選ぶ。h2 の下に h3、という階層を飛ばさない
- 見た目を大きくしたいだけの段落を見出しにしない。逆に、見出しを段落の太字で代用しない
- ブロックエディタの上部にある「文書概要」やリスト表示で、見出しの階層を確認できる
本文へのスキップリンクも確認します。ブロックテーマでは、テンプレートに main 要素があればコアがスキップリンクを出力します。クラシックテーマでは、テーマ側で header.php にスキップリンクを用意する必要があります。Tab キーを1回押したときに「コンテンツへスキップ」のようなリンクが現れるかで確認できます。
手順3：コントラスト（1.4.3 コントラスト（最低限）、1.4.11 非テキストのコントラスト）
レベルAAでは、本文の文字と背景のコントラスト比を4.5:1以上、大きな文字（18ポイント以上、または14ポイント以上の太字）は3:1以上にすることが求められます。ボタンの輪郭や入力欄の枠線、アイコンなど、文字以外の操作に必要な部品も、隣接する色と3:1以上が必要です。
薄いグレーの文字、写真の上に重ねた白文字、ブランドカラーのボタンに白文字、の3つが不足しやすい箇所です。ブロックエディタで色を設定するときに、読みにくい組み合わせだと警告が表示されることがありますが、テーマのCSSで指定された色はチェックされないため、ブラウザの開発者ツールやコントラストチェッカーで実際の色を測って確認します。
ブロックテーマなら、theme.json の配色（パレット）を見直すと、サイト全体の色をまとめて修正できます。
手順4：キーボード操作とフォーカス（2.1.1 キーボード、2.4.7 フォーカスの可視化、2.4.11）
マウスを使わずに、Tab キーと Shift+Tab、Enter、スペースキーだけでサイトを操作してみてください。これが最も手軽で効果の高い確認方法です。
- メニュー、ハンバーガーメニュー、モーダル、スライダー、アコーディオンをキーボードだけで開閉・操作できるか
- 今どこにフォーカスがあるか、目で見て分かるか
- 固定ヘッダーや追従バナー、Cookie の同意バナーの下にフォーカスが隠れていないか（2.4.11 で新たに求められる点です）
テーマやプラグインのCSSで outline: none と指定され、フォーカスの枠が消えていることがよくあります。子テーマのCSSで、キーボード操作のときだけ明確な枠が出るように上書きします。
/* キーボード操作時のフォーカス表示 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid #1a5fb4;
outline-offset: 2px;
}
/* 固定ヘッダーの下にフォーカスやアンカー先が隠れないようにする（ヘッダーの高さに合わせて調整） */
html {
scroll-padding-top: 80px;
}:focus-visible はキーボード操作のときにフォーカス表示を出し、マウスでクリックしたときには出さない、という使い分けを主要ブラウザが行う擬似クラスです。枠の色は背景に対して3:1以上のコントラストになるものを選んでください。
手順5：ターゲットのサイズと動き（2.5.8、2.2.2）
WCAG 2.2 の 2.5.8 では、クリックやタップの対象を24×24 CSSピクセル以上にするか、十分な間隔を空けることが求められます。小さなSNSアイコン、ページ送りの数字、フッターに詰めて並べたリンクが該当しやすい箇所です。
/* 小さなアイコンリンクのクリック領域を広げる */
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
/* 動きを減らす設定の利用者にはアニメーションを控える */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}例では余裕を持たせて44ピクセルにしています。自動で切り替わるスライダーや動画背景は、2.2.2 一時停止、停止、非表示により、5秒を超えて動くものには停止の手段を用意する必要があります。
手順6：フォームと言語設定（3.3.2 ラベル又は説明、3.1.1 ページの言語）
お問い合わせフォームでは、各入力欄に label 要素が関連付けられているかを確認します。プレースホルダーだけで項目名を示すと、入力を始めた時点で消えてしまい、スクリーンリーダーでも読まれないことがあります。必須項目は色だけでなく「必須」の文字で示し、エラー時はどの項目をどう直せばよいかを文章で表示します。フォームプラグインの多くはラベルを出力する設定があるので、フォームの作り方を見直します。
WCAG 2.2 で追加された 3.3.8 では、ログインなどでパズルの解答や文字の書き写しといった認知機能のテストだけに頼らないことが求められます。パスワードの貼り付けやパスワード管理ツールの自動入力を妨げない設計にしておくと、この基準を満たしやすくなります。
ページの言語は、管理画面の「設定」→「一般」の「サイトの言語」で日本語を選んでいれば、テーマが language_attributes() を使っている限り <html lang="ja"> が出力されます。ソースを表示して確認してください。
手順7：ツールと実機で確認する
自動チェックツールで見つかるのは問題の一部です。ツールと手作業を組み合わせます。
- 自動チェック：Chrome の Lighthouse、axe DevTools、WAVE などで、代替テキストの欠落、コントラスト不足、ラベルの無い入力欄を洗い出す
- キーボード操作：手順4のとおり、Tab キーでページを一周する
- スクリーンリーダー：Windows なら無料の NVDA、Mac や iPhone なら標準の VoiceOver で、トップページと主要なフォームを読み上げさせる
- 拡大表示：ブラウザを200%や400%に拡大し、文字が切れたり横スクロールが必要になったりしないかを見る（1.4.4 テキストのサイズ変更、1.4.10 リフロー）
テーマを選び直す場合は、WordPress.org のテーマディレクトリで「Accessibility Ready」のタグが付いたテーマが候補になります。これはアクセシビリティの審査を通過したテーマに付けられるタグで、出発点としては有用ですが、コンテンツ側（代替テキストや見出し）の対応は別途必要です。
まとめ
- 目標は WCAG 2.2 のレベルAA。2.2 ではフォーカスが隠れないこと、ターゲットのサイズ、認証の配慮などが追加された
- 代替テキストは画像の役割に合わせて書き、装飾画像は空にする。見出しは構造で選び、階層を飛ばさない
- 文字のコントラストは4.5:1以上、操作部品は3:1以上。テーマの配色は theme.json や子テーマのCSSでまとめて直す
- Tab キーだけでサイトを操作し、フォーカスが見えるか、固定ヘッダーに隠れないかを確認する
- 自動チェックツールに加え、キーボード操作、スクリーンリーダー、拡大表示で確かめる