SEO とアクセシビリティ: UX を強化する

アクセシブルなウェブサイトを持つことの重要性

学習、ショッピング、銀行取引、約束など、多くの活動がオンライン スペースで行われます。 デジタル環境も物理環境と同じようにアクセスできることが重要です。 サイトが支援技術や代替のインタラクション方法に合わせて最適化されていれば、市場範囲を拡大し、ビジネスをすべての人に開放し、包括性と公平性を実証することになります。

アメリカ障害者法 (ADA) の第 3 編に従って、企業は自社の商品、サービス、特権、利点の「完全かつ平等な享受」を提供しなければなりません。 米国司法省は、これにはインターネット上で提供されるサービスが含まれると解釈しています。

ADA に準拠していないサイトを運営する企業に対して法的措置が講じられるリスクが高まっています。 2022年に米国連邦裁判所で提起されたADA Title IIIのウェブサイトアクセシビリティ訴訟は3,255件あり、2017年の814件から増加しました。

アクセシビリティはSEOに影響しますか?

障害を持つ人々が Web サイトを操作できるようにするアクセシビリティ機能を実装すると、検索エンジンがサイトをより深く理解し、より正確にインデックスを作成できるようになります。

Web サイトのアクセシビリティに関する業界標準は、World Wide Web Consortium (W3C) が発行する Web Content Accessibility ガイドライン (WCAG) に規定されています。 SEO マーケティング担当者はこのガイドを使用して、色のコントラスト、画像の代替テキスト、ナビゲーションなどの技術的要素に対処し、能力に関係なくすべての人にとって公平なオンライン エクスペリエンスを作成できます。

アクセシビリティはランキング要素ですか?

ウェブサイトのアクセシビリティは、検索エンジンのランキング要素に直接影響するわけではありません。 ただし、すべてのユーザー向けに最適化されたサイトは、Google のランキング要素と一致し、検索結果で上位に表示される可能性が高くなります。

XML および HTML サイトマップ、読みやすさ、ビデオキャプション、Core Web Vitals など、多くのアクセシビリティ機能は SEO に関連しています。 満足できる要素が多ければ多いほど、サイトのランキングは向上します。

たとえば、健全な Core Web Vitals を備えたサイトは、読み込みと安定が迅速に行われ、ユーザー インタラクションに迅速に応答して最適なエクスペリエンスを実現します。 結論は? Google は開発者にアクセシブルな製品を開発することを奨励しているため、検索巨人の先導に従うことが重要です。

アクセシビリティと SEO を統合する方法

次のセクションでは、障害のある人や検索エンジンにとってサイトをさらに役立つものにするための SEO アクセシビリティ戦略をいくつか紹介します。

ウェブサイトのデザインとUX

Google はランキングにおいてユーザー エクスペリエンスをますます考慮するようになっているため、アクセスしやすい SEO を備えたサイトは上位にランクされる可能性が高くなります。 障害を持つユーザーがサイトをシームレスに操作できれば、直帰率が減少し、訪問者のエンゲージメントが促進されます。

次の方法でサイトのデザインを改善します。

• サイト要素をシンプルに保ちます。
• 画像、インタースティシャル、点滅するコンテンツの読み込みが遅いことを回避します。
• 高い色のコントラストと読みやすいフォントの種類とサイズを提供します。
• テキストを左揃えにします。
• 論理的なサイト アーキテクチャと直感的なナビゲーションを作成します。
• 説明的で明確な見出しを使用します。
• 情報を強調する方法として色を避ける。
• サイトに移動してコンテンツを消費するための代替方法を提供します。

XML および HTML サイトマップ

サイトマップは、Web サイト上のすべてのページへのリンクを提供し、クロールとインデックス作成のためにコンテンツがどのように編成されているかの全体像を検索エンジンに提供します。 サイトマップは、障害のあるユーザーに重要な代替ナビゲーション方法も提供し、1 か所から関連する Web ページをすばやくスキャンして見つけることができるようにします。

