WordPressウェブサイトをアクセシブルにする方法

公開: 2021-10-18

WordPressのアクセシビリティを理解して適切に利用することは、サイトのユーザビリティに不可欠です。このトピックに不慣れな場合、アクセシビリティはまさにそのように聞こえます。つまり、誰もが何かにアクセスして完全に使用できる程度です。

「アクセシビリティとは、できるだけ多くの人がWebサイトを使用できるようにすることです。 従来、これは障害を持つ人々に関するものと考えられていましたが、サイトにアクセスできるようにすることは、モバイルデバイスを使用しているグループやネットワーク接続が遅いグループなどの他のグループにもメリットがあります。」 （ソース）

サイトにアクセスしやすいほど、より多くの人がサイトを使用できます。サイトへのアクセスが困難な場合、またはアクセシビリティが優先されていない場合、オーディエンスの一部は、サイトが提供するすべての情報を取得することを思いとどまらせるか、完全に禁止されます。

この投稿では、アクセシビリティが重要である理由、その意味、WordPressがすでにアクセス可能である程度、サイトビルダーがサイトにアクセスできるようにする方法、およびサイトのアクセシビリティをテストする方法について説明します。

始めましょう！

ウェブサイトのアクセシビリティに関するビデオガイドをご覧ください

Webアクセシビリティの意味

Webアクセシビリティとは、すべての人が使用できるようにWebサイトが設計および開発されていることを意味します。これには、彼らがWebサイトをどのように理解し、ナビゲートし、対話し、貢献するかが含まれます。

Webアクセシビリティを完全に定義して理解するための良い方法は、その神話のいくつかを打ち破ることです。

サイトにアクセスしやすいほど、より多くの人がサイトを使用できます。とても簡単です。詳細については、このガイドをご覧ください。 ️ クリックしてツイート

神話1：それは盲人のためだけです

完全にアクセス可能なWebサイトは、聴覚、認知、神経、身体、言語、および視覚の障害を持つ人々が使用できる必要があります。障害を持つ人々は、アクセシビリティの取り組みの主な焦点です。ただし、アクセス可能なWebサイトから恩恵を受けるのは彼らだけではありません。

Webアクセシビリティは、次のすべての種類の人々と状況のユーザーエクスペリエンスを向上させます。

画面が小さく、入力モードが異なるモバイルデバイスを使用している人。
加齢により能力、視力、可動性が制限されている人。
怪我をした手のような一時的な問題を抱えている人。
画面のコントラストが変化する可能性のある照明のある場所でサイトを使用している人。
インターネット接続または帯域幅が制限されているサイトにアクセスしている人。

神話2：それは流行またはトレンドです

たぶん、あなたは近年、ウェブアクセシビリティについてますます聞いているでしょう。 Webが成長し、ますます多くの人々がWebに依存するようになるにつれて、Webアクセシビリティはより緊急の問題になりつつあります。しかし、それは単なる流行ではありません。

「デジタルアクセシビリティは、世界中の障害者の公民権であり人権です。」
レイニー・ファインゴールド、障害者の権利の弁護士および著者

時間が経ち、Webの使用がより普及するにつれて、Webへの広範なアクセシビリティの必要性も高まります。 WCAGガイドラインに従ってWebサイトに完全にアクセスできない場合、個人はWebサイトの開発者または所有者に対して法的措置を取ることができます。

人々がこれをどれほど真剣に受け止めているかを理解するために、ウェブアクセシビリティに関する訴訟の数を見るだけです。 2017年から2018年までの訴訟件数はほぼ3倍になりました。それ以来、その数は年間平均2,345件の訴訟を起こしています。 2020年を通してのCOVID-19のパンデミックの間でさえ、連邦裁判所でのADA Title III Webサイトアクセシビリティ訴訟の数は、前年度から12％に増加しました。

アクセシビリティ関連の訴訟の数を示すグラフは、年を追うごとに増え続けています。 — アクセシビリティ関連の訴訟の数は、年を追うごとに増え続けています。

