あなたのWordPressウェブサイトをよりアクセスしやすくする方法

公開: 2020-05-05

WordPress Webサイトの立ち上げに関しては、あらゆる種類の訪問者が立ち寄ることを覚えておく必要があります。

さらに重要なことに、サイトの訪問者全員が、マウスを動かしたり、サイトの配色を確認したり、ビデオコンテンツを聞いたりするなど、当然のことと思われる簡単なことを実行できるわけではありません。 したがって、業界で確固たる評判を確立し、コンバージョンを増やし、正しいことをしたいのであれば、WordPressのアクセシビリティに焦点を当てる必要があります。

そのため、本日、WordPress Webサイトをよりアクセスしやすくするための最も簡単な方法の概要を説明します。これにより、ユーザーは何があっても簡単にサイトを探索できます。

それでは、始めましょう。

WordPressのアクセシビリティとは何ですか?

WordPressのアクセシビリティとは、障害を持つユーザーを含むすべてのユーザーがWebサイトとそのコンテンツを利用できるようにすることを意味します。

これがターゲットオーディエンスに当てはまるかどうかわかりませんか?

これについて考えます。 National Service Inclusion Projectによると、米国だけで4890万人の障害者がいます。 それを世界中に広げてください。そうすれば、サイト訪問者のかなりの部分が、意図した方法でWebサイトを探索する能力に影響を与える何らかの障害を抱えている可能性があります。

Web Accessibility Initiativeは、サイトをよりアクセスしやすくすることで、次のグループの人々に役立つと述べています。

  • 高齢者
  • 眼鏡の紛失や手足の骨折など、一時的な障害のある人
  • 視覚または聴覚障害のある人
  • インターネット接続が遅い人
  • 明るい場所やサイトの音声を聞くことができない環境でサイトにアクセスするなど、状況に制限がある場合
  • 失読症など、書かれた内容を読む能力に影響を与える認知問題のある人

先に進む前に、たとえばBlinkee.comを見てください。

貧弱なウェブデザインの例

小さなフォントと点滅するライトの間に、コンテンツを読んだり、サイトをナビゲートしたり、数秒以上重要なことに集中したりするのに苦労するサイト訪問者がたくさんいます。

意味がわかりますか? ウェブサイトのアクセシビリティは、多くの人が認めたいよりもはるかに重要です。

しかし、なぜWordPressのアクセシビリティを気にする必要があるのでしょうか。

あなたは自分のWordPressウェブサイトがBlinkee.comのようには見えないと思っているかもしれません。 それは良いことですが、あなたはまだはっきりしていません。

サイトのアクセシビリティを気にする最も説得力のある理由のいくつかを次に示します。

  • 障害のある人は、障害のない人に比べてオンラインになる可能性が3倍低くなります。つまり、潜在的な顧客の大部分をコンバージョンする大きな機会を逃していることになります。
  • グーグルと他の主要な検索エンジンは、検索ランキングでそれらをより高くランク付けすることによってアクセス可能なサイトに報酬を与えます
  • 2015年にこれらのタイプのケースを最初に追跡して以来、何千ものWebアクセシビリティのケースが提出されています。これは、サイトが訴訟のリスクにさらされている可能性があることを意味します。

あなたが見ることができるように、あなたがどんな種類のウェブサイトを持っていても、あなたはあなたのターゲットオーディエンスの一部を遠ざけることによって多くを失うことになります。

あなたのウェブサイトをよりアクセスしやすくするためのヒント

1.WordPressサイトのアクセシビリティをテストします

サイトをよりアクセスしやすくするために変更を加える前に、現在どの程度アクセスしやすいかを確認することをお勧めします。

これは、Webアクセシビリティ評価ツール(WAVE)などのツールを使用して簡単に実行できます。 これを使用すると、サイトのURLを入力するだけで、Webサイトのアクセシビリティを評価できます。

ブログウィザードのWAVE結果

評価後、WAVEは、問題がない、改善が必要な、または実際のエラーであるサイトのセクションを表す、色分けされたさまざまなアイコンを表示します。 アイコンをクリックすると、修正が必要なものの詳細な説明にアクセスできます。

