WordPress ウェブサイトにアクセスできるようにする方法

公開: 2023-07-07

この投稿は、WordPress アクセシビリティを専門とする認定 B Corporation である Equalize Digital の CEO、Amber Hinds がゲストとして執筆しました。 Equalize Digital とそのサービスについて詳しく知りたい場合は、同社の Web サイトをご覧ください。

世界中の何百万人もの人々がインターネットの使用方法に影響を与える障害を抱えています。パンデミックにより簡単なオンラインショッピング、食品の注文、さらには遠隔地からのヘルスケアサービスのニーズが高まった後、ウェブアクセシビリティはこれまで以上に重要になっています。

この Web アクセシビリティに関するガイドでは、アクセシビリティとは何か、それがなぜ重要なのか、テストを通じて一般的な問題を特定するなど、WordPress Web サイトをアクセシビリティ可能にする方法について説明します。

この記事では、以下について説明します。

ウェブアクセシビリティとは何ですか?
アクセシビリティが重要な理由
一般的なアクセシビリティの問題にはどのようなものがありますか?
WordPress Web サイトのアクセシビリティをテストする
ウェブサイトへのアクセスを維持する

ウェブアクセシビリティとは何ですか?

簡単に言うと、アクセシブルな Web サイトとは、一般的なキーボードとマウスのセットアップでは Web を操作できない人や、さまざまな知的または身体的差異を持つ人を含む、すべての人が使用できる Web サイトです。

Web サイトを障害のある人が使いやすく理解できるようにするには、Web サイトに特定の機能を組み込む必要があります。聴覚障害、視覚障害、認知障害、運動障害、または学習障害がある場合は、それらを使用できるようにするための設備やウェブサイトの修正が必要です。障害のある人は、状況に応じて、スクリーンリーダーなどのさまざまな支援デバイスを使用して Web サイトにアクセスします。

Web デザイナーと開発者は、Web サイトのコンテンツと機能が知覚可能、操作可能、理解可能、堅牢 (POUR) であることを保証する必要があります。これは、コンテンツと機能があらゆるデバイス上のすべての人がアクセスして理解できることを意味します。

Web サイトへのアクセスを容易にする機能の例としては、次のようなものがあります。

ビデオおよびオーディオファイルのクローズドキャプションとトランスクリプト
画像上の代替テキスト
キーボードナビゲーションを支援するためのリンクをスキップします
テキストを読みやすくするための適切な色のコントラスト

アクセシビリティが重要な理由

Web サイトのアクセシビリティは、Web を使用するすべての人に影響を与えます。あなたまたはあなたのクライアントの Web サイトにアクセスできる場合、能力に関係なく、誰もがオンライン情報、必需品、エンターテイメント、ショッピングなどに平等にアクセスできるようになります。

しかし、ウェブサイトのアクセシビリティは単に良いカルマだけを意味するものではありません。また、検索エンジンのランキング、新規売上と Web サイト訪問者、法律上の複雑さ、ブランドイメージにも現実世界の影響を及ぼします。

検索エンジンのランキング

アクセシビリティを修正すると、Web サイトの検索エンジンのランキングが向上します。画像上の代替テキストや見出し付きの適切に構造化されたコンテンツなど、多くのアクセシビリティ機能は、アクセシビリティと検索エンジン最適化 (SEO) の両方に役立ちます。検索結果ページで上位にランクされると、新しいクライアントや顧客の認知度が高まり、Web サイトのトラフィック、コンバージョン、ブログやニュースレターの購読者などの増加につながります。

売上の増加

CDC は、2018 年の時点でアメリカ人の 4 人に 1 人が障害を持っていると述べています。アメリカの障害者は年間 2,000 億ドル以上をオンライン裁量支出に費やしています。アクセシビリティ機能により、より多くの人が Web サイトを見つけて使用できるようになり、新規販売、コンバージョン、リピート顧客の機会が増加します。今日の世界では、多くの Web サイトにアクセスできませんが、アクセス可能な Web サイトはどれも競合他社よりも優れています。

法的に義務付けられています