Webアクセシビリティはここにとどまります。ソフトウェアとWebサイトを開発するとき、今後のプロセスにWebアクセシビリティを組み込む必要があります。これは、誰も訴えられるのが好きではないという理由だけでなく、インターネットは、それらのニーズが何であれ、すべての個人のニーズを満たす必要があるために必要です。

神話3：アクセシビリティを完全に自動化できる

アクセシビリティが重要である理由を理解し、それを優先しないと結果が生じる可能性があることを理解したら、WebサイトがWCAGに準拠していることを確認するために急いでいる可能性があります。

Webアクセシビリティに関する最も一般的な神話の1つは、簡単なプラグインをダウンロードするか、指一本でサイトに完全にアクセスできるソフトウェアをインストールできるというものです。これは単純に不可能です。

a11yproject.comによると、アクセシビリティの問題は客観的または主観的です。客観的な問題はコードで検出でき、主観的な問題は人間の判断が必要です。コードは、後者のカテゴリに分類される問題を正確に解決することはできません。そうしようとすると、プロセスに良いよりも害を及ぼすことがよくあります。

「オーバーレイソリューションは自動化されたソフトウェアソリューションであり、私たちが知っているように、そもそもWCAGの問題の約30％しか検出できません。 これは、WCAGが微妙で解釈的であるためです。 機械はこれが苦手です。」 （ソース）

アクセシビリティはリスク回避ではなく、すべてのユーザーに最適化されたエクスペリエンスを提供することであることに注意してください。

Webコンテンツアクセシビリティガイドライン

Web Accessibility Initiativeは、サイトが準拠していて完全にアクセス可能であることを確認するのに役立つ一連のWebコンテンツアクセシビリティガイドライン（WCAG）を開発しました。 Webサイトを設計、開発、またはサポートする場合は、これらのガイドラインに精通している必要があります。

アクセシビリティは、開発者だけでなく、デザイナー、マーケター、コンテンツライター、プロジェクトマネージャーなどにも焦点を当てています。計画から立ち上げまでのサイト構築プロセス全体を通じて、アクセシビリティを優先する必要があります。また、Webサイトが公開された後も、Webサイトのアクセシビリティを継続的に改善する必要があります。

アクセシブルなWordPressは箱から出してすぐに利用できます

これは、WordPressをサイト構築オプションとして検討するときに多くの人が尋ねる大きな質問の1つです。WordPressにアクセスできるようにするために、すでにどの程度アクセス可能であり、どのくらいの作業を行う必要がありますか。これに対する白黒の答えはないので、WordPressがすでにアクセス可能である程度を見てみましょう。

WordPressがアクセシビリティをうまくやっているところ

良いニュースは、時間の経過とともに、WordPressがますますアクセスしやすくなったことです。各リリースは、アクセシビリティを念頭に置いて小さなステップと進歩を遂げています。より多くの人々の心の中でアクセシビリティがより大きなトピックになるにつれて、より多くの人々がそれを優先することができます。

WordPressアクセシビリティハンドブックには、ベストプラクティス、テスト、ツール、テーマなどに関する情報の複数のページが含まれています。 — WordPressアクセシビリティハンドブック。

さらに、WordPressコミュニティの多くの人々は、これらのトピックについて情熱的で声を上げています。新しいデフォルトのWordPressテーマはそれぞれ、よりアクセスしやすくなるための追加の手順を実行します。開発者は常に新しい支援ツールを考え出し、WordPressのアクセシビリティに関するガイドや記事を書いています。その結果、WordPressのアクセシビリティの旅に一人でいることは決してありません。

コミュニティメンバーから直接WordPressとアクセシビリティについて詳しく知りたい場合は、WordPress.tvにアクセスして、アクセシビリティに関するこれらの講演をご覧ください。

WordPressがマークを見逃しているところ

最近の進歩にもかかわらず、WordPressは箱から出して100％アクセスできるとは限りません。各WordPressリリースは、それがどこに足りないかという点でいくつかの批判に直面しています。 2019年の初めに、WPCampusは、当時の最新のグーテンベルクリリースの広範な監査を実施しました。このような作業は非常に重要です。その監査以来、アクセシビリティに関連する116の問題が解決されました。

