WordPressのアクセシビリティ: 誰でも使えるサイトの作り方

ウェブアクセシビリティとは、障害のある人々が効果的に利用できるウェブサイトを構築することを意味します。これには、スクリーンリーダー、キーボードのみのナビゲーション、音声制御、スクリーン拡大鏡を使用する人々や、色覚に制限のある人々が含まれます。WordPressエコシステムにおいて、アクセシビリティは多くの法域での法的要件であると同時に、より広いオーディエンスにリーチするための実用的な方法でもあります。全世界で10億人以上が何らかの形で障害を抱えています。

このガイドでは、WCAG（ウェブコンテンツアクセシビリティガイドライン）2.2のAAレベルに従って、WordPressサイトをアクセシブルにするための実用的なステップを紹介します。これは、ADA（米国）、EAA（EU）、AODA（カナダ）などのアクセシビリティ法で最も一般的に要求される基準です。

WCAG 2.2の原則を理解する

WCAGは、POURとして知られる4つの原則に基づいて構成されています：

アクセシブルなテーマの選択

WordPressテーマのHTML構造とCSSは、サイトのアクセシビリティの基盤を形成します。WordPressテーマを選択する際には、これらのアクセシビリティ要因を評価してください：

• 意味的HTML：テーマは、すべての要素に一般的なdivではなく、適切なHTML5要素（header、nav、main、article、aside、footer）を使用しています
• 見出しの階層：H1 → H2 → H3が論理的な順序でレベルを飛ばさずに続いています
• スキップリンク：最初のフォーカス可能な要素として「コンテンツにスキップ」リンクが存在し、キーボードユーザーがナビゲーションをバイパスできます
• キーボードナビゲーション：すべての対話型要素（リンク、ボタン、フォーム）はTabキーで到達可能で使用可能です
• フォーカスインジケーター：フォーカスされた要素には、視覚的なアウトラインまたはハイライトがあります（outline: noneで削除されない）
• 色のコントラスト：テキストはWCAG AAコントラスト比（通常のテキストは4.5:1、大きなテキストは3:1）を満たしています

WordPress.orgで「アクセシビリティ対応」とタグ付けされたテーマは、基本的なアクセシビリティレビューに合格しています。ただし、このタグは出発点を示すものであり、完全なWCAG準拠を意味するものではありません。人気のあるテーマの中で、GeneratePressは、クリーンな意味的HTMLと適切なARIAランドマークを備えた優れたコーディングで知られています。

画像のアクセシビリティ

代替テキスト

意味のある画像には、説明的な代替テキストが必要です。WordPressではこれが簡単に行えます—メディアライブラリやコンテンツに画像を挿入する際に代替テキストフィールドが利用可能です。

アクセシビリティのための画像最適化

• テキストの画像を使用しない—代わりにCSSでスタイルを適用した実際のテキストを使用する
• 画像に埋め込まれたテキストがコントラスト要件を満たしていることを確認する
• 複雑な画像（チャート、図）には、隣接する段落またはlongdesc属性を使用して長い説明を提供する
• 画像が適切な寸法を持ち、レイアウトのシフト（CLS）を引き起こさないようにする

キーボードナビゲーション

多くのユーザーは、ウェブサイトを完全にキーボードでナビゲートします。

キーボードの操作—Tabで前に進み、Shift+Tabで後ろに戻り、Enterでリンクやボタンをアクティブにし、Spaceでチェックボックスを切り替えたりボタンをクリックし、Escapeでモーダルを閉じます。

一般的なキーボードアクセシビリティの問題

• フォーカストラップ：メインコンテンツにタブで戻れないモーダルダイアログ（モーダルはフォーカスをモーダル内に保持し、Escapeで閉じるべきです）
• フォーカスインジケーターの欠如：フォーカスされた要素のデフォルトのアウトラインを削除するCSS（* :focus { outline: none } をグローバルに使用しないでください）
• クリックハンドラーのある非インタラクティブ要素：キーボードでアクセスできないonClickイベントを持つdivやspan（代わりにボタンやリンクを使用してください）
• ホバー時のみ開くドロップダウンメニュー：キーボードユーザーはホバー状態をトリガーできません。メニューはフォーカス/Enterでも開くべきです
• ARIAのないカスタムコンポーネント：適切なARIAロールとキーボードハンドラーなしで構築されたタブ、アコーディオン、カルーセル

色とコントラスト

WCAG AAは以下の最小コントラスト比を要求します：

WebAIMのコントラストチェッカーやaxeブラウザ拡張機能などのツールを使用してコントラスト比を確認してください。情報を伝えるために色だけに頼らないでください—色分けに加えてテキストラベル、パターン、またはアイコンを使用してください。

フォームのアクセシビリティ

フォームはアクセシビリティにとって最も重要な領域の一つです。Gutenbergブロック、Gravity Forms、またはWPFormsを使用する場合：