すべての Web サイトは、アメリカ障害者法 (ADA) で定められた Web アクセシビリティ基準を満たす必要があります。 ADA の下では、ウェブサイトを公共施設の場所として確立する判例が設けられています。これは、本質的にデジタル店舗である企業 Web サイトも、実店舗の企業の建物にアクセスできるようにするのと同じ方法でアクセスできるようにする必要があることを意味します。

地方、州、連邦政府機関の Web サイト、および連邦政府の資金提供を受ける組織やプロジェクトの Web サイトも、第 508 条の基準を満たしている必要があります。さらに、Web サイトへのアクセスを義務付けるさまざまな州法および国際法があります。

Web サイトがこれらのガイドラインに規定されているアクセシビリティ要件を満たしていない場合、組織は訴訟、場合によっては政府から罰金を科されるリスクにさらされる可能性があります。 Usablenet によると、2020 年に米国で 3,550 件の Web サイトアクセシビリティに関する訴訟が起こされました。法的コンプライアンスの維持はビジネスを行う上で重要な部分であり、アクセス可能な Web サイトを持つことは、企業が法的義務を果たすための 1 つの方法です。

ブランドイメージ

WordPress ウェブサイトをよりアクセスしやすくするための措置を講じている企業や非営利団体は、社会的責任を実践していることを示し、インターネットをすべての人にとっての場所にしたいと表明しています。アクセシビリティに対する組織的な取り組みは、人々が深く人間的な方法で配慮されていることを示し、ロイヤルティを構築し、ブランドのイメージを高めることができます。

一般的なアクセシビリティの問題にはどのようなものがありますか?

私の会社である Equalize Digital は、企業、非営利団体、政府機関の Web サイトのアクセシビリティ監査を行うアクセシビリティコンサルティング会社です。すべてのテストを通じて、すべての Web サイトで多くのアクセシビリティの問題が繰り返し発生していることがわかりました。これらの一般的な問題は解決するのが比較的簡単な問題ですが、開発者、デザイナー、コンテンツ作成者は通常見落としています。

構築または管理する Web サイトにアクセスできることを確認したい場合は、まず次の問題を確認してください。

代替テキストが欠落している、または低品質である

代替テキストは、スクリーンリーダーが視覚障害者に対して画像の内容や目的を説明するために使用するものです。代替テキストが空のままの場合、スクリーンリーダーはそのテキストを完全にスキップするか、代わりに画像のファイル名を読み上げる可能性があります。これは、ファイル名が数字の文字列である場合や、外観を説明していない場合には役に立ちません。適切な代替テキストがなければ、目の見えないユーザーや視覚障害のあるユーザーは、画像の背景や理解ができなくなります。

低品質の代替テキストは、画像を正確に説明できなかったり、冗長すぎて混乱を引き起こす可能性があるため、問題があります。スクリーンリーダーは画像またはグラフィックが存在することを読み上げるため、「写真」、「イメージ」、「グラフィック」、「のイメージ」などの単語やフレーズを代替テキストに追加する必要はありません。

125 ～ 150 文字を超える代替テキストがある場合、一部のスクリーンリーダーは途中で読み上げを中断して停止します。代替テキスト内にピリオドを追加すると、スクリーンリーダーが一時停止し、リスナーを混乱させたり、代替テキストが終了したと思い込ませたりする可能性があります。

色のコントラストが不十分です

Web デザインでは、色のコントラストは、背景色とテキスト、ボタン、アイコンなどの色付き要素の間の明るさの尺度を指します。標準サイズのテキストが十分であるとみなされるには、背景色と前景色の比率が 4.5:1 である必要があります。無料のカラーコントラストチェッカーに両方の色の 16 進コードを入力することで、カラーコントラストをテストできます。

あいまいなアンカーテキスト

アンカーテキストは、Web ページ上でクリック可能な単語または単語のグループです。アンカーテキストをクリックすると、新しい Web サイトに移動したり、ドキュメントをダウンロードしたり、新しいタブで画像やビデオを開いたりする場合があります。アンカーテキストは、文脈から意味をなさない場合、またはリンクの目的を説明していない場合、曖昧であるとみなされます。曖昧なアンカーテキストの例には、「リンク」、「ここをクリック」、「詳細」、「続行」などがあります。コンテンツにリンクを追加する場合、誰かが (周囲のテキストを何も聞かずに) リンクだけを独立して聞いた場合に、リンクがどこを指しているのか、リンクをクリックすると何が起こるのかを理解できることが重要です。

