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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

詳細については、Make WordPress Coreページのアクセシビリティタグをフォローすることをお勧めします。

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

このガイドでは、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を確認することをお勧めします。これは、アクセシビリティの向上を含め、フォームを正確なニーズに合わせて簡単にカスタマイズできる最高の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によるアクセシビリティチェッカーをチェックすることをお勧めします。また、ウェブサイトの無制限の投稿やページをスキャンするための無料プラグインバージョンも付属しています。

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

別の選択肢として、UX監査を実行することもできます。これは基本的に、ウェブサイトが良いユーザーエクスペリエンスを持っているかどうかを確認することです。詳細については、UX監査ガイドをご覧ください。

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

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

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

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

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

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

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。