WordPressサイトのアクセシビリティを改善する方法

ウェブサイトを訪れた際に、テキストが読めなかったり、メニューが使えなかったり、何も理解できなかったりした経験はありますか？信じがたいかもしれませんが、これは毎日多くの障害を持つ人々が直面している現実です。

ウェブサイトを構築する際、アクセシビリティはしばしば見過ごされがちな要素です。しかし、コンテンツと多くの訪問者の間に障壁を生み出す可能性があるため、実際にはそうすべきではありません。私たちの経験では、ウェブサイトがアクセシブルでない場合、非常に歓迎されない、さらには排他的に感じられることがあります。

サイトのアクセシビリティを確保することは、単にルールに従うだけでなく、誰もがサイトで素晴らしい体験を得られるようにすることでもあります。それは、インクルーシブであること、そしてすべての訪問者のニーズや能力に関係なく、例外的なユーザーエクスペリエンスを提供することです。

したがって、あなたのウェブサイトをすべての人にとって歓迎できるものにする準備ができているなら、WordPressサイトのアクセシビリティを段階的に改善する方法を説明します。

WordPressサイトでアクセシビリティが重要な理由

ウェブデザインにおいて、アクセシビリティとは、障害を持つ人々がウェブサイトをより使いやすくするための技術を指します。一部の訪問者は、視覚障害者向けのスクリーンリーダーや、マウスが使えない人のためのキーボードナビゲーションなど、支援技術を使用してウェブをナビゲートします。

ウェブサイトをよりアクセシブルにするために専門家が推奨する、いくつかの一般的なベストプラクティスがあります。これらは、能力に関係なく、すべての人にとってサイトをより包括的で使いやすいものにするのに役立ちます。

アクセシビリティを優先することで、より多くの人々があなたのWordPressウェブサイトをナビゲートし、コンテンツを探索できるようになります。もしあなたがオンラインストアを運営しているなら、ユーザーを顧客に転換するチャンスも増えるでしょう。

アクセシビリティは検索エンジン最適化（SEO）にとっても重要です。Googleはユーザーフレンドリーなウェブサイトを高く評価します。モバイルデバイスでのウェブサイトの応答性を高めるだけでなく、ウェブデザインでインクルーシビティを優先することでランキングを向上させることもできます。

さらに、あなたがビジネスウェブサイトの所有者であり、サイトのフロントエンドがアクセスできない場合、法的な結果に直面する可能性があります。

障害を持つアメリカ人法（ADA）では、サイトがアクセシビリティガイドラインに準拠していない場合、消費者は苦情を申し立てることができると規定しています。さらに、あなたの評判が損なわれ、経済的損失につながる可能性もあります。

WordPressはどのように私のウェブサイトをよりアクセスしやすくしますか？

WordPressには、ユーザーがWordPressウェブサイトをアクセスしやすくするのに役立ついくつかの組み込み機能があります。たとえば、デフォルトでは、スクリーンリーダーが視覚障害のあるユーザーのために読み上げることができるように、画像に代替テキスト（altテキスト）とタイトル属性を追加できます。

WordPressでは、WordPressの新規および更新されたコードはすべて、そのアクセシビリティコーディングスタンダードに従うことが義務付けられています。これは、WordPress開発者がテーマやプラグインを作成する際に、アクセシビリティのベストプラクティスを遵守することを保証するためです。

それ以外にも、WordPressには、ウィジェットを追加するためのアクセシビリティモードのように、障害を持つユーザーが簡単に自分のウェブサイトを構築できる機能が含まれています。

詳細については、Make WordPress Core の Accessibility タグ を参照することをお勧めします。

これらすべてを考慮すると、WordPressはすぐに完全にアクセス可能になるわけではありません。ウェブサイトの所有者として、サイトがアクセシビリティ基準を満たすように追加の手順を踏むことが重要です。

このガイドでは、WordPressウェブサイトのアクセシビリティを向上させるための簡単なヒントをいくつか紹介します。これらのクイックリンクを使用して、特定のセクションに移動できます。