2.配色を慎重に選択してください

あなたのウェブサイトをブランド化し、競合他社とは一線を画す最良の方法の1つは、特定の配色を使用することです。 しかし、あなたのウェブサイトにアクセスするサイト訪問者が色覚異常であるか、視力が限られている場合、彼らはあなたのサイトの色を本来のように楽しむことができません。

たとえば、次の単純な色のコントラストの例を見てください。

色のコントラストの例

最初の画像に書かれたテキストを見るのはかなり難しいですよね? そして、あなたはこの画像の見方に影響を与える障害さえ持っていないかもしれません。

今、あなたが色覚異常を持っている世界の3億人の一人であると想像してください。

対照的な配色を監視することに加えて、衝突する配色を使用しないようにすることも重要です。 コントラストがひどくないからといって、色がうまく調和しているわけではありません。

WordPressサイトの色のバランスをとるには、コントラストチェッカーと呼ばれるこの無料のオンラインツールをチェックしてください。

コントラストチェッカー

前景色と背景色を選択し、ツールに色のバランスが適切かどうかを判断させるだけです。 そうでない場合、ツールはあなたに知らせます:

コントラストチェッカーが失敗する

3.WordPressアクセシビリティプラグインを使用する

自分で物事を本当に簡単にしたい場合は、いつでも専用のWordPressアクセシビリティプラグインを使用してサイトを評価し、すべての人がアクセスできることを確認できます。

そのようなプラグインの1つがWPアクセシビリティです。 このプラグインは、WordPressテーマの一般的なアクセシビリティの問題を特定し、それらを修正してサイトのユーザビリティを向上させるのに役立ちます。

その機能のいくつかは次のとおりです。

  • リンクからのターゲット属性の削除
  • コンテンツに挿入された画像からのタイトル属性の削除
  • 標準の「続きを読む」リンクへの投稿タイトルの追加
  • 欠落している場合の標準のWordPressフォームフィールドへのラベルの追加
  • フォーカス可能な要素からのtabindexの削除
  • 2つの16進コード値間の色のコントラストを表示する
  • そしてもっとたくさん

さらに、WP Accessibilityは、テーマの高コントラスト、大きな印刷、およびグレースケールビューを切り替えるためのツールバーを追加し、すべての画像にalt属性を適用し、HTML属性に言語およびテキスト方向属性を追加します。

または、accessiBeなどの専用のアクセシビリティプラットフォームを選択することもできます。 このタイプのプラットフォームの大きな部分は、WordPressの外部で機能することです。

4.アクセシブル対応のテーマを使用する

アクセシビリティの問題を最初から修正する必要がないようにする場合は、アクセシブル対応のWordPressテーマを使用する必要があります。

もちろん、これは言うのが簡単な場合もあります。 とはいえ、公式のWordPressリポジトリを閲覧すると、アクセシブルなデザインを使用した素晴らしい(そして無料の)テーマを見つけることができます。 機能フィルターを使用して、アクセシブル対応としてラベル付けされたテーマを検索するだけです。

wordpress.orgアクセス可能なテーマ

ただし、私たちの頼りになる推奨事項はKadenceです。 このテーマには無料バージョンがありますが、追加機能を備えたプレミアムバージョンも利用できます。

WordPress Webサイトでアクセシブルなテーマを選択すると、ナビゲーション、リンクスタイル、配色などの点で、すべてのユーザーがサイトを利用できるようになります。

5.すべての画像に代替テキストを追加します

サイトの画像に代替テキストを追加することは、検索ランキングを上げるためだけではありません。 もちろん、画像の代替テキストは、検索エンジンのクローラーにWebサイトの理解を深め、最も関連性の高い検索結果でのランク付けに役立ちます。

ただし、画像に代替テキストを追加すると、障害を持つユーザーがサイトにいるときのユーザーエクスペリエンスが向上するのにも役立ちます。 実際、画像に追加する代替テキストを使用すると、障害を持つユーザーがスクリーンリーダーを使用してインターネットを閲覧できる場合に、画像を「読み取る」ことができます。