キャプションとトランスクリプトが欠落している

キャプションは、ビデオから音声効果、音楽、笑い声などの音声コンテンツと非音声コンテンツを取得し、テキストで説明します。これらはビデオ中に画面に表示されるため、聴覚障害のあるユーザーもビデオ内で何が起こっているかを理解できます。さらに、キャプションはビデオのタイミングと一致する必要があります。キャプションは正確でなければならないことに注意することが重要です。自動生成されたキャプションの正確性をチェックする必要があります。

トランスクリプトは、オーディオクリップまたはビデオ中に話された内容を書面で記録したものです。トランスクリプトは、ビデオコンテンツまたはオーディオファイルを理解するための 2 番目の手段を提供します。人々がビデオを見るのではなくトランスクリプトを読めるように、ビデオのキャプションと一緒に使用する必要があります。すべてのユーザーがキャプションを読めるわけではないため、これは重要です。トランスクリプトには、他の言語に簡単に翻訳できるという利点もあり、SEO にも役立ちます。

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

Web サイトのアクセシビリティをテストする最良の方法は、自動テスト、手動テスト、およびユーザーテストを組み合わせて実行することです。

自動アクセシビリティテスト

自動アクセシビリティテストは AI スキャンツールを使用して実行されます。さまざまなアクセシビリティスキャン機能を提供できる無料および有料のツールが多数あります。自動化ツールを選択するときは、次の点に留意する必要があります。

ウェブサイトのサイズ。 小規模な Web サイトをお持ちの場合は、無料のツールが役立つ可能性があります。数千件の投稿があるブログや e コマースセクションがあるサイトなど、大規模な Web サイトをお持ちの場合は、有料ツールの方が適している可能性があります。
どれだけのサポートが必要か。 Web サイト上のアクセシビリティエラーを見つけて修正するためにサポートが必要な場合は、無料ツールが優れた選択肢となります。アクセシビリティエラーを理解するのに助けが必要な場合、または他の人に修正してもらいたい場合は、組み込みまたは開発者が提供するサポートオプションを備えたツールを探してみてください。アクセシビリティ修復を初めて使用する場合は、サポートを利用できることが重要です。
ユーザー体験。 一部の自動アクセシビリティツールは、ブラウザ拡張機能や WordPress ダッシュボード内など、Web サイト上で直接使用できます。他のツールでは、Web サイトとは完全に別のインターフェイスを使用する必要があります。 Web サイトでの作業中にアクセシビリティエラーを確認したい場合は、オンサイトレポートを提供するツールを選択してください。これにより、サイト上のコンテンツを編集する際に、Web サイトのアクセシビリティを継続的にチェックすることが容易になります。

あらゆる Web サイトで使用できる 2 つの人気のある無料ツールは、WAVE と Axe です。これらのツールには、単一の URL を一度に 1 つずつテストできる Chrome 拡張機能と Firefox 拡張機能があり、一括テストや追加機能を可能にする有料プランもあります。

アクセシビリティチェッカー WordPress プラグイン

一括アクセシビリティスキャンを実行し、WordPress ダッシュボードでレポートを確認したい場合は、WordPress アクセシビリティチェッカープラグインが最適なツールです。プラグインの基本バージョンは WordPress.org から無料でダウンロードできます。

アクセシビリティチェッカーは、ページと投稿をスキャンしてアクセシビリティエラーや潜在的な問題を検出し、そのページまたは投稿の編集画面に直接表示します。これらのページ内レポートは、Web サイトが最初からアクセス可能かどうかを確認するだけでなく、継続的なアクセシビリティを監視するのにも役立ちます。