• すべての入力にラベルを付ける：各入力に対してfor/id属性を使用して関連付けられた<label>要素を使用します。プレースホルダーテキストはラベルの代わりにはなりません
• 関連フィールドをグループ化する：<fieldset>と<legend>を使用して関連する入力のグループを作成します（例：配送先住所フィールド）
• エラーメッセージを提供する：検証が失敗した場合、どのフィールドにエラーがあるかを特定し、修正方法を説明します。aria-describedbyを使用してエラーメッセージをフィールドに関連付けます
• 必須フィールドをマークする：required属性を使用し、必須フィールドをテキストで視覚的に示します（アスタリスクだけではなく）
• オートコンプリートをサポートする：ブラウザがフォームデータを自動入力できるように、適切なオートコンプリート属性（name、email、tel、address-line1）を追加します

コンテンツのアクセシビリティ

見出し構造

適切な見出し階層は、スクリーンリーダーユーザーがページ構造を理解し、セクション間をナビゲートするのに役立ちます。ルール：

• ページごとに1つのH1（ページ/投稿タイトル）
• 主要セクションにはH2
• H2内のサブセクションにはH3
• レベルを飛ばさない（H2 → H4をH3なしで使用するのは不正確です）
• 視覚的スタイリングのために見出しを使用しない—代わりにCSSクラスを使用してください

リンクテキスト

文脈から意味のない一般的なリンクテキストは避けてください：

テーブル

データテーブルには以下が含まれるべきです：

• <thead>と<th>要素を使用した列ヘッダー（scope="col"を含む）
• <th scope="row">を使用した行ヘッダー
• テーブルの目的を説明する<caption>要素
• シンプルな構造—可能な限りマージセルを避けてください。スクリーンリーダーが解釈しにくくなります

サイトのアクセシビリティをテストする

自動ツールは、アクセシビリティの問題の約30-50%を検出します。自動ツールでは検出できないインタラクションベースの問題を特定するためには、キーボードとスクリーンリーダーを使用した手動テストが必要です。

アクセシビリティのためのWordPressプラグイン

• WP Accessibility: スキップリンクを追加し、一般的なアクセシビリティの問題を修正し、ユーザーの好みに合わせたツールバーを追加します
• One Click Accessibility: フロントエンドのアクセシビリティツールバー（フォントサイズ、コントラスト、リンクのハイライト）を追加します
• アクセシビリティ対応のスターターテンプレート: Astra と GeneratePress は、両方とも基本テーマに強力なアクセシビリティの基盤を持っています

注意: アクセシビリティオーバーレイプラグイン（「修正」ボタン付きの浮遊ウィジェットを追加するもの）は、アクセシビリティコミュニティから広く批判されています。これらはウェブサイトをアクセシブルにするものではなく、実際には支援技術に干渉する表面的なレイヤーを追加します。オーバーレイに頼るのではなく、テーマとコンテンツにアクセシビリティを組み込むことに焦点を当ててください。

詳細については、公式ドキュメントを参照してください: WCAG ガイドライン, WordPress アクセシビリティチーム.

よくある質問

WordPressは初めからアクセシブルですか？

WordPressコアはアクセシビリティにおいて大幅に改善されました。管理パネルは主にキーボードでナビゲート可能で、ブロックエディターにはARIAラベルが含まれています。しかし、サイトのアクセシビリティは使用するテーマとプラグインに大きく依存します。HTML構造が不十分なテーマは、WordPressの組み込みアクセシビリティ機能を損ないます。

法的にアクセシブルなウェブサイトが必要ですか？

多くの法域では、はい。ADA（米国）、欧州アクセシビリティ法（EU、2025年6月施行）、AODA（カナダ）、および類似の法律は、ウェブサイトがアクセシブルであることを要求しています。具体的な要件は、あなたの所在地、ビジネスタイプ、オーディエンスによって異なります。あなたの状況に特有の要件については、法律の専門家に相談してください。

アクセシビリティはSEOに影響しますか？

はい、大きな重複があります。適切な見出し構造、説明的なaltテキスト、セマンティックHTML、迅速なページ読み込み、モバイルフレンドリーは、アクセシビリティとSEOの両方に利益をもたらします。WCAGガイドラインに従うサイトは、基本的により良いユーザー体験を提供するため、ランキングが向上する傾向があります。SEOのベストプラクティスについては、私たちのチェックリストをご覧ください。

ページビルダーはアクセシブルなウェブサイトを作成できますか？

Elementorや他のページビルダーは、正しく使用すればアクセシブルなコンテンツを作成できます。重要なのは、適切な見出し階層を確保し、画像にaltテキストを追加し、セマンティックウィジェット（スタイル付きのdivの代わりにボタン）を使用し、キーボードナビゲーションをテストすることです。ビルダー自体がアクセシビリティを決定するのではなく、その使い方が決定します。

WordPressサイトで最も一般的なアクセシビリティのミスは何ですか？

画像のaltテキストが欠落しているか不十分であることが、最も頻繁に報告されるWCAG違反です。2番目に一般的なのは、色のコントラストが不十分であることです。どちらも修正は簡単で、技術的な専門知識ではなく、注意と一貫した実践が必要です。

WooCommerceをアクセシブルにするにはどうすればよいですか？

WooCommerceのデフォルトテンプレートは、合理的なアクセシビリティを備えています。確認すべき重要な領域: 商品画像のaltテキスト、チェックアウトフィールドのフォームラベル、カートとチェックアウトプロセスのキーボードナビゲーション、フォーム検証エラーのためのアクセシブルなエラーメッセージ。アクセシブルなテーマを基盤として使用することで、WooCommerce特有の作業が大幅に削減されます。