障害のあるコンテンツ作成者がWordPressで公開するのは難しい場合があります。アクセス可能なすべての設計および開発ファセットを自動化することは不可能であるため、WordPressを使用して誰でもアクセスできないWebページを作成できます。

「WordPressのフロントエンドは、何年も前とほぼ同じ場所にあります。完全にアクセス可能ですが、サイトを構築する開発者に完全に依存しています。 貧弱なテーマやアクセスできないプラグインがすべての違いを生みます。 管理者は改善を続けています。Gutenbergエディターをアクセシビリティの向上に向けて動かすのは困難な道のりでしたが、進歩は見られます。 とはいえ、新しいインターフェイスコンポーネントでアクセシビリティの低下を回避することは、絶え間ない戦いです。」 （ソース）

では、これはWordPressの開発者またはデザイナーとしてのあなたにとってどのような意味がありますか？ WordPressを使い始めると、完全にアクセス可能なWebサイトへの道のりは少し短くなります。ただし、フィニッシュラインに到達するまでにはまだある程度の距離があります。

アクセシブルなWordPressウェブサイトを作成する方法

それでは、WordPressWebサイトにすべてのユーザーがアクセスできるようにするための手順を見てみましょう。

いずれにせよ、プロジェクトの最後に取り組むべきタスクとしてアクセシビリティを決して残さないでください。これは、プロセスの最初から統合されている優先事項である必要があります。そして、サイトが立ち上げられたら、それは継続的な目標でなければなりません。

100％のアクセシビリティを確保するために従う、または自動化できる単一のチェックリストはありません。作業の多くは、プラグイン、テーマ、およびコンテンツによって異なります。

アクセス可能なWebサイトを作成することは、安全な建物を構築することと似ています。確かにガイドラインはありますが、目標を確実に達成するには、個別の注意、維持、および思慮深い改修が不可欠です。

アクセシブルデザインのベストプラクティス

タイプ別に分類された、WordPressWebサイトのアクセシブルデザインのいくつかのベストプラクティスから始めましょう。この情報は、アクセシビリティ教育の強固な基盤として役立つはずです。

画像

サイト上のすべての画像は、すべてのユーザーがアクセスできる必要があります。すべてのユーザーが画像を表示できるわけではないことを考えると、一部のユーザーは視覚要素を理解するために支援技術を使用する可能性があります。したがって、サイトはその技術を使用する準備ができている必要があります。

代替（または「alt」）テキストは、画像に添付する説明文です。スクリーンリーダーは、画像が表示されない可能性のあるゲストにその説明を読み上げます。ページ上で役立つ情報を提供する画像には、代替テキストを使用する必要があります。これには、写真からアイコン、インフォグラフィックまですべてが含まれます。

このWordPress.comの例では、ホームページのWebサイトの例に、代替テキスト「ホームページの作成が簡単な画像」が含まれています。 — 代替テキストのデモ。

唯一の例外は、画像が純粋に「装飾的」であると見なされる場合です。背景画像、仕切り、またはページ自体に表示されるテキストを表示する画像は、必ずしも代替テキストを必要としません。

代替テキストを書くときは、画像をそのまま説明しないように注意してください。代わりに、ページのコンテキスト内で画像の意味を伝えてください。優れた代替テキストを書くのに役立ついくつかの良いガイドラインを次に示します。

短くてシンプルなものが最適です。
スクリーンリーダーはこれが画像であることを通知するため、代替テキストで「これは…の画像です」とは言わないでください。
画像がリンクの場合、代替テキストは、ユーザーがその画像を選択した場合に何が起こるかを説明する必要があります。
代替テキストには、画像に表示されるすべてのテキストを含める必要があります。例外は、キャプションのように、同じテキストが画像の近くにも表示される場合です。

WordPress Webサイトの画像に代替テキストを追加するのは、思ったより簡単です。このテキストは、画像のキャプションを追加するのと同じ場所に追加できます。

メディアライブラリを開き、編集する画像を選択します。その画像の設定画面が開きます。 [代替テキスト]フィールドに代替テキストを追加し、[保存]をクリックします。

代替テキストの場所は、WordPressメディアライブラリで明確にマークされており、いつでも編集できます。 — 代替テキストフィールド。