アクセシビリティチェッカーは、上記で特定された一般的な問題を含め、40 を超えるさまざまなチェックを実行します。無料版では投稿とページがスキャンされ、プロ版ではカスタム投稿タイプとアーカイブページの完全なサイトスキャンが含まれます。誤ってフラグが立てられたアイテムやレビューされたアイテムは無視できるため、時間の経過とともに行われるアクセシビリティの修正を追跡できます。これは、代理店、開発者、WordPress ユーザーにとっても同様に優れたツールです。

手動テスト

残念ながら、自動スキャンでは Web サイト上のすべてのアクセシビリティの問題を特定することはできません。一部の問題は、人間が Web サイトを閲覧することによってのみ判断できます。アクセシビリティチェッカーなどの自動ツールを使用して Web サイトをテストした後、次に手動テストを実行して、使用しているデバイスに関係なくすべての人が Web サイトを使用できることを確認します。

手動アクセシビリティテストの最初のステップは、ユーザーがキーボードだけで完全に操作できることを確認することです。 Web サイトのフロントエンドに移動し、タブと矢印キーを使用してサイト内を移動します。移動中に場所を失わず、Web サイトのすべての部分を使用できることを確認します。

キーボードのテストが完了したら、スクリーンリーダーのテストに進むことができます。スクリーンリーダーは、視覚障害者が Web コンテンツを理解するために使用する支援技術ソフトウェアの一種です。 Mac をお持ちの場合は、コンピュータに組み込まれている VoiceOver ソフトウェアを使用できます。 Mac をお持ちでない場合は、無料のオープンソーススクリーンリーダー NVDA をダウンロードするか、人気のあるスクリーンリーダー JAWS を購入できます。すべてのスクリーンリーダーが個々の要素に対して同じことを言うわけではないため、2 つ以上のスクリーンリーダーで Web サイトをテストすることをお勧めします。

スクリーンリーダーを使用して Web サイトをテストするには、テストするページに移動し、キーボードナビゲーションテストのときと同じように、タブと矢印キーのみを使用してページ内を移動します。ページ内を移動しながらスクリーンリーダーの音声を聞いて、間違っているものや混乱を招くものがある場合はフラグを立ててください。自動的に再生され、ページ上の他のコンテンツを中断するメディアファイルまたはスライダーを聞きます。

キーボードナビゲーションとスクリーンリーダーのテストを実行したら、すべての埋め込みメディアファイルまたはリンクされたメディアファイルをチェックする必要があります。メディアファイルには、ビデオ、オーディオファイル、PDF、.Doc または .XLS ファイル、画像またはテキストスライダー、サードパーティのウィジェットまたは iFrame が含まれます。障害を持つ人々が、すべての埋め込みまたはリンクされたメディアファイルによって表示されるコンテンツにアクセスし、操作し、理解できるようにします。

ユーザーテスト

自動および手動のアクセシビリティテストの後に、ユーザーテストを実行することをお勧めします。ユーザーテストには、Web サイトのアクセシビリティエラーをテストするために実際の支援技術ユーザーを雇うことが含まれます。通常、テストユーザーには、Web 開発者から具体的な目標に関する概要が与えられます。テストユーザーはそれらの目標を達成しようとして、開発者にフィードバックを提供します。

有料プログラムまたはボランティアプログラムを通じて個々のテストユーザーを雇用することも、ユーザーテストサービスを提供するアクセシビリティ会社を見つけることもできます。

結論: Web サイトへのアクセスを維持する

SEO と同様、アクセシビリティは継続的なプロセスであり、継続的な監視と変更が必要であることに注意することが重要です。 Web サイトへのアクセスを確保するには、次の計画を立ててください。

アクセシビリティチェックプラグインなどのツールを使用して、アクセシビリティエラーを定期的に監視し、テストします。
Web 開発者、デザイナー、コンテンツ作成者を Web アクセシビリティのベストプラクティスについてトレーニングします。クライアント向けに Web サイトを立ち上げる場合は、立ち上げ後にアクセスしやすい方法でコンテンツを追加する方法をクライアントに理解させてください。
従う必要があるアクセシビリティのガイドラインや法律の変更について常に最新の情報を入手してください。

これらの手順を実行することで、Web サイトへのアクセスを確保し、能力に関係なく、すべての人が Web 上の情報、製品、サービスに平等にアクセスできるようになります。