WordPressサイトのアクセシビリティを向上させる方法

WordPressサイトのアクセシビリティを改善したいですか？

サイトを構築する際、アクセシビリティは軽視されがちで、ユーザーエクスペリエンス（UX）の低下を招きかねません。理想的には、WordPressサイトはユーザーフレンドリーで、ニーズに関係なくすべての人を受け入れるものでありたいものです。

この投稿では、WordPressサイトのアクセシビリティを向上させる方法をご紹介します。

なぜアクセシビリティがWordPressサイトにとって重要なのか？

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

サイトをよりアクセシブルにするために、専門家が推奨する一般的なベストプラクティスがいくつかあります。これらのベストプラクティスは、能力の有無にかかわらず、誰もが利用しやすく、ユーザーフレンドリーなサイトを作るのに役立ちます。

アクセシビリティを優先することで、より多くの人がWordPressサイトをナビゲーションし、コンテンツを探索できるようになります。オンラインストアを運営している場合は、ユーザーをカスタマイザーに変えるチャンスも増えます。

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

さらに、ビジネスサイトのオーナーで、サイトのフロントエンドにアクセスできない場合、法的な問題に直面する可能性があります。

米国障害者法（ADA）では、サイトがアクセシビリティ・ガイドラインに準拠していない場合、消費者は苦情を申し立てることができると定めています。さらに、あなたの評判が台無しになり、金銭的な損失が発生する可能性もあります。

WordPressはどのようにサイトをアクセシブルにするのか？

WordPressには、ユーザーがWordPressサイトをアクセシブルにするための機能がいくつかビルトインされています。例えば、初期設定では、画像に代替テキスト（altテキスト）とタイトル属性を追加して、視覚障害のあるユーザーがスクリーンリーダーで読み上げられるようにすることができます。

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

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

より詳細な情報については、Make WordPress CoreページのAccessibilityタグを常にチェックすることをお勧めします。

WordPressは、すべてそのままアクセシブルに使えるわけではありません。サイトオーナーとして、サイトがアクセシビリティ基準を満たすよう、特別な措置を講じることが重要です。

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

1.ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）に慣れ親しむ

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

まずはWCAG2.1とWCAG2.2の更新をご覧ください。両方のドキュメンテーションを読むには長すぎるようであれば、代わりにこのクイックリファレンスをブックマークしておいてください。

2.アクセシビリティに対応したWordPressテーマを使う

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

アクセシブルなWordPressテーマを使用したからといって、あなたのサイトがすべてのアクセシビリティ必須要件に自動的に準拠するわけではありません。しかし、あなたのサイトをよりアクセシブルにするためのきっかけを与えることはできます。

少なくとも、アクセシビリティに対応したテーマには以下のようなものがある：

• キーボードだけでナビゲーションできるメニュー。
• 視覚障害のあるユーザーでもコンテンツが読めるよう、色のコントラストが良い。
• 意味的に正しいHTMLは、支援技術がウェブページのコンテンツや構造を理解するのに役立ちます。

さらに一歩進めたい場合は、テーマにARIA属性があるかどうかもチェックするとよいでしょう。これらの属性は、テーマのHTMLを補完する余分な情報のようなもので、支援技術のためにサイトをさらにナビゲートしやすくします。

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

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

フィルターを自由に追加して、あなたのニーズに一致するテーマを見つけてください。

ここで、下にスクロールして「フィルターを適用」をクリックする。

すると画面にアクセシビリティ対応のテーマがいくつか表示されます。

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

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

WordPressアクセシビリティプラグインは、障害を持つ訪問者がサイトをナビゲートするのに役立つ機能を追加します。

WordPressのアクセシビリティ・プラグインのひとつに、WP Accessibilityがあります。このプラグインでできることには、次のようなものがあります：

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

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

有効化した後、Settings ” WP Accessibilityでプラグインを設定する必要があります。

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

リンクをスキップする

プラグイン設定の最初のセクションでは、サイト上でスキップリンクを使用することができ、この設定は初期設定で有効化されています。スキップリンクにより、ユーザーは投稿やページのコンテンツセクションに直接ジャンプすることができます。

これは、スクリーンリーダーを使っている人にとって非常に便利な機能です。スキップ・リンクがなければ、コンテンツ部分に到達する前に、ナビゲーション・メニューを含め、あなたのサイトに表示されるすべてを聞かなければなりません。

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

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

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

プラグインを有効化すると、ユーザーがフォントサイズを変更したり、サイトをハイコントラストカラーモードで表示できるツールバーがサイトに追加されます。

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

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

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

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

これがテストサイトでのツールバーの表示です。

アクセシビリティの修正

WP Accessibilityはまた、あなたのサイトの潜在的な問題を解決する可能性のあるいくつかのアクセシビリティの修正を提供します。各オプションに目を通し、必要かどうかを確認してください。

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

アクセシビリティフレンドリーなテーマを使用していて、すでにこれらの機能のいくつかが有効化されている場合は、セクションの上部にそれを確認するメッセージが表示されます。

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

アクセシビリティの特徴

プラグインには、コンテンツをよりアクセスしやすくするためのオプションもいくつか用意されています。

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

投稿やページの上部に要約を表示するオプションもあります。これにより、スクリーンリーダーを使用している人は、投稿全体を聞くかどうかを決める前に、コンテンツの要約を聞くことができます。

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

テストと管理経験