色

アクセシブルなサイトを設計するときは、適切な色のコントラストを提供することが不可欠です。色のコントラストが悪いと、視力の弱いユーザー、色覚異常のユーザー、特定のデバイスを使用しているユーザーなど、多くの場合、サイトの読みやすさに影響を与える可能性があります。画像、テキスト、ボタンなどの要素はすべて、適切な色のコントラストが必要です。

色のコントラストとは、互いに向かい合って、または非常に近くに配置されたときに、明るい色または暗い色がどのように表示されるかを指します。たとえば、白い背景の黒いテキストは、白い背景の黄色のテキスト（1.08：1）よりもはるかに高い色のコントラスト（21：1）を持っています。 WCAG 2.0 AAでは、通常のテキストには最低4.5：1の比率、大きなテキスト（太字の18pxまたは標準の24px以上）には3：1の比率が必要です。

それは正確にはどういう意味ですか？色がうまく機能するかどうかを判断する最も簡単な方法は、WebAIMコントラストチェッカーなどのコントラストテストツールに色を挿入することです。オンラインにはたくさんの無料のチェッカーツールがあります。

色のテストの詳細については、テストセクションをご覧ください。

ますます多くの色の組み合わせをテストするにつれて、どの色の組み合わせが機能し、どの色の組み合わせが機能しないかを視覚だけで判断するのが上手になります。

WebAIMコントラストチェッカーツールのデモ。 — WebAIMコントラストチェッカー。

また、主な識別要素として色を使用しないようにする必要があります。たとえば、多くのサイトには、周囲の本文とは異なる色のリンクがあります。ただし、何らかの理由でユーザーが色を見るのが難しい場合は、リンクされている単語とリンクされていない単語を区別できない可能性があります。リンクを装飾するには色を使用しますが、リンクにアクセスできるようにするには、テキストの下に下線を追加します。

文章

私たちがウェブ上で経験することの多くはテキストです。私たちはウェブサイトを使用して、記事、レシピ、ストーリーなどを読みます。あなたは今この投稿を読んでいます！その結果、テキストは、目でも耳でも、すべての読者向けに最適化する必要があります。

アクセシビリティについて話すときにテキストを議論する主な方法は、フォントとサイズの2つです。

アクセシブルなフォントは、小さいサイズでも大きいサイズでも読みやすいです。 Tahoma、Calibri、Helvetica、Arial、Verdana、Times New Roman、Arvo、Museo Slab、Rockwellなどのフォントはすべてアクセス可能な選択肢です。失読症の読者は、多くのセリフフォントを含む特定のフォントを読むのが難しいと感じるかもしれません。本文のサンセリフフォントは、より安全な選択になる傾向があります。テキストが大きく、まばらで、ほとんど装飾的でない限り、手書きスタイルや筆記体などの表示フォントは避けるのが最善です。

文字の違いによって単語が読みやすくなる、アクセシブルなフォントの例。 — アクセス可能なフォントを使用すると、文字の違いによって単語が読みやすくなります。

フォントのサイズ設定は、アクセシビリティにとって非常に重要です。アクセス可能なフォントのサイズ設定に関して、いくつかの経験則について説明しましょう。

デフォルトのフォントは、少なくとも9ptまたは12pxである必要があります。 12ptまたは16pxをお勧めします。 WCAGガイドラインによると、200％にズームするとテキストが読めるようになります。フォントサイズを設定するには、ピクセルやポイントの代わりにパーセンテージまたはemを使用することをお勧めします。さまざまなフォントの太さを使用することは問題ありませんが、テキストが軽量を使用している場合は、表示するのに十分な大きさであることを確認してください。

これは、アクセシビリティを念頭に置いて設計する方法のすべてではありません。しかし、どこから始めればよいかを知ることは非常に重要です。アクセシビリティの設計についてさらに詳しく知りたい場合は、次のリソースを確認してください。

W3CWebデザインとアプリケーション
デザイナーのためのWebアクセシビリティの入門書
アクセシビリティのための設計はそれほど難しくありません
ADA準拠のアクセシブルなWebデザインの10の例
デザインにおけるアクセシビリティ