したがって、WordPressサイトのすべての画像に代替テキストを追加します。 また、スクリーンリーダーがわかりやすい方法でユーザーに読み上げられるように、説明的でキーワードが含まれていることを確認してください。

6.サイトをキーボードフレンドリーにします

障害を持つ人々に対応し、WordPressサイトをよりアクセスしやすくするためのもう一つの優れた方法は、サイトをキーボードフレンドリーにすることです。 つまり、サイトの訪問者は、次のサイト要素をタブで移動できる必要があります。

  • メニュー項目
  • リンク
  • ボタン
  • フォームフィールド

あなたのサイトが現在キーボード対応かどうかわかりませんか? 確認するには、Webサイトにアクセスして、マウスを使用せずにWebサイトをナビゲートできるかどうかを確認するだけです。 代わりに、[タブ]ボタンをクリックして、何が起こるかを確認してください。

WordPress.orgは、すべてのユーザーがサイトにアクセスできるようにするという素晴らしい仕事をしています。 実際、サイトをタブで移動すると、タブで移動した各メニュー項目の周りに点線のフォームが表示されます。

キーワードフレンドリーな例

7.フォームフィールドを適切にフォーマットします

フォームフィールドラベルをフィールドボックス内に配置して、サイトをより整理されたきれいな外観にするのは魅力的です。 ただし、一部のスクリーンリーダーは、これらのタイプのラベルを識別して読み取ることができません。 これにより、スクリーンリーダーに依存しているユーザーが、サイトのフォームフィールドを表示して入力することが、不可能ではないにしても困難になります。 これはまた、コンバージョンの損失を意味し、成功に大混乱をもたらす可能性があります。

お金を稼いだりフォロワーを増やしたりするためにサイト訪問者の登録に大きく依存している場合、フォームフィールドにアクセスできるようにしないと、ターゲットオーディエンスの一部を疎外する可能性が高くなります。 これを修正するには、フォームフィールドラベルを各ボックスの外側に配置します。

8.リンクのスタイルに注意してください

サイトのハイパーリンクに割り当てる色は、ブランディングの目的で選択されることがよくありますが、ハイパーリンクに関しては、障害のある人には明確なコントラストが必要であることに注意してください。

WordPressサイトのリンクをよりアクセスしやすくするためのいくつかの役立つヒントのリストを次に示します。

  • スクリーンリーダーはリンクが何につながるかをユーザーに伝えるため、リンクで「リンク」という単語を使用することは避けてください。
  • 大文字のテキストを文字ごとに読むことがあるスクリーンリーダーを混乱させるため、リンクを大文字にしないでください
  • スクリーンリーダーはURLを文字ごとに読み、ユーザーがフォローしにくくするため、リンクテキストでURLを使用することは避けてください。
  • コンテンツのブロック全体をリンクしないでください。 短くて甘くする
  • リンクが新しいウィンドウで開いているときにユーザーに警告して、ユーザーが迷子にならないようにします
  • 多くのアンカーリンクを使用する場合は注意が必要です(障害のある人は、スキャンしたページを上下に移動しているだけだと気付かない場合があります)
  • リンクされたテキストに下線を引き、コントラストのために別の目を楽しませてくれる色を使用します
  • 壊れたリンクや空のリンクを定期的にチェックします

まとめ

結局、WordPressのアクセシビリティはこれまで以上に重要になっています。 最近、人々はすべてのためにインターネットを使用しています。 請求書の支払いから社交、オンラインショッピングの予約の設定まで、人々の生活のほぼすべての側面を何らかの方法でオンラインで処理できます。

ターゲットオーディエンスの一部を除外しないようにし、サイトのトラフィックを最大化し、あらゆる分野の人々が提供しなければならないものを簡単に探索できるようにするために、方法を確認してください。あなたのサイトにアクセスできます。 パーに達していない場合は、簡単で迅速な変更を行ってください。 それはあなたがあなたのフォロワーや顧客ベースを成長させるのを助けるだけでなく、それは正しいことです。


開示:この投稿にはアフィリエイトリンクが含まれています。 これは、あなたが購入をするならば、我々が小額の手数料をするかもしれないことを意味します。