次に、WordPress管理エリアのアクセシビリティを向上させ、テストに役立つ設定をいくつかご紹介します。

このセクションはより専門的なので、ボックスにチェックを入れる前にプラグインのドキュメンテーションを参照してください。

本当に〜してもよいですか？ ‘アクセシビリティツールの更新’ボタンをクリックして、変更を保存してください。

タイトル属性の削除

このセクションでは、タグクラウドからtitle属性を削除することができます。

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

この設定は初期設定では有効化されていますが、変更する場合は必ず「タイトル属性設定の更新」ボタンをクリックしてください。

4.サイトのカラーコントラストをチェックする

カラーコントラストとは、文字色と背景色の差を意味します。視力の弱い人や色覚異常の人にとって、サイトのコンテンツが読みやすいかどうかに影響するため、サイトのアクセシビリティにとって非常に重要な部分です。

つまり、テキストは背景の4.5倍の明るさが必要です。

大きなテキストの場合、必須はもう少し少なくなり、3対1になります。これはコントラストが少し低くても必要であることを意味します。同じルールがグラフィックやユーザーインターフェースの要素（フォーム入力の枠線など）にも適用されます。

WP Accessibilityプラグインには、カラーコントラストチェッカーがビルトインされています。

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

次に、『カラーコントラストをチェックする』をクリックします。

プラグインは、その色がコントラストテストに合格か不合格かを教えてくれる。

結果はこんな感じだ：

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

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

詳しくは、WordPressサイトに最適な配色を選ぶ方法をご覧ください。

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

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

前回、WordPressにはaltテキストを追加するビルトイン機能があることを紹介した。設定方法はとても簡単で、以下のガイドですべて読むことができます：

• 画像SEOビギナーズガイド – 検索エンジン向けに画像を最適化する
• WordPressの画像Altテキストと画像タイトルの違いとは？

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

サイトにフォームがある場合、各フォーム要素に適切なラベルを使用することを確認したいでしょう。これには、フォームフィールド、ボタン、メニューなどが含まれます。

WCAGは、支援ツールがそれぞれの要素を識別し、ユーザーに情報を伝えやすくするために、すべてのフォーム要素にラベルを追加することを推奨しています。

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

フォームの作り方が本当に〜してもよいですか？WPFormsは、アクセシビリティの改善など、あなたのニーズに合わせてフォームをカスタマイズするのがとても簡単なWordPressのフォームビルダーです。

WPFormsについてはWPFormsレビューで詳しく説明しています。また、WordPressでフォームを作成する方法については、これらのガイドをチェックしてください：

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

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

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

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

見出しタグの使い方が本当に〜してもよいですか？

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

アンカーテキストやリンクテキストとは、基本的にリンクの中のクリック可能な語句のことです。どのテキストがリンクされているかは、通常、色が違うのでわかります。

多くの場合、ブロガーは訪問者をページに誘導するために「ここをクリック」や「続きを読む」というリンクテキストを使う。

これはアクセシビリティにとって良い方法とは言えません。このため、支援技術を使っている人がリンクの目的を理解することが難しくなります。

だからこそ、代わりに説明的なアンカーテキストを使うのがベストなのだ。つまり、リンクをクリックしたときに、そのコンテンツが何についてのものかを説明する言葉を使うということだ。

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

このガイドに従ってください』やその文中のどこかにリンクを追加するのではなく、『最高のWordPressホスティングサービス』の中に挿入すべきです。こうすることで、ユーザーはリンク先のコンテンツで見つけられるものの概要を知ることができる

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

9.動画や音声コンテンツに字幕やトランスクリプトを追加する。

聴覚障害のあるユーザーにとって、動画や音声ファイルの音声コンテンツを理解できないことは、主な問題の1つです。そのため、多くの動画コンテンツ制作者やポッドキャスターがキャプションやトランスクリプトを追加しています。

WPBeginnerでは、サイトが遅くなる可能性があるため、自分のサイトに動画をアップロードすることを強くお勧めしません。代わりに、YouTubeやVimeoのようなサービスを利用するのがベストです。これらのサービスには、キャプションを追加するためのビルトインツールがあります。

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

詳しくは、最高のテープ起こしサービスのリストをご覧ください。

10.ユーザビリティとアクセシビリティのテストを行う

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

このテストは、残っている問題を特定し、ユーザーフレンドリーで誰もがアクセスできるサイトを作るのに役立ちます。

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

サイトのドメイン名を入力するだけで、アクセシビリティに関連する問題を特定してくれます。

アクセシビリティ・スキャナーを使うこともできます。Equalize DigitalのAccessibility Checkerをチェックすることをお勧めします。無料プラグイン版もあり、サイトの投稿日やページを無制限にスキャンできます。

プラグインをインストールしたら、ページや投稿のブロックエディターにアクセスするだけです。メタ情報セクションまでスクロールすると、アクセシビリティの問題を特定するアクセシビリティ・チェッカーが表示されます。

もう一つのオプションは、UX監査を実施することです。これは基本的に、あなたのサイトが優れたユーザーエクスペリエンスを持っているかどうかをチェックすることを意味します。詳しくはUX監査ガイドをご覧ください。

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

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

詳しくは、WordPressでサイトデザインのフィードバックを得る方法をご覧ください。

WordPressのアクセシビリティに関するエキスパートガイド

サイトのアクセシビリティを向上させる方法はおわかりいただけたと思いますが、WordPressのアクセシビリティに関する他のガイドもご覧ください：

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

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.