アクセシブルな開発のベストプラクティス

Webサイトまたはその補完的なソフトウェア（テーマやプラグインなど）を構築する場合、アクセシビリティのために留意すべき重要なことがあります。この一部はデザインと重複していますが、この次のセクションでは、主にサイトの動作とユーザーがサイトを操作する方法に焦点を当てます。

インタラクティブな要素

ユーザーは、何があっても、比較的簡単にWebサイトを操作および使用できる必要があります。これには、画像を楽しんだりテキストを読んだりするだけでなく、メニュー、フォーム、ボタン、ビデオを操作することも含まれます。

サイトを構築するときは、すべてのインタラクティブな要素を簡単に識別できることを確認してください。ヘッダーからフッターまでのすべてのナビゲーションメニューは、キーボードコントロールで使用できる必要があります。 hover 、 focus 、 clickのリンクとボタンの外観が変わるはずです。

通常のクリックされていないボタンのスタイルは、マウスをその上に置いたときのボタンや、クリックされたときのボタンとは異なる必要があります。 — ボタンのスタイル。

サイトのページ間のナビゲーションは一貫性があり、明確である必要があります。ナビゲーションリンクに名前を付け、スタイルを設定し、配置する方法は非常に重要です。思いやりのあるブレッドクラムと明確な見出しにより、ユーザーは自信を持ってコンテンツを操作できます。

Kinstaがパンくずリストを使用して、読者がブログを簡単にナビゲートできるようにする方法。 — Kinstaはブレッドクラムを利用して、読者がブログをより簡単にナビゲートできるようにします。

たぶん、あなたはあなたのウェブサイトに1つか2つのフォームを持っています。アクセスできないフォームがいくつあるかを知って驚かれるかもしれません。フォーム要素には、フィールドの左側または上部に関連するラベルを含める必要があります。（チェックボックスとラジオボックスは右側に配置できます。）各フォームフィールドの目的は、ユーザーにとって非常に明確である必要があります。

WordPressサイトに超高速で信頼性が高く、完全に安全なホスティングが必要ですか？ Kinstaは、WordPressの専門家によるこれらすべてのサポートと24時間年中無休のワールドクラスのサポートを提供します。私たちの計画をチェックしてください

テキストフィールドの境界線は、フォームをよりアクセスしやすくします。境界線を削除すると、どのフィールドがどのフィールドであるかがわかりにくくなる可能性があります。 — テキストフィールドの境界線は、フォームをよりアクセスしやすくします。

GIF、スライダー、カルーセル、ビデオ、音楽など、自動的に再生されるコンテンツがサイトにある場合は、ユーザーがアニメーションやサウンドを停止できるようにするコントロールが表示されている必要があります。要素を完全に停止、一時停止、または非表示にするオプションを提供することをお勧めします。

Webアクセシビリティの開発を深く掘り下げたい開発者の場合は、W3Cから直接これらのヒントを確認してください。

WordPressテーマ

あなたがDIYのウェブサイトビルダーなら、アクセス可能なテーマを選択することで、この投稿で説明されていることの多くを達成できます。開発者は、プロジェクトでテーマに優先順位を付けるために、テーマにアクセスできるようにする理由を理解することが重要です。

WordPressテーマは、Webサイトの外観を制御します。多くのテーマには、配色とフォントファミリがあらかじめパッケージ化されています。これらの色とフォントが上記の要件を満たしていることを確認することが不可欠です。多くのテーマは「完全にアクセス可能」であると宣伝していますが、これは必ずしも正しいとは限りません。独自のテストを使用して、テーマにアクセスできるかどうかを判断します。

WordPress.comのアクセシビリティチームは、WordPressリポジトリにある92の無料テーマのリストを用意しており、今すぐ使用を開始できます。

アクセシブルなテーマを作成するときは、最初からWCAG要件に精通していることを確認してください。開発中に取り組むべき一般的な領域は次のとおりです。

