この記事はAhrefs公式ブログの日本語訳です。
原文：Accessibility for SEOs: How to Comply With ADA & WCAG
（著者：Jenny Abouobaia/ 原文の最終更新日：April 16, 2023）
※フルスピード註：この記事は2023年4月16日時点の記載をもとに翻訳しています。Ahrefs公式ブログの記事は今後追記・再公開されることがありますことをご了承ください。
今月、新しい Web コンテンツ アクセシビリティ ガイドライン (WCAG) が施行され、Web サイトのアクセシビリティに新たな光が当てられています。しかし正直に言うと、これを考えている SEO 担当者はほとんどいません。
Web サイトが誰でもアクセスできるようにすることは、ランキングの直接的な要素ではない可能性があります。それでも、Web サイトへのトラフィックを誘導していて、障害のあるユーザーがサイト全体にアクセスして関与できない場合は、SEO の取り組みに悪影響を及ぼします。
米国だけでも6,100万人以上が障害を持っています。したがって、ターゲット ユーザーの大部分は、Web サイトのアクセシビリティの向上によって恩恵を受ける可能性があります。
さらに、世界中で Web サイトのアクセシビリティを法的要件とする国が増えているため、政府発行のアクセシビリティ ガイドラインを満たさないと、訴訟を起こされてオンライン ビジネスが停止される可能性があります。
母親が法的に視覚障害者として登録されている者として、私はWebサイトのアクセシビリティが日常生活の質に与える影響を高く評価しています。
この記事では、Web サイトのアクセシビリティの重要性、SEO の取り組みをどのように強化できるか、サイトが最新のアクセシビリティ規制を確実に満たすためにできることについて説明します。
アメリカ障害者法 (ADA) とは何ですか?
アメリカ障害者法 (ADA) は、1990 年代に制定された公民権法です。障害のある人をあらゆる形態の差別から保護し、公共の生活、サービス、宿泊施設への平等なアクセスを確保することを目的としています。これらには次のものが含まれます。
- 雇用
- 交通機関
- 公共宿泊施設
- コミュニケーション
- 政府
ADA の全国ネットワークによると、公共宿泊施設は次のとおりです。
- 小売部門
- 飲食業界
- ホテル業界
- 医療に特化した施設
- 図書館
- 公共公園システム
- 家庭、学校、職場以外の公共の使用のためのエリア
法律自体はWebサイトのアクセシビリティについては特に言及していません。しかし、近年、Webサイトのアクセシビリティを巡る多数の公的訴訟が発生しており、この法律が物理的施設とWebサイトの両方に適用されるかどうかについて企業が混乱しています。
実際、老舗レストランのドミノ・ピザは、Webサイトでピザを注文できなかった視覚障害者の男性から訴訟を起こされた後、最高裁判所に「障害のある個人に関する個別のアクセシビリティ要件を満たす」必要があるかどうかの確認を求める請願まで行いました。
それ以来、米国政府はWebサイトのアクセシビリティに関する特別な ADA ガイダンスを発行しました。そのWebサイトによると、一般に公開されているビジネス (B2C) または政府機関(または政府から資金提供を受けているビジネス) は、法律第 3 編に詳述されている ADA 規制を満たさなければなりません。
ADAには次のように記載されています。
Web サイトにアクセスできない機能があると、障害のある人がその Web サイトを通じて利用できる公共宿泊施設の商品、サービス、特典 (退役軍人奉仕団体のイベント登録フォームなど) にアクセスすることが制限される可能性があります。
こうした理由から、同省は一貫して、ADA の要件は、Web上で提供されるものも含め、公共宿泊施設で提供されるすべての商品、サービス、特典、またはアクティビティに適用されるという立場をとってきました。
ADA 準拠が重要なのはなぜですか?
今日の世界では、Web サイトに誰でもアクセスできるようにすることが良い習慣となるはずです。特に、開発者と SEO のチームが連携して作業する大企業にとって、Web サイトのアクセシビリティを優先しない正当な理由はありません。
対策を講じて Web サイトにアクセスできるようにする必要がある主な理由をいくつか見ていきます。
人々が制限なく生活できるようにする
新型コロナウイルス感染症（COVID-19）の流行で、私たち全員が何か月も家に閉じ込められていた当時を思い返すと、私たちの多くはオンラインで日常生活を送っていました。 Zoom 教室に参加するときも、食料品を注文するときも、請求書の支払いをするときも。
危機の際に必要なものに簡単にアクセスできることは、私たちの多くが当然のことだと思っています。しかし、障害のある人にとって、オンラインで公共サービスに平等にアクセスできることは、生活の質に大きな影響を与える可能性があります。
家から出られなかったり、食べ物の注文、請求書の支払い、投票などの政府サービスの利用を可能にするWebサイトにアクセスできなかったりすると、通常の生活を送ることができなくなる可能性があります。言うまでもなく、それは大きなストレスを引き起こす可能性もあります。
アクセシブルなWebサイトはビジネスに適している
Web サイトのアクセシビリティが向上する利点の 1 つは、ビジネスにとって単純に良いことです。結局のところ、Web サイトを使用する潜在顧客が増えれば、見込み客や売上も増加します。
Web アクセシビリティはほとんどの国で法的要件である
アメリカ障害者法は、米国を対象とするアクセシビリティ法にすぎません。米国外には、アクセシビリティを対象とする国際法がいくつかあります。
イスラエルの障害者平等権利法から台湾のWeb アクセシビリティ ガイドラインに至るまで、40 か国で Web サイトにアクセスできることを保証する必要があります。現在欧州連合によって起草されている 欧州アクセシビリティ法案もあります。
Web サイトが現地の規制に準拠していることを確認すると、法的措置に直面することを回避できます。
国際的なアクセシビリティ関連法の一例。全リストはこちら。
Web サイトが ADA に違反している場合、障害のある人はサイトの所有者に対して訴訟を起こす可能性があり、この訴訟はこれまで以上に頻繁に起こっています。
アクセシビリティ対応テクノロジー企業UsableNetによると、2017 年にはアクセス不能な Web サイトに関連する 800 件を超える苦情が連邦裁判所に提出されました。 WCAG 2.1 のリリース後、その数は 2018 年には 2,200 まで大幅に増加しました。
有名ブランドや有名人であっても、こうした法的影響を免れることはできません。
報道によると、Beyoncé Knowlesの事務所パークウッド・エンターテインメントは、視覚障害のある顧客はbeyonce.comのサービスへのアクセスを拒否され、ADAの第3編に違反するとして集団訴訟の告訴状を受け取ったといいます。
Beyonceの会社に対する集団訴訟のアクセス可能性の訴状からの抜粋。
視覚障害のあるサイト ユーザーがBeyonceの Web サイトでコンサート チケットを購入しようとしたところ、画像には代替テキストがなく、Web サイトにはキーボード アクセスがなく、ドロップダウン メニューにもアクセスできないことがわかりました。
ナイキ、バーガーキング、フォックスニュース、さらにはハーバード大学など、他のいくつかの有名なブランド、企業、研究機関が、注目を集めるADA遵守訴訟の対象となっています。
アクセシビリティに関する訴訟の数は年々増加しています。 2023 年 4 月に WCAG 2.2 が公開されると、おそらく再び大幅な増加が見られるでしょう。
WCAGとは何ですか?
Web コンテンツ アクセシビリティ ガイドライン (WCAG) は、 Web サイトの機能と Web アプリケーションのあらゆる側面がアクセス可能であることを保証するためのガイダンスを提供する規制です。
現在、 2018 年 6 月にリリースされたWCAG 2.1 ガイドラインが使用されており、以下を対象としています。
- Web コンテンツ開発者 (ページ作成者、サイト デザイナーなど)。
- Web オーサリング ツールの開発者。
- Webアクセシビリティ評価ツールの開発者。
- モバイル アクセシビリティを含む Web アクセシビリティの標準を望んでいる、または必要としている人もいます。
WCAG 2.2 標準はまだ開発段階にあり、2023 年 4 月まで完成しません。それにもかかわらず、WCAG 3.0 は、しばらく公開されないものの、すでに草案が作成されています。
WCAG3.0のガイドライン案の概要。
ただし、WCAG ルールの最新の草案を常に把握し、計画されている変更や追加を追跡しておくことは、Web サイトがアクセシビリティ要件を引き続き遵守していることを確認するのに役立ちます。
WCAG は3 つの適合レベルに分かれています。各レベルは、さまざまな個人や状況のニーズを満たすために、ページのデザインや外観にどのような影響を与えるかに基づいています。
WCAGの適合性の定義。
コンプライアンスの 3 つのレベルの基本と、それに含まれるものを見てみましょう。 SEOにとって重要な側面については後ほど詳しく見ていきます。
レベルA
これは、取得するための最も低く、最も複雑でない適合レベルです。レベル A は広範なレベルのアクセシビリティを提供するものではなく、絶対的な最小レベルのアクセシビリティを設定します。
以下は、注目すべきWCAG 2.0 レベル A 要件の一部です。
- キーボードトラップは許可されていません
- キーボードベースのナビゲーション
- テキストコンテンツの代替
- ビデオにキャプションを追加する
- 色の使用は、アクションを示す、応答を促す、または情報を伝える目的でのみ使用してください。
レベルAA
規制や法的和解は通常、このレベルを目標適合レベルとして採用または交渉します。支援技術を使用しているユーザーを含む、すべてのユーザーのアクセシビリティのレベルを設定します。
WCAG 2.0 のレベル AA 要件には次が含まれます。
- 最小コントラスト 4.5:1 (大きなテキストの場合は 3.1)
- 意味を伝える画像には代替テキストを使用する必要がある
- バックグラウンドオーディオがない、または低い
- 全体を通して一貫したサイト ナビゲーション
- 明確にラベル付けされたフォームフィールド
- 論理的に配置された見出し
レベルAAA
達成可能な最高レベルであるこの適合レベルでは、3 つの成功基準がすべて満たされています。一部のコンテンツがすべてのレベル AAA 達成基準を満たさない場合、完全な AAA 準拠は達成できません。
以下に、 WCAG 2.0 AAAの注目すべき要件をいくつか示します。
- ビデオまたはオーディオの手話通訳
- 色のコントラストは少なくとも 7:1
- どのアクティビティもタイミングを必要としてはいけない
- ユーザーは状況に応じたヘルプを取得できる
- 事前に録音されたオーディオ コンテンツのみのバックグラウンド オーディオが小さい、またはバックグラウンド オーディオがない
レベル AA の準拠基準は合理的であると考えられていますが、Web サイトがレベル AAA に準拠していることを確認することは、今後もアクセシビリティ基準を維持し、Web サイトを誰でもアクセスできるようにするのに役立ちます。
WCAG コンプライアンスが重要なのはなぜですか?
WCAG への準拠は、デジタル マーケティング担当者が地域のアクセシビリティ法を確実に遵守し、法的影響を回避できる最善の方法です。一般に、WCAG 準拠の Web サイトには、明確な目標、迅速な読み込み時間、シンプルなナビゲーション、およびユーザーフレンドリーな言語が必要です。
これらはすべて、検索エンジンのユーザーが必要な情報を見つけるのに役立つ UX デザインの重要な要素です。消費者に可能な限り最高のエクスペリエンスを提供するには、Web サイトの UX を改善する必要があります。
Think With Googleより引用。
大企業から新興企業まで、すべての企業は法律を遵守し、WCAG に準拠した Web サイトを持つよう努めるべきです。
国連は次のように述べています。「Webを含む情報通信技術へのアクセスは、障害者の権利に関する国連条約で基本的人権として定義されています。」
Webサイトにアクセスできないことによる悪影響は、多くの障害者が、アカウントの処理、仕事の獲得、インターネット一般へのアクセスなど、多くの人が当たり前だと思っている行動を実行できなくなることを意味します。
アクセシビリティと SEO が融合する場所
前述したように、Web サイトのアクセシビリティは直接的なランキング要素ではありません。ただし、アクセシビリティの問題はユーザー エクスペリエンスに影響を与えます。 2022 年 3 月のページ エクスペリエンスアップデートにより、これが Google にとって最も重要であることがわかりました。
John Mueller も以前、 Web アクセシビリティが低いと他のシグナルに悪影響が及ぶ可能性があり、その結果サイトが検索で表示されにくくなる可能性があるとコメントしました。
しかし一般的に、サイトが使いにくい場合、人々はいずれにしてもそのサイトから遠ざかるため、時間の経過とともに推奨事項やその他のシグナルが失われる傾向にあり、その結果、そのサイトは検索でも表示されにくくなります。
さらに、アクセシビリティの問題を引き起こす要素の多くが、技術的な SEO の健全性を改善するために私たちが検討している側面でもあることを考えると、この 2 つの間にはかなりの量の交差があります。
ナビゲーション
効果的なナビゲーションは、アクセシビリティと SEO の両方に有益です。ナビゲーションがシンプルで分かりやすいと、障害のある人もより簡単に Web サイトを利用できます。
また、よく整理されたナビゲーションにより、クローラーが Web サイトのコンテンツと構造を理解しやすくなり、SERP 上での Web サイトの位置が向上する可能性があります。
リンクとブレッドクラムは、ページのコンテンツに応じて含めることができるナビゲーション コンポーネントの例です。
一貫したナビゲーションは、WCAG のレベル AA 要件です。つまり、サイト全体で同じ要素を繰り返し使用することになります。
これには、各ページの先頭に「コンテンツへスキップ」ボタン (グルメブログの「レシピへスキップ」ボタンのような) や、メニューとサブメニューが各ページで同じ位置にあることを含めることができます。
参考文献
「ブレッドクラム」というラベルが付いたナビゲーション要素は、構造をブレッドクラム トレイルとして定義し、それをナビゲーション ランドマークとして指定して、見つけやすくします。
これは、ユーザーが Web サイト上のどこにいるか、またホームページからどのくらい離れているかをナビゲートするのに役立ちます。次のようになります。
ホーム > ブログ > テクニカル SEO > テクニカル SEO 監査の実施方法
ブレッドクラムは、検索エンジンが Web サイト内を移動し、そのページを分類するのにも役立ちます。 Google では検索結果にパンくずリストも表示します。
サイトマップ
サイトマップは、ユーザーと検索エンジンの両方が Web サイトをナビゲートするのに役立ちます。特に障害のあるユーザーにとって、サイトマップはアクセスする必要があるページをより簡単に見つけるのに役立ちます。
World Wide Web コンソーシアムは次のように述べています。
サイトマップにはいくつかの目的があります。
- サイト全体の概要を説明します。
- これは、ユーザーがサイトに何が含まれているか、コンテンツがどのように構成されているかを理解するのに役立ちます。
- これは、サイトの異なる部分で異なる可能性がある複雑なナビゲーション バーの代替手段を提供します。
参考文献
タイトルと見出し
スクリーン リーダーはタイトル タグを使用して、ページが最初に読み込まれるときにページのコンテンツの概要をユーザーに提供します。さらに、ページの概要を提供し、訪問者がタブや検索エンジンの結果をクリックするよう誘導します。
ヘッダーを適切に使用することで、スクリーン リーダーを使用するユーザーにとって情報が読みやすくなります。適切なヘッダー タグ (テキストを大きくしたり太くしたりするだけでなく、H2 など) を使用してください。
カスケード ヘッダーを使用するときは、H1 が H2 の前に、H3 が H2 の後に来るというように、論理階層を観察する必要があります。これにより、訪問者と検索エンジンの両方がコンテンツの構造を簡単に理解できるようになります。
これを支援する優れたツールは、Ahrefs のSEO ツールバーです。これを使用すると、任意のページでページ タイトル、コンテンツの長さ、見出し (および階層) を直接確認できます。
内部リンク
アンカー テキストは、他の Web ページへのリンクを構築するために使用されるクリック可能なテキストです。ユーザーは、リンクをクリックしたときに何が起こるかを理解する必要があります。アクセシビリティのためには、正確な説明が不可欠です。
検索エンジンは、アンカー テキストを利用して、リンクされた Web サイトのコンテンツを評価する場合があります。アンカー テキストは、Web サイトの構造、ページ レイアウト、キーワードを理解するのに役立ちます。
参考文献
代替テキスト
代替テキストを使用すると、スクリーン リーダーは画像が何を意味するかを理解できます。さらに、代替テキストは検索エンジンが写真の内容を理解するのに役立ち、ページの SEO が向上し、画像結果ページに画像が表示されるようになり、Web サイトへのトラフィックを増やすことができます。
参考文献
Web サイトのアクセシビリティをテストする方法
Web サイトにアクセスできるようにするには、アクセシビリティ監査を実行できる必要があります。
これまで説明してきた SEO の重要な要素の多くは、Ahrefs のサイト監査を使用して評価できます。このツールは次の問題を表示します。
- サイトマップ
- ロボット.txt
- 内部リンク
- 見出し
- タイトル
- 代替テキスト
もちろん、詳細なアクセシビリティ監査を実行してアクセシビリティ固有の問題を開発者に転送したい場合は、サイトをよりアクセシビリティ高くするためにどの SEO 要素を改善できるかを特定するツールがいくつかあります。
アクセシビリティ チェッカーを使用してアクセシビリティを監査する
まず、アクセシビリティ チェッカーに移動します。監査する Web サイトを入力し、準拠する国を選択します。
それが完了すると、監査を実行して結果が表示されるまでに約 30 秒かかります。
この下には、重大な問題の内訳とその修正方法が表示されます。レポートをダウンロードして後で作業したり、開発者に転送したりすることもできます。
Google Lighthouse でアクセシビリティを確認する
Google Lighthouse は、セキュリティと SEO に加えて、サイトのアクセシビリティとCore Web Vitalsを検査します。
ページ タイトルと背景と前景の色のコントラストがアクセシビリティ基準の 2 つです。タイトル タグ、リンク名、ビューポートのスケーラビリティも含まれます。
自動評価にアクセスできない一部の Lighthouse アクセシビリティ標準は、手動でチェックすることもできます。 Lighthouse は、技術者と非技術者の両方が利用できるように、無料の Google Chrome プラグインとしてなど、さまざまな方法で使用できます。
ページを右クリックして「検査」を選択するか、キーボードの F12 を押すことで、Google Chrome で直接Google Lighthouse – アクセシビリティ監査に簡単にアクセスできます。
次に、開発者ツール ウィンドウで、「Lighthouse」タブに移動します。
Lighthouse の設定を調整し、「アクセシビリティ」のみを監査し、次に「ページ負荷の分析」を選択します。
Lighthouse はページを分析し、100 点満点のスコアと問題のリストを提供します。
WAVE のアクセシビリティ評価ツールを使用する
Wave のアクセシビリティ評価ツールは、Web サイトが直面しているアクセシビリティの問題の詳細な内訳を提供し、アクセシビリティ チェッカーやライトハウスに加えて使用するのに最適です。
まず、 WAVE Web サイトにアクセスし、監査するサイトの Web サイト アドレスを入力します。
監査が完了すると、監査の概要がドッキング ウィンドウで開きます。
さまざまな問題を展開して、詳細な内訳を表示できます。 Wave の優れた点は、レポート内の問題をクリックすると、その問題がページ上で直接強調表示されることです。たとえば、代替テキストや説明テキストのないリンクが欠落している画像を正確に強調表示します。
アクセシビリティをテストおよび改善するプラグインとウィジェット
Webサイトにアクセスできるようにするには、かなりの時間と労力がかかる場合があります。ただし、コンテンツ管理システムとして WordPress を使用している場合は幸運です。
少なくとも、WordPress アクセシビリティ プラグインは、サイトをアクセシビリティ可能にする際に正しい方向に導くことができます。開発者の支援なしで変更を加えるのに役立つものもあります。
以下に私の主な選択肢を 3 つ挙げました (必要なのは 1 つだけです)。
WP Accessibility
WordPress テーマにおける一般的なアクセシビリティの問題の多くは、WP Accessibility プラグインを使用して解決できます。無料プラグインのアクセシビリティ強化機能は、管理者がコードを記述せずに有効または無効にすることができます。
カラー コントラスト テスターを使用すると、2 つの色のコントラストを比較できます。プラグインを使用すると、代替テキストのない写真を区別することもできます。
One Click Accessibility
WordPress サイト管理者は、One Click Accessibilityを使用してアクセシビリティ設定をセットアップおよび維持できます。このプラグインは、Web サイト ユーザーがさまざまなアクセシビリティ機能に利用できるアクセシビリティ メニューを画面の横に表示します。
ARIA (Accessible、Rich、Internet Applications) ランドマーク、アウトラインの強調、リンクのターゲット特性、およびスキップ リンクは、その便利な機能の一部です。また、サイトマップの作成、リンクに下線を引く、負のコントラストを使用する、フォントの拡大縮小を行うこともできます。
WP Accessibility Helper
WP Accessibility Helperは、フォント サイズ、コントラスト、代替テキストの問題に対処することで、Web サイトをよりアクセスしやすくするのに役立ちます。トグルボタンを使用するだけで、必要なオプションをオンにすることができます。
WP Accessibility Helper のプロ版を使用して、フロントエンドのアクセシビリティ サイドバーをカスタマイズできます。フォントのサイズ、色、その他の機能を簡単に調整できます。
ADA Okay!
ADA Healthy は、サイト ユーザーが Web サイトにアクセスできるように制御できるオンサイト ウィジェットを使用するプレミアム ツールです。
私は個人的に ADA Healthy を数十の中小企業サイトに追加しましたが、短いコードをコピーして Web サイトのフッターに貼り付けるだけで常に完璧に機能しました。
小さなポップアップ (チャット ウィジェットと同様) にアクセシビリティ メニューを表示することで、ADA Healthy はアクセシビリティを向上させ、Web サイトが ADA 標準に準拠していることを保証します。
Web サイトのユーザーは、メニューを使用してテキストのサイズと色を変更したり、カーソルを拡大したり、リンクを強調表示したりできます。自動再生や発作を引き起こす可能性のあるその他のアニメーションなどの機能を無効にすることもできます。
まとめ
Webサイトのアクセシビリティは法的要件であるだけでなく、障害のある人々が通常の日常生活を送れるようにする上で非常に重要な側面でもあります。
SEO として、私たちはアクセシビリティを促進する技術的およびページ上の側面が適切に実装および維持されていることを確認することで、アクセシビリティの向上に貢献できます。
そうすることで、すべての潜在顧客が Web サイトにアクセスできるようにし、アクセシビリティ訴訟の対象となるのを防ぐことで、クライアントの ROI を向上させることができます。
質問がありますか? Twitter で私に連絡してください。
著者プロフィール
Jenny は受賞歴のある SEO コンサルタントであり、ブランド PR を使用して EAT を構築することでクライアントの SEO 結果を最大化することに特化しており、ニッチなアフィリエイトとテクニカル SEO の幅広い背景を持っています。
コメント