1. ウェブコンテンツアクセシビリティガイドライン（WCAG）に慣れる
2. アクセシビリティ対応WordPressテーマを使用する
3. WordPressのアクセシビリティプラグインをインストールする
4. ウェブサイトの色のコントラストを確認する
5. 画像に代替テキストとタイトル属性を追加する
6. すべてのフォームフィールドにラベルを追加する
7. コンテンツで適切な見出しタグを使用する
8. 説明的なアンカーテキストを使用する
9. 動画や音声コンテンツにキャプションまたはトランスクリプトを追加する
10. ユーザビリティとアクセシビリティのテストを実施する
11. WordPressアクセシビリティに関する専門家ガイド

1. Web Content Accessibility Guidelines (WCAG) に慣れる

まず、Webコンテンツアクセシビリティガイドライン（WCAG）を読むことをお勧めします。これらは、W3C Webアクセシビリティイニシアチブ（WAI）によって定められた、ユーザーがウェブサイトをよりアクセスしやすくするための基準です。

まず、WCAG 2.1とWCAG 2.2の更新を確認できます。どちらのドキュメントも長すぎると感じる場合は、代わりにこのクイックリファレンスをブックマークしてください。

2. アクセシビリティ対応のWordPressテーマを使用する

アクセシビリティ対応テーマは、WordPressテーマレビューチームが設定した最小限のアクセシビリティ基準を満たしています。

アクセシビリティ対応のWordPressテーマを使用しても、ウェブサイトがすべてのアクセシビリティ要件に自動的に準拠するわけではありません。自分でいくつかの調整を行う必要があるからです。ただし、ウェブサイトをよりアクセシビリティ対応にするための足がかりにはなります。

少なくとも、アクセシビリティ対応のテーマには次のものが含まれます。

• キーボードのみでナビゲート可能なメニュー。
• 視覚障害のあるユーザーがコンテンツを読みやすくする、優れた色のコントラスト。
• セマンティックに正しいHTML。これは、支援技術がウェブページのコンテンツと構造を理解するのに役立ちます。

さらに進んで、テーマにARIA属性が含まれているかどうかも確認したい場合があります。これらの属性は、ウェブサイトを支援技術にとってさらにナビゲートしやすくするために、テーマのHTMLを補完する追加情報のようなものです。

アクセシビリティ対応テーマを探す最も簡単な方法は、WordPressダッシュボードで外観 » テーマに移動することです。次に、「新しいテーマを追加」をクリックします。

ここから「機能フィルター」を選択し、「アクセシビリティ対応」を選択します。

お客様のニーズに完全に一致するテーマを見つけるために、さらに多くのフィルターを追加してください。

次に、下にスクロールして「フィルターの適用」をクリックします。

画面にアクセシビリティ対応テーマが表示されます。

テーマのおすすめについては、専門家が選ぶ最高のWordPressテーマをご覧ください。

3. WordPressアクセシビリティプラグインをインストールする

WordPressのアクセシビリティプラグインは、障害を持つ訪問者があなたのウェブサイトをナビゲートするための便利な機能を追加します。

私たちが推奨するWordPressのアクセシビリティプラグインの1つは、WP Accessibilityです。このプラグインができることの一部は次のとおりです。

• アクセシビリティツールバーを追加する
• テーマがアクセシビリティ対応かどうかを検出する
• ウェブサイトのアクセシビリティ機能がどのように使用されているかを追跡し、評価できるようにする

まず、WordPressでプラグインをインストールして有効化する必要があります。

有効化後、プラグインを設定するには、設定 » WP Accessibilityに移動する必要があります。

設定ページの各セクションを見てみましょう。

スキップリンクを追加

プラグイン設定の最初のセクションでは、ウェブサイトでスキップリンクを使用できます。この設定はデフォルトで有効になっています。スキップリンクを使用すると、ユーザーは投稿やページのコンテンツセクションに直接ジャンプできます。