プリセットカラーパレット内の適切なカラーコントラスト
キーボードを使用してWebサイトを簡単にナビゲートする機能
適切なARIAの役割やHTML5ランドマークを使用して、スクリーンリーダーの準備ができていることを確認します
適切なHTMLセマンティックマークアップ
ページ上でIDを繰り返さないようにする
ユーザーが自動モーションを停止または制御できるようにする

テーマの作成を開始するときに簡単に参照できるように、WordPressのアクセシビリティガイドラインをブックマークしてください。

WordPressプラグイン

WordPressプラグインを使用すると、WordPressWebサイトにプラグアンドプレイ機能を追加できます。 WordPressアクセシビリティプラグインには2つのタイプがあります。アクセシブルなWebサイトを構築するのに役立つプラグインと、ユーザーが既存のサイトにアクセスできるようにするプラグインです。

「ワンクリックでアクセス可能」や「自動的にアクセス可能」などの保証を提供するWordPressプラグインに注意してください。これらのことは不可能です。プラグインは、アクセシビリティの目標を達成するのに役立つツールであり、すべての作業を行う魔法の杖ではありません。プラグインがアクセシビリティの取り組みを妨げることさえあるので、ある程度の注意を払って進めてください！

アクセシビリティの問題を改善、監視、または修正することを約束する、アクセシビリティに焦点を当てたプラグインがたくさんあります。彼らはサイトを監査し、どこを改善すべきかをあなたに知らせるかもしれません。または、サイトでアクセス可能なエクスペリエンスを簡単に作成できるようにするフロントエンドツールを提供する場合もあります。

これらのいくつかは非常に役立ちます。しかし、他の人は誤った約束をします。コミットする前に、必ずこのようなプラグインを徹底的に精査してください。

一部のプラグインは、クイズやスライダーなどのインタラクティブなコンテンツを作成します。前に説明したように、これらの要素に完全にアクセスできることを確認するには、特別な注意とテストが必要です。インタラクティブプラグインを公開する前に、ステージングサイトまたは開発サイトで常に徹底的にテストしてください。

フォームプラグインについても同じことが言えます。残念ながら、多くの人がアクセシビリティの問題を抱えています。このような場合は、カスタムコード化されたフォームが適切な代替手段です。

プラグインの人気のあるカテゴリは、ページビルダープラグインです。これらは、堅牢で洗練されたドラッグアンドドロップデザインをすばやく構築できるようにするのに最適です。ただし、多くの場合、解決するよりも多くのアクセシビリティの問題が発生する可能性があります。この問題に対する単一の修正はありません。そのため、設計をシンプルに保ち、すべての要素をテストしてアクセシビリティを確認してください。

アクセシビリティステートメント

アクセシビリティステートメントは、障害を持つ人々との協力に関する社内ポリシー、アクセシビリティの目標、および過去の成功を伝えるWebサイト上のページです。

次の理由から、WordPressWebサイトでアクセシビリティステートメントを生成して公開する必要があります。

アクセシビリティとユーザーに関心があることをユーザーに示すため
コンテンツのアクセシビリティに関する情報を提供するため
アクセシビリティと社会的責任への取り組みを示すため

W3Cが提供するこれらのガイドラインに従って、またはアクセシビリティステートメントジェネレータを使用して、独自のアクセシビリティステートメントを作成できます。

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

アクセシビリティとは、正しいボタンを押してから離れることではありません。テストは、サイトに完全にアクセスできることを確認するための重要な部分です。自動テストと手動テストの両方で、すべての拠点がカバーされていることを確認できます。

自動テストの実施方法

自動テストは、どこから始めればよいかを判断するのに役立ちます。アクセシビリティに不慣れな場合、またはどこから始めればよいかわからない場合は、自動テストと評価から始めてください。

ほとんどの自動テストでは、色のコントラストの悪さ、代替テキストの欠落、空のリンク、構造要素の問題などが特定されます。これらのテストを使用して、取り組むべき問題のリストを生成できます。このようなテストは、肉眼では見えにくいコードベースのエラーを見つけるのに特に役立ちますが、一部のユーザーにとっては非常に重要です。

使用できる無料のアクセシビリティテストの1つの例は、WebAimツールです。 Webページ全体を調べて、エラーのリストを生成します。ページ上のどこでこれらのエラーが発生したかを正確に表示することもできます。