サイトマップをセクションおよびサブセクションごとに整理してサイトの階層を表示し、ページが追加、移動、または削除されるたびにサイトマップを修正して、リンク切れやページの欠落がないことを確認します。

ナビゲーション

補助機器を使用してコンテンツを見つけられない、またはコンテンツにアクセスできない場合、ユーザーはイライラする可能性があるため、ナビゲートしやすいサイトはアクセシビリティにとって不可欠です。 検索エンジンはリンクをたどって新しいページを見つけてインデックスを付けるため、ナビゲーションも SEO に影響します。

サイトのアーキテクチャを最適化するには:

• ユーザーが期待する馴染みのある場所にナビゲーションを配置します。
• リンク先が明確になるような意味のあるラベルを使用してください。
• マウスを使用できない人のためにキーボード ナビゲーションのオプションを提供します。
• ナビゲーションを高速化するために、多くのコンテンツを含むページにセクション リンクを追加します。
• リンクは、ユーザーが簡単にクリックできるのに十分な大きさであることを確認してください。
• サイトを起動する前にナビゲーションをテストして問題を特定します。
• タブ オーダーが適切に設定されていることを確認します。

パン粉

ブレッドクラム ナビゲーションは、ページの上部に水平に表示されるページ固有のナビゲーションです。 これは、親ページとの関係でページがどこにあるかを示し、ユーザー、特にホームページではなく検索を通じてカテゴリ ページに到達したユーザーを複雑なサイトに誘導するのに役立ちます。 ユーザーは、ページから直接、階層内の上位のページにすばやく移動することもできます。

SEO の目的で、ブレッドクラム ナビゲーションは検索エンジンにページの関連性を示します。 親ページは、内部リンクを通じて子ページとリンク エクイティを共有することもでき、ランキングの権威を向上させるのに役立ちます。

効果的なパンくずリストのナビゲーションのために:

• ブレッドクラムでは、スラッシュや不等号などの視覚的な区切り文字を使用します。 CSS を使用してパンくずリストを追加すると、スクリーン リーダーが視覚的な区切り記号を読み上げなくなります。
• 検索結果にブレッドクラム ナビゲーションが表示されるように構造化データを実装します。 これにより、検索者はスニペットをクリックした場合にサイト内のどこに移動するかがわかります。

ページタイトル

ページ タイトルは、Web ページの目的またはコンテンツを要約します。 多くの場合、次のように表示されます。

• 検索エンジンの結果内のクリック可能なリンク。
• ブラウザバーで開いているタブの名前。
• ブックマークされたページのデフォルトのタイトル。
• ソーシャル メディア リンク内のクリック可能な画像ブロックのタイトル。

検索エンジンは、HTML タイトル タグを使用して、インデックス付けするページの内容を理解します。 スクリーン リーダーは、ユーザーが関連するページを見つけたり、使用しているページを把握したりできるように、ページ タイトルを読み上げます。

アクセシビリティ SEO のためにタイトル タグを最適化するには、次のような役立つページ タイトルを作成します。

• ページを正確に説明します。
• 狙ったキーワードを自然に組み込んでいきます。
• 長さは 50 ～ 60 文字です。
• ユーザーにクリックスルーを強制します。

見出し

ヘッダー タグは、読みやすさを向上させるためにテキストをセクションに編成するために使用されるオンページ SEO の標準要素です。 各ヘッダーは、新しいトピックまたはサブトピックの開始を示します。

支援技術は、見出しを使用してユーザーを必要なセクションに直接誘導します。これは、Web ページ全体を読んで特定の情報を収集するよりも簡単です。 検索エンジンは、見出しを使用して各ヘッダーに続くコンテンツを理解し、クエリとの一致を高めます。

SEO のアクセシビリティのために見出しを最適化するには:

• 支援技術が読み取れるように、適切な HTML タグを使用してください。
• 各ヘッダーがセクションの内容を正確に説明していることを確認してください。
• セクション内でヘッダー レベルを順番にネストするため、H3 から H5 にジャンプしないでください。

代替テキスト