これは、スクリーンリーダーを使用している人にとって非常に便利な機能です。スキップリンクがないと、コンテンツ部分に到達する前に、ナビゲーションメニューを含む、ウェブサイトに表示されているすべてのものを聞く必要があります。

テーマがすでにスキップリンクを使用している場合は、確認の通知が表示されます。

アクセシビリティツールバー

WP Accessibilityプラグインには、アクセシビリティツールバーが付属しています。

有効にすると、プラグインはあなたのウェブサイトにツールバーを追加し、ユーザーはそこでフォントサイズを変更したり、ハイコントラストカラーモードでサイトを表示したりできます。

これにより、ユーザーはページを読みやすくするために必要なオプションを選択できます。

ツールバーを有効にするには、単に「フォントサイズ」と「コントラスト」のチェックボックスをオンにします。

ツールバーのフォントサイズと配置を制御できる設定もあります。

これらの設定を変更した場合は、「ツールバー設定を更新」ボタンをクリックして設定を保存してください。

こちらがテストサイトのツールバーの外観です。

アクセシビリティの修正

WP Accessibilityは、サイトの潜在的な問題を解決できるいくつかのアクセシビリティ修正も提供しています。各オプションを確認して、必要かどうかを確認できます。

いくつかの推奨設定はデフォルトでチェックされています。これらのオプションは、リンクが新しいウィンドウで開くのを防ぎ、空の検索送信を送信したときにエラーを表示し、キーボードナビゲーションを簡素化するために不要な tabindex HTML 属性を削除します。

アクセシビリティ対応のテーマを使用しており、これらの機能の一部がすでに有効になっている場合は、セクションの上部にその確認メッセージが表示されます。

変更を保存するには、「その他の設定を更新」ボタンをクリックすることを忘れないでください。

アクセシビリティ機能

このプラグインは、コンテンツをよりアクセシブルにするためのいくつかのオプションも提供しています。

設定の最初のグループは、スクリーンリーダーを使用するユーザーが画像を扱いやすくします。

投稿やページの先頭に要約を表示するオプションもあります。これにより、スクリーンリーダーを使用しているユーザーは、記事全体を聞く前にコンテンツの要約を聞くことができます。

これらのオプションのいずれかを変更した場合は、「アクセシビリティ機能の更新」ボタンをクリックすることを忘れないでください。

テストと管理者のエクスペリエンス

次に、WordPress管理エリアのアクセシビリティを改善し、テストに役立ついくつかの設定が表示されます。

このセクションはより技術的であるため、チェックボックスをオンにする前に必ずプラグインのドキュメントを参照してください。

変更を保存するには、「アクセシビリティツールを更新」ボタンをクリックしてください。

タイトル属性を削除する

このセクションでは、タグクラウドから タイトル属性 を削除できます。

title属性は、一部のアクセシビリティ専門家によって役に立たないと考えられています。ほとんどのスクリーンリーダーは通常、title属性を無視し、代わりにアンカーテキストを読み取ります。

この設定はデフォルトで有効になっていますが、変更した場合は、「タイトル属性設定の更新」ボタンをクリックしてください。

4. ウェブサイトのカラーコントラストを確認する

色のコントラストとは、テキストの色と背景色の違いのことです。これはウェブサイトのアクセシビリティにおいて非常に重要な部分であり、視力の弱い人や色覚異常のある人にとってウェブサイトのコンテンツの読みやすさに影響を与える可能性があるためです。

ウェブアクセシビリティ基準を満たすためには、通常のテキストは少なくとも4.5対1の高いコントラストが必要です。これは、テキストが背景よりも4.5倍明るい必要があることを意味します。

大きな文字の場合、要件はやや緩やかになり、3対1になります。これは、わずかに低いコントラストでも許容されることを意味します。同じルールは、フォーム入力境界線などのグラフィックやユーザーインターフェイス要素にも適用されます。