WebAimツールにURLを挿入すると、エラーの概要と、それらの項目が個々のタブに分割されて表示されます。 — エラーの要約を表示するWebAimツール。

特定の問題に役立つ多数の個別のアクセシビリティツールを見つけることができます。たとえば、デザインを開始する前にコントラストチェッカーを使用して、パレットの色がうまく調和することを確認します。

自動テストは完璧で、絶対確実で、手動テストの代わりにはならないことを覚えておいてください。

手動テストの実施方法

WordPressのアクセシビリティは実際の人間のユースケースに関するものであるため、サイトがアクセス可能かどうかについて最終的な判断を下すのは実際の人間でなければなりません。したがって、手動テストのために時間とリソースを予約することは非常に重要です。

では、どのように手動テストを実行しますか？派手なツールやプログラムを使わずにサイトにアクセスできるかどうかをテストするためにできることがいくつかあります。

マウスを捨てる：キーボードのキーだけを使用して、Webサイトのすべての機能を合理的かつ簡単にナビゲートできることを確認してください。これには、セクション間の移動、メニューへのアクセス、ページからページへの移動、ページのスキップ、リンクやフォームの操作が含まれます。
スクリーンリーダーを使用する：視界が悪い、または視界が悪い人の立場になります。スクリーンリーダーアプリまたはWebサイトを使用し、サイトのコンテンツを確認して、読み上げたときに意味があり、スムーズに聞こえることを確認します。
さまざまな環境でサイトをテストします。パブリックWiFiを使用してどこかに移動し、高品質のインターネット接続がなくてもサイトが正しく読み込まれることを確認します。接続が不十分なために遅れたり、完全に消えたりするサイトの領域に注意してください。
ズームを増やす：ブラウザでサイトを開き、ブラウザの設定を使用して200％ズームインします。この設定でサイトを引き続き使用、ナビゲート、および操作できますか？消えたり途切れたりするコンテンツはありますか？
インタラクティブ性に焦点を当てる：ビデオ、フォーム、ボタンなどのインタラクティブな要素のテストに十分な時間を費やすことを忘れないでください。リンクとフォームフィールドは、アウトライン、アンダースコア、特別なカーソルで常にフォーカスを合わせる必要があります。
altタグを再確認します。画像に代替画像が添付されているかどうかわからない場合は、要素の検査ツールを使用して確認します。
別の考え方：サイト上のすべての画像が消えた場合でも、誰かがそれを使用できるでしょうか？サイトのすべての色が突然白黒になった場合、それはユーザビリティにどのように影響しますか？装飾要素が何らかの形で影響を受けた場合でも、サイトの重要な部分が機能することを確認してください。

疑問がある場合は、手動のアクセシビリティテストを提供している会社に連絡してください。アクセシビリティとWebデザインおよび開発の専門家は、手動レビューをすばやく実行し、どの領域で作業が必要かを正確に伝えることができます。

あなたの実際の聴衆はあなたの最高のリソースの1つであることを忘れないでください。ユーザーがアクセシビリティのフィードバックを提供できる明確な領域をサイトに用意します。誰かがあなたのサイトを使用するのに苦労している場合は、フィードバック収集でのあなたの努力から、あなたがその経験について聞いて問題を修正することにオープンであることが明らかであるはずです。

あなたのウェブサイトはすべての訪問者にアクセス可能ですか？このガイドでアクセシビリティをテストする方法の詳細をご覧ください️ クリックしてツイート

概要

インターネットは、私たちの日常生活の中で最も重要なツールの1つになっています。娯楽や重要な情報を閲覧するかどうかにかかわらず、誰もがそれにアクセスする自由を持っている必要があります。あなたのサイトは、ウェブ上の公平性のために定められた基準を満たす責任があります。

これらのガイドラインの必要性を理解することは、重要で永続的な変更を行うための最初のステップです。アクセシブルなサイトを構築することは、より多くの人々があなたのウェブサイトが長期的に提供しなければならないものから利益を得るということを意味します。

WordPressのアクセシビリティについて質問がありますか？ コメント欄でお知らせください！