代替テキストは、画像の代わりとなるオンライン画像の説明文です。 これらは、視覚障害のある人や弱視の人が画像を理解するのに役立ち、画像の読み込みが遅い場合や画像が見つからない場合にすべてのユーザーに情報を提供します。 検索エンジンは画像をクロールできないため、SEO 目的では、インデックス作成のために画像の主題を中継する alt タグが重要です。

代替テキストを作成する際に考慮すべき点がいくつかあります。

• スクリーン リーダーが自動的にこれを読み上げるため、説明に「これは次の画像です」と含める必要はありません。
• 完全な文を書き、絵に命を吹き込みます。 代替テキストに「アイスクリーム」を使用する代わりに、「ストロベリー アイス クリーム 2 スクープが入ったワッフル コーンを手で持つ」ようにしてください。
• ページのコンテンツに関連した代替テキストを作成し、主題のコンテキストでユーザーが知りたいことを考慮します。
• 画像に機能がある場合は、画像ではなく動作を説明します。 たとえば、Nike ロゴが販売する Nike 製品にリンクしている場合、代替テキストでは「Nike ロゴ」と記載するのではなく、この情報を伝える必要があります。
• キーワードを自然に盛り込みます。 キーワードの詰め込みはスパム的な印象を与えます。
• グラフなどの複雑な画像については、詳細な説明へのリンクを参照してください。
• 装飾的な画像の場合、または詳細な画面上のキャプションの繰り返しを避けるには、空の alt 属性を使用して、スクリーン リーダーがそれらをスキップできるようにします。

メタデータ

メタディスクリプションなどのメタデータは、公開された Web ページには表示されませんが、検索エンジンとユーザーがページの目的とコンテンツを理解するのに役立ちます。

メタディスクリプションはSERPのページタイトルの下に表示され、アクセシビリティにとって重要です。 スクリーン リーダーはページを読み上げて、ユーザーがクリックスルーする前にそのページがニーズを満たしているかどうかを判断できるようにします。 また、検索エンジンにページの関連性に関する洞察を提供することで SEO を強化し、コンテンツを適切なクエリに一致させ、直帰率を低減します。

効果的なメタディスクリプション:

• ページの内容を正確に説明します。
• 明確で、声に出して読むと簡単に理解できます。
• 主なキーワードを含めます。
• 160 文字未満を含めてください。
• 行動喚起を含め、ユーザーにクリックスルーを強制します。

モバイルフレンドリーさ

世界の Web トラフィックの半分以上はモバイル デバイスから発生しています。 Google はすべての新しいウェブサイトのモバイル バージョンを最初にクロールします。これは、サイトがアクセス可能であり、スマートフォン、タブレット、その他のデバイス向けに最適化されている必要があることを意味します。

サイトがモバイルフレンドリーであることを確認するには:

• さまざまな画面サイズに合わせてレンダリングするレスポンシブ デザインを使用します。
• 読者が流し読みしたり、簡単に読めるようにコンテンツをフォーマットします。
• 煩わしいインタースティシャルを使用せずに、サイトをシンプルかつクリーンに保ちます。
• サイトの速度を最適化して、外出中のユーザーが素早く読み込めるようにします。
• 音声検索の対象となる特定のキーワード。

ビデオのキャプションとトランスクリプト

ビデオ コンテンツの人気は高まっていますが、ライブ ストリーム、ウェビナー、インタビュー、ビジュアル製品デモは、キャプションやトランスクリプトを提供しない限り、聴覚障害のあるユーザーと検索エンジンの両方にとって困難になる可能性があります。

画面上のキャプションは、聴覚障害のあるユーザーにとって、音声に代わるテキストです。 騒がしい環境にいる場合、または他の人に迷惑をかけたくない場合に、キャプションを好む人もいます。 YouTube ではビデオに自動キャプションが付けられますが、最高のユーザー エクスペリエンスを実現するには、正確にキャプションを編集する必要があります。

