ADA に準拠した WordPress サイトを設計するためのヒント
あなたの目標が、成功し、ユーザーフレンドリーな WordPress サイトを作成することである場合、サイトの読み込み速度、適切なページ レイアウト、ナビゲーション、SEO 要素などの側面に重点を置く必要があることはおそらくすでにご存知でしょう。ただし、あまり知られていないかもしれませんが、サイトを ADA に準拠させる必要があるということです。
ADA 準拠とは何なのか、また Web サイトを構築する際に ADA 準拠を優先する必要がある理由がわかりませんか?そうすれば、あなたは正しい場所にいます。 ADA 準拠とは何か、それに重点を置く必要がある理由、ADA 準拠になるように WordPress サイトを設計する方法について詳しく見てみましょう。
ADA コンプライアンスの定義
ADA 準拠を定義する前に、Web サイトのアクセシビリティについて簡単に説明しましょう。 Web サイトのアクセシビリティの核心は、障害を持つユーザーの Web サイトへのアクセスを改善する実践です。 Web サイトは、障害の有無にかかわらずユーザーがその機能とデータに完全にアクセスできるように設計および開発されることが重要です。
ADA (障害を持つアメリカ人法としても知られる) は連邦法であり、その基準では、障害を持つすべての米国国民が情報とデジタル技術に容易にアクセスできることが求められています。 ADA は第 508 条の基準に似ていますが、官民 (および非営利) の両方の組織に広く適用されるという点で異なります。対照的に、第 508 条は連邦情報通信技術に特に適用されます。
ADA準拠のWordPressサイトのための簡単なヒント
ADA コンプライアンスと、それがユーザーにとってなぜ重要であるかについて理解できたので、次に、ADA に準拠した WordPress サイトを設計する方法を知る必要があります。ここでは、従うべき最も重要な手順をいくつか示します。
初期設計と構築から始める
WordPress サイトを作成するときは常に、アクセシビリティの標準を念頭に置いておく必要があります。構築後のテスト中にアクセシビリティ関連の問題が見つかったとしても、事前にできる限りクリーンなサイトを作成したいと考えています。
まずは色のコントラストに注目することをおすすめします。 WCAG 2.1 によれば、ウェブサイトの背景と前景に 18 ポイント未満のテキストを使用している場合、ウェブサイトは少なくとも 4.5:1 のカラー コントラスト比を維持する必要があります。 18 ポイント以上のテキストを使用するサイトの背景と前景の 2 色の場合、そのコントラスト比は 3:1 である必要があります。これは、ブラウザの開発者ツールを使用して Web サイトのデザインを検査するだけで簡単にテストできます。上のスクリーンショットでは、WPExplorer の段落のコントラストが 14.66 で、最小値の 4.5 を大幅に上回っていることがわかります。
サイトの ADA 準拠にとっては代替色も重要です。最近の Web サイトには興味深い画像がぎっしりと詰まっていますが、多くのユーザーは Web サイト上の情報に素早くアクセスするためにスタイルと画像を無効にしています。ユーザーがブラウザで画像を無効にすると、アクセスしているサイトの背景が白く表示されます。このため、WordPress サイトのパネルにフォールバックカラーを必ず追加し、代替テキスト (画像が表示できないときにブラウザで使用される) を必ず追加し、画像の上部に説明テキストを含めることを検討してください。
ページビルダーを使用している場合は、作成中に画像を配置するブロック、列、または行の背景の色を選択するだけです。上にブロックの背景色の Gutenberg の例を示します。ただし、ハードコードされたテンプレートを含むテーマの場合は、子テーマを作成してカスタム フォールバックを追加するか、コードに慣れていない場合はテーマ開発者に相談することをお勧めします。
最初のデザインと構築の一環として、複数の直感的なナビゲーション オプションを備えた メニュー デザイン を作成してみてください。 WordPress でメニューを作成するときは、メニューの場所に割り当てる必要がありますが、テーマによっては複数の場所がある場合もあります。デスクトップとモバイルでのすべてのメニューのアクセシビリティと使いやすさを必ず確認してください。 Web サイトのフッターにサイトマップをリンクして、訪問者が 1 か所からサイトのすべてのページにアクセスできるようにすることも検討してください。
さらに、ユーザーが特定のフレーズやキーワードを使用してウェブサイトを検索できるようにする検索機能を含めることもできます。ほとんどのテーマには、ヘッダー デザインの一部として検索アイコンがすでに含まれています。ただし、テーマがそうでない場合は、サイトのサイドバーまたはフッターに検索ウィジェットを追加することをお勧めします。
最後に、アクセシビリティの観点から適切な仕事をしていることを確認するために、 サイトのフッターにもフィードバック フォームを含めます。 WordPress には使いやすくアクセスしやすい Web フォームが多数あり、アクセシビリティに関するフィードバックを受け入れたり、サイト用の他のフォーム (連絡先フォーム、ブログ投稿、ユーザー サインアップなど) を作成したりするために使用できます。
読みやすいコンテンツを育てる
ADA への準拠に関して、克服する必要がある大きなハードルは可読性です。読みやすいコンテンツとは、単に読みやすく理解しやすいコンテンツを意味します。
一般的に、コンテンツ 1 行あたり約 7 ～ 10 単語を目標にする必要があります。メディア クエリを使用して、フォント サイズや列幅を自由に調整したり、モバイル デバイス上のテキストを調整したりできます。サイトのコンテンツが読みやすくなればなるほど、訪問者がサイトに長く滞在し、他のページに移動する可能性が高くなります。
コンテンツを読みやすくするために標準化されたデザインを使用したい場合、Google の「マテリアル デザイン」より優れたツールはありません。マテリアル デザインは読みやすさに重点を置き、Web サイト作成者に推奨されるアイコン、レイアウト、色などを提供します。
サイトのテキストがアルファ透明度を使用する背景色の上に表示されないようにすることが重要です。これを行わないと、サイトをテストするときにエラーが発生します。アルファ透明度に対して配置する色を操作する場合は、16 進数の数値コードを使用する必要があります。
アルファ透明度の「アルファ」は、色の透明度または不透明度のレベルを指します。これはコントラストに影響を与え、0 (完全に透明) または 1 (完全に不透明) として表されます。 ADA 準拠の文脈では、要素のアルファを下げると、そのコントラストが低下し、下にある色がにじみやすくなるということを覚えておくことが重要です。コンテンツの読みやすさを最適化するために、常にテキストと背景色のコントラストを強調する WordPress サイトをデザインしてください。
信頼できるベストプラクティスを採用する
アクセシビリティに関する実証済みのベスト プラクティスを理解せずに、ADA に準拠していると思われるサイトを作成することは望ましくありません。 ADA コンプライアンスに関して、実証済みの信頼できるベスト プラクティスを採用しない場合、ADA 関連の訴訟に巻き込まれるリスクがあります。
自分の能力の限りアクセシビリティ レベルをテストした後、発生した各問題に対処する必要があります。 WordPress サイトのコンテンツを評価し、画像やビデオなどの既存のメディア コンテンツを置き換えることができる代替出力を作成できるかどうかを決定します。
実際、視覚障害のあるユーザーのエクスペリエンスを向上させようとしている場合 (可能な限りそうすべきです)、テキストのコントラスト比が 4.5:1 以上を維持し、最大でサイズ変更できることを確認する必要があります。 200%。これらのユーザーは、サイトが音声を出力しているときにアクティブになる微妙な視覚インジケーターや、視覚メディアに付随する字幕からも恩恵を受けることができます。
Web サイトの身体障害のある訪問者やスクリーン リーダーを使用している訪問者にとって、ユーザーがサイトの要素を簡単にタブで移動できるように、Web サイトに論理的なタブ パスと明確なタブ フォーカス スタイルがあることを確認することが重要です。一時的および永続的な運動障害のあるユーザーは、ナビゲーションを容易にするためにキーボードに大きく依存しています。論理的なタブ オーダーにより、サイトへの運動障害のある訪問者がシームレスにナビゲーションできるようになります。
難しいこともありますが、ユーザビリティ テストを実行して、サイトの機能を損なうことなくアクセシビリティを向上させる適切なバランスをとることが重要です。これらの側面の適切なバランスをとることで、訪問者に直観的なエクスペリエンスを提供し、ADA 関連の訴訟に巻き込まれる可能性を減らすだけでなく、Web サイトがオンラインでより肯定的なレビューを獲得できる可能性も高まります。
ADA に準拠した WordPress サイトを作成することは、ブランドにとって間違いなく重要です。とはいえ、ADA に準拠したサイトを作成して維持するのは明らかに大きな仕事です。
ADA 準拠への投資が貴重なリソースと時間を奪いすぎるのではないかと心配している場合は、ADA に準拠することで、Google の結果ページ内でのサイトの可視性が向上する可能性があることを思い出してください。また、時間と費用がかかる ADA 関連の訴訟に巻き込まれることを防ぎ、より幅広い顧客層を開拓できる可能性が高まります。障害に対処する訪問者に適切に対処し、ADA コンプライアンスにも投資することで、長期的にブランドに投資してください。