WP Accessibilityプラグインには、使用できる組み込みの色のコントラストチェッカーがあります。

プラグイン設定で、カラーコントラストテスターセクションまでスクロールダウンし、前景の色（テキストに使用する色）とその背景色を選択するだけです。

次に、「色のコントラストをチェック」をクリックします。

プラグインは、色がコントラストテストに合格したか、合格しなかったかを通知します。

結果は次のようになります。

または、無料のWebAIM Contrast Checkerを使用することもできます。前のツールと同様に、前景の色と背景の色を選択するだけで済みます。

このツールは、カラーコントラストをテストするだけでなく、通常のテキストや大きなテキスト、グラフィカルオブジェクト、ユーザーインターフェイスコンポーネントとして色がどのように見えるかも表示します。

詳細については、WordPressサイトに最適な配色を選ぶ方法に関するガイドをご覧ください。

5. 画像に代替テキストを追加する

画像の代替テキストは、検索エンジンに役立つだけでなく、視覚障害のあるユーザーに画像を説明するためにスクリーンリーダーにも役立ちます。

以前に、WordPressには代替テキストを追加するための組み込み機能があると述べました。そのプロセスは非常に簡単で、以下のガイドで設定方法をすべて読むことができます。

• 画像 SEO の初心者ガイド – 検索エンジンのための画像を最適化する
• WordPressにおける画像Altテキストと画像タイトルの違いとは？

6. すべてのフォームフィールドにラベルを追加する

ウェブサイトにフォームがある場合は、各フォーム要素に適切なラベルを使用するようにしてください。これには、フォームフィールド、ボタン、メニューなどが含まれます。

WCAGでは、支援ツールが各フォーム要素を特定し、ユーザーに情報を伝えるのを容易にするために、すべてのフォーム要素にラベルを追加することを推奨しています。

さらに、明確で説明的なラベルを追加することは、優れたウェブデザインの実践です。各フォームフィールドが何のためにあるのかをユーザーが理解するのを助けることで、ユーザーエラーが発生しにくくなり、より多くの人がフォームを送信できるようになります。

優れたフォームの作成方法がわからない場合は、WPFormsを確認することをお勧めします。WPFormsは、アクセシビリティの向上を含め、フォームを正確なニーズに合わせて簡単にカスタマイズできる、最高のWordPressフォームビルダーです。

WPFormsの詳細については、WPFormsレビューをご覧ください。また、WordPressでフォームを作成する方法に関するこれらのガイドも参照してください。

• WordPressで問い合わせフォームを作成する方法（ステップバイステップ）
• WordPressで予約フォームを作成する方法
• WordPressでカスタムユーザー登録フォームを作成する方法

7. コンテンツに適切な見出しタグを使用する

見出しタグは、ウェブページのタイトルやサブタイトルを示すことができるHTMLタグです。これにより、コンテンツがより整理され、フォローしやすくなります。

これらのタグは、スクリーンリーダーのようなツールが、視覚障害のあるユーザーのためにナビゲーション可能なアウトラインを生成するのに役立ちます。これにより、セクション間を移動したり、コンテンツ全体の構造を理解したりできるようになります。

見出しタグの活用方法がわからない場合は、WordPressで見出しタグを正しく使用する方法に関するガイドをお読みください。

8. 説明的なアンカーテキストを使用する

アンカーまたはリンクテキストは、基本的にリンク内のクリック可能な単語またはフレーズです。リンクされているテキストは通常、色が異なるため、識別できます。

ブロガーは、訪問者をページに誘導するために、「ここをクリック」や「続きを読む」といったリンクテキストを使用することがよくあります。

これは、リンク先に関する情報が一切提供されないため、アクセシビリティの観点から良い実践方法ではありません。これにより、支援技術を使用している人々がリンクの目的を理解することが困難になります。

そのため、代わりに説明的なアンカーテキストを使用するのが最善です。これは、リンクをクリックしたときにコンテンツが何についてであるかを説明する単語を使用することを意味します。