完全なトランスクリプトは、ビデオの話されている部分に代わるテキストを提供します (ビデオ SEO に最適です)。 ビデオと同じページに公開するか、リンクを含む別のページに公開する必要があります。 スクリーン リーダーは、ビデオ キャプションよりも早くトランスクリプトを読み取ることができます。 ユーザーによっては、ビデオを見たり、特定の用語のトランスクリプトを検索したりするよりも、トランスクリプトを流し読みすることを好む場合もあります。

検索エンジンはビデオ コンテンツをクロールできないため、トランスクリプトはインデックス作成に貴重な情報を提供します。 トランスクリプトを編集して「えー」や「あのー」などの会話要素を削除し、読みやすくします。

アンカーテキスト

アンカー テキストは、ユーザーと検索エンジンにリンクの行き先を伝えるクリック可能なテキストです。 検索エンジンはアンカー テキストを使用して、リンクの周囲およびリンク先ページのコンテンツを理解します。 障害を持つユーザーにとって、ニーズを満たさない他のページに不必要にクリックしないようにするために、正確なアンカー テキストも重要です。

ユーザーがリンクをたどったときに何が起こるかを理解できるように、簡潔で正確なアンカー テキストを作成します。 これは、「ここをクリック」などの一般的な表現を避けたり、URL をアンカー テキストとして使用したりしないことを意味します。

スクリーン リーダーを使用しているユーザーの中には、リンクを探してページをスキャンする人もいるので、アンカー テキストがアクセシブルであるかどうかをテストするには、アンカー テキストを単独で読み上げた場合に理解できるかどうかを確認する必要があります。

可読性

可読性とは、コンテンツがどれだけ読みやすいかを指します。 可読性の高いページはユーザーを惹きつけ、サイトに長く留まらせます。 また、コンテンツをユーザーのクエリと照合しようとする検索エンジンにとっても理解しやすくなります。

次の方法で SEO の読みやすさとアクセシビリティを向上させることができます。

• コンテンツを明確なヘッダーを備えたチャンクにグループ化して、情報を見つけやすくします。
• 冗長さを排除し、シンプルで説得力のある言葉を選択します。
• 能動態を使用して、より直接的な文体を表現します。
• スキャンに番号付きリストまたは箇条書きリストを使用する。
• 読者のために書き、キーワードの詰め込みを避ける。

アクセシビリティテストツール

サイトがどの程度アクセスしやすいかを知ることができる、無料および有料のツールが数多くあります。 すぐに始められるよう、以下にいくつかリストしました。

アクセススキャン

accessScan は、クリック可能な要素、タイトル、メニュー、向き、グラフィック、フォーム、読みやすさの観点からサイトがどのように評価されているかを詳細に分析します。 この無料ツールはドメインをスキャンし、サイトがさまざまなアクセシビリティ基準を満たしているかどうか、満たしていない要素の詳細を示します。 情報は PDF レポートとしてダウンロードできます。

アクセシビリティ チェッカー

アクセシビリティ チェッカーは、一部の国のアクセシビリティ法に基づいて Web サイトが準拠しているかどうかを監査します。 全体的なコンプライアンス スコア、緊急および二次的な問題のリスト、および解決策が提供されます。 この無料ツールは個々の Web ページで使用できますが、複数のページを一度にスキャンするにはアップグレードする必要があります。

Webアクセシビリティ評価ツール（WAVE）

WebAIM によって開発されたこのツールは、WCAG 2.1 ガイドラインに従って Web ページのアクセシビリティの問題をテストします。 WAVE Web サイトに直接アクセスし、URL を入力すると、エラーの視覚化を確認できます。 このツールは、Web ページ上にアイコンを重ねて、問題の場所を示します。 WAVE はブラウザ拡張機能としても利用できるため、Chrome、Firefox、Edge 内で直接テストできます。

今すぐ SEO とアクセシビリティを統合するためのサポートを受ける

アクセシビリティを後付けで考えるのではなく、SEO と組み合わせて Web サイトの最適化の取り組みを合理化します。 Victorious のチームは、アクセシビリティと SEO の両方を組み合わせた強力な戦略を構築し、可能な限り幅広い視聴者に届く便利でバリアフリーな Web サイトを作成するお手伝いをします。 無料相談については今すぐお問い合わせください。