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

公開: 2021-02-25

世界中の何百万人もの人々が、インターネットの使用方法に影響を与える障害を持っています。コロナウイルスの大流行により、簡単なオンラインショッピング、食品の注文、さらにはリモートヘルスケアサービスの必要性がますます高まっているため、Webアクセシビリティはこれまで以上に重要になっています。

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

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

Webアクセシビリティとは何ですか？
アクセシビリティが重要な理由
一般的なアクセシビリティの問題は何ですか？
WordPressWebサイトのアクセシビリティのテスト
Webサイトにアクセスできるようにする

Webアクセシビリティとは何ですか？

簡単に言えば、アクセシブルなWebサイトとは、一般的なキーボードやマウスの設定ではWebを操作できない人や、さまざまな知的または物理的な違いがある人を含む、すべての人が使用できるWebサイトです。

障害を持つ人々がそれらを使用可能で理解できるようにするために、特定の機能をWebサイトに組み込む必要があります。聴覚障害、視覚障害、認知障害、運動障害、または学習障害は、それらを使用可能にするために、宿泊施設とWebサイトの変更が必要です。障害を持つ人々は、状況に応じて、スクリーンリーダーなどのさまざまな支援デバイスを使用してWebサイトにアクセスします。

Webデザイナーと開発者は、Webサイトのコンテンツと機能が認識可能で、操作可能で、理解可能で、堅牢（POUR）であることを確認する必要があります。つまり、すべてのデバイスのすべての人がコンテンツと機能にアクセスして理解できるようにする必要があります。

Webサイトをよりアクセシブルにする機能の例は次のとおりです。

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

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

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

しかし、ウェブサイトのアクセシビリティは良いカルマだけではありません。また、検索エンジンのランキング、新規販売とWebサイトの訪問者、法的な問題、ブランドイメージにも実際の影響を及ぼします。

検索エンジンランキング

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

売上増加

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

法的に必要です

すべてのWebサイトは、障害を持つアメリカ人法（ADA）で設定されているWebアクセシビリティ基準を満たす必要があります。 ADAの下では、公共施設の場所としてWebサイトを確立する法的前例が設定されています。つまり、本質的にデジタルストアフロントであるビジネスWebサイトは、実店舗のビジネスの建物にアクセスできるようにする必要があるのと同じ方法でアクセスできるようにする必要があります。

地方、州、および連邦政府機関のWebサイト、および連邦政府が資金提供する組織およびプロジェクトのWebサイトも、セクション508の基準を満たす必要があります。さらに、Webサイトへのアクセスを要求するさまざまな州および国際法があります。

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

ブランドイメージ

WordPress Webサイトをよりアクセスしやすくするための措置を講じている企業や非営利団体は、社会的責任を果たしていることを示し、インターネットをすべての人にとっての場所にしたいと考えています。アクセシビリティへの組織的な取り組みは、人々が深く人間的な方法で気にかけられていることを示しています。これにより、忠誠心が高まり、ブランドのイメージを高めることができます。

一般的なアクセシビリティの問題は何ですか？

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

構築または管理するWebサイトにアクセスできることを確認する場合は、次の問題を確認することから始めます。

欠落または低品質の代替テキスト

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

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

125〜150文字より長い代替テキストがある場合、一部のスクリーンリーダーは途切れて読みを停止します。代替テキスト内にピリオドを追加すると、スクリーンリーダーが一時停止し、リスナーを混乱させたり、代替テキストが終了したと信じ込ませたりする可能性があります。

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

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

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

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

キャプションとトランスクリプトがありません

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

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

WordPressWebサイトのアクセシビリティのテスト

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

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

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

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

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

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

一括アクセシビリティスキャンを実行してWordPressダッシュボードにレポートを表示する場合は、WordPressAccessibilityCheckerプラグインが最適なツールです。プラグインのベースバージョンはWordPress.orgから無料でダウンロードできます。

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

アクセシビリティチェッカーは、上記で特定された一般的な問題を含め、40を超えるさまざまなチェックを実行します。無料版は投稿とページをスキャンし、Pro版はカスタム投稿タイプとアーカイブページのフルサイトスキャンを含みます。誤ってフラグが付けられたアイテムやレビューされたアイテムは却下される可能性があり、時間の経過とともに行われるアクセシビリティの修正を追跡できます。これは、代理店、開発者、および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上の情報、製品、およびサービスに平等にアクセスできるようになります。