たとえば、この文に「市場で最高のWordPressホスティングサービスについて学ぶには、このガイドに従ってください。」という、最高のWordPressホスティングに関する記事へのリンクを追加したいとします。

「このガイドに従う」やその他の文中のどこかにリンクを追加する代わりに、「最高のWordPressホスティングサービス」に挿入する必要があります。このようにすると、ユーザーはリンクされたコンテンツで見つかるものの概要を把握できます。

リンクとアンカーテキストの詳細については、WordPressでのリンク設定に関する初心者ガイドをご覧ください。

9. 動画や音声コンテンツにキャプションまたはトランスクリプトを追加する

聴覚障害のあるユーザーが直面する主な困難の1つは、ビデオやオーディオで話されている内容を理解できないことです。そのため、多くのビデオコンテンツクリエーターやポッドキャスターは、キャプションやトランスクリプトを追加しています。

WPBeginnerでは、サイトの速度が低下する可能性があるため、ご自身のウェブサイトに動画をアップロードすることは強くお勧めしません。代わりに、キャプションを追加するための組み込みツールを備えたYouTubeやVimeoのようなサービスを使用するのが最善です。

音声コンテンツについては、文字起こしサービスを利用して音声を簡単にテキストに変換することを検討すると良いでしょう。これにより、音声コンテンツの書き起こしを手動で作成する必要がなくなります。

詳細については、最高の文字起こしサービスのリストをご覧ください。

10.ユーザビリティとアクセシビリティのテストを実施する

このガイドのヒントをすべて実装した場合、最後のステップはWordPressウェブサイトのユーザビリティとアクセシビリティのテストを行うことです。

このテストは、残りの問題を特定し、ウェブサイトを誰にとっても使いやすく、アクセスしやすいものにするのに役立ちます。

WebAIMには、無料で利用できるWebアクセシビリティ評価ツール（WAVE）があります。

ウェブサイトのドメイン名を入力するだけで、ツールがアクセシビリティに関連する問題を特定します。

アクセシビリティスキャナーを使用することもできます。Equalize Digital Accessibility checker (Equalize Digitalによるアクセシビリティチェッカー) をチェックすることをお勧めします。また、ウェブサイトの無制限の投稿やページをスキャンできる無料プラグインバージョンも付属しています。

プラグインをインストールしたら、ページのブロックエディターまたは投稿に移動するだけです。メタボックスセクションまでスクロールダウンすると、アクセシビリティの問題を特定するアクセシビリティチェッカーが見つかります。

もう1つのオプションは、UX監査を実行することです。これは基本的に、ウェブサイトに優れたユーザーエクスペリエンスがあるかどうかを確認することです。詳細については、UX監査ガイドをご覧ください。

最後になりましたが、ユーザーからのフィードバックを求めることをお勧めします。テストで結果を得ることはできますが、サイトのアクセシビリティ機能を使用している実際の訪問者からのフィードバックを得ることで、より正確な洞察が得られます。

UserFeedback は、この作業に最適なプラグインです。ユーザーの意見や考えを収集するためのアンケートを作成できます。ウェブサイトのデザインフィードバック用のテンプレートもあるため、アンケートをゼロから作成する必要はありません。

詳細については、WordPressでウェブサイトのデザインフィードバックを得る方法に関するガイドをご覧ください。

WordPressアクセシビリティに関する専門家ガイド

サイトのアクセシビリティを改善する方法がわかったので、WordPressのアクセシビリティに関する他のガイドもご覧ください。

• WordPressウィジェットをアクセシビリティモードで追加する方法
• WordPressサイトに最適なカラー配色の選び方
• WordPressにフォントリサイザーを追加してアクセシビリティを向上させる方法
• WordPressで画像のタイトル属性を簡単に追加する方法
• WordPressでテキストをハイライトする方法（初心者向けガイド）
• WordPressにおける画像Altテキストと画像タイトルの違いとは？

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。