アクセシビリティに取り組むことで、SEOの効果が期待できます。アクセシビリティ対応はユーザーへ、SEO対策は検索エンジンへとそれぞれ情報をわかりやすく伝えるという共通点があります。

つまり、どちらにも真摯に取り組むことで相乗効果によりコンテンツの品質が向上する可能性もあるわけです。

2024年4月1日より障害者差別解消法が改正され、「合理的配慮の提供」が義務化されました。これによりウェブアクセシビリティ対応に注目している企業も少なくありません。

この記事では、アクセシビリティとSEOの関連性に焦点を当てて解説します。具体的な施策やチェックツールも紹介しますので参考になさってください。

弊社GIGではウェブアクセシビリティに対応したサイト・システム制作を行っています。コンセプト設計等UXデザインの領域から包括的な支援が可能です。ウェブアクセシビリティ対応にお悩みなら、お気軽にご相談ください。 
■実績紹介
■お問い合わせはこちら

アクセシビリティとは

アクセシビリティ（Accessibility）とは、障がいの有無や年齢を問わず、すべての人が利用できることを意味している言葉です。

Webサイトやアプリのアクセシビリティは「ウェブアクセシビリティ」と呼ばれます。

Webサイト制作者にはすべての人がアクセスしやすく、わかりやすい情報を提供しなければなりません。。

関連記事：アプリ・ウェブのアクセシビリティ向上に重要な3要素

アクセシビリティがSEOに与える影響

SEOはWebサイトの集客においてかかせない施策です。アクセシビリティがSEOにどのような影響を与えるのか簡単に解説します。

コンテンツの品質が向上する

アクセシビリティへの対応は障がいのある人や高齢者など、すべての人がわかりやすいコンテンツの改善につながります。

具体的には、以下のような方法があります。

・テキストと背景のコントラスト
・キーボードだけで操作できるようにする
・画像への代替テキスト
・見出しの構造化

誰が見てもわかりやすく情報が整理されているコンテンツは、ユーザーの利便性が向上します。ユーザーファーストのコンテンツは、検索エンジンからも評価されやすくなるものです。

関連記事：SEOとは｜基本用語から仕組み、対策方法などを初心者向けに詳しく解説

ユーザビリティの向上につながる

アクセシビリティへの対応は、Googleが「検索の基本」で示している「技術的要件」を満たします。

適切なタグの設置やエラーページなどへの対応は、ユーザーのWebサイト内の行動を妨げません。目的の情報までスムーズにたどり着くことができます。

結果、Webサイトのユーザビリティが向上し、検索エンジンからも評価されやすくなるのです。

関連記事：ユーザビリティを評価する6つの手法。Webコンサル/制作会社が解説

アクセシビリティを踏まえたSEO対策

アクセシビリティはSEOの内部対策のひとつです。ウェブアクセシビリティの規格「WCAG」をもとに、おもなSEO施策を紹介します。

ページタイトルの最適化

ページタイトルは、ユーザーがWebページの内容を確認するために必要なものです。ページタイトルが最適かされていなければ、検索エンジンにも理解してもらえず検索結果に表示されません。

ページタイトルの最適化は、ウェブアクセシビリティの対応必須項目です。

▲出典：検索セントラル「Google検索結果のタイトルリンク（見出し）の変更」

コンテンツの内容を簡潔に伝えます。ただ複数のページでタイトルが重複しないように、パイプやコロンで区切ることで差別化が可能です。

見出し構造を明確にする

見出しやリストなどの構造を、HTMLタグを用いて明確にします。

タイトルや見出しごとに適切なHTMLタグを設置することで、スクリーンリーダーでスムーズに読み上げることができるのです。また、キーボード操作もしやすくなります。

また、検索エンジンもコンテンツの中身を理解しやすくなるメリットがあります。ユーザーと検索エンジンの両方の理解を促すことが可能です。

関連記事：SEOの効果的な内部対策15選。これさえやればOKのチェックリスト付き！

画像の代替テキストを入れる

画像の代替テキスト（altテキスト）は、音声ブラウザなどスクリーンリーダーを利用する視覚障害のある人に役立ちます。

ウェブアクセシビリティの達成基準でも必須項目となっており、ロゴや写真、イラストなどの画像には、内容を示す代替テキストを入れなければなりません。

読み上げ機能以外に、何らかの理由で画像が表示されないときに、代わりに表示されるテキストです。そのため、違和感のない内容であることがポイントです。

テキストの長さに規定はありませんが、80文字程度が推奨されています。ロゴなどは同じ文字を記載しましょう。

くわしい作成方法は、W3Cの『altディシジョンツリー』に掲載されています。参考にしてみてください。

ナビゲーションの明確化

ナビゲーションとはユーザーを目的のコンテンツへ導くためのものです。コンテンツに挿入するナビゲーションには以下のようなものがあります。

・テキストリンク
・関連記事
・グローバルナビゲーション
・パンくずリスト（ブレッドクラムナビゲーション）
・ローカルナビゲーション

青色やアンダーラインなどをつけて、ほかのテキストと区別することが大切です。内容が適切に伝わるように、言葉を選びましょう。

ページが変わっても同じ順序で統一した表記で実装しなければなりません。また、モバイル端末でどのように表示されるのか確認することも大切です。

関連記事：情報設計とは？Webサイト制作で重要となる導線の作り方や手順5つを解説

カラーコントラスト

ウェブアクセシビリティでは、色覚障がいのある人も情報をスムーズに理解できるようにカラーコントラストにも調整が必要です。

色覚障がいといっても、その見え方はさまざまです。Webデザインを制作するときは、色覚多様性に配慮したカラーコントラストを検討しましょう。

一般的な方法は、色味が似ている色を組み合わせないことです。寒色系同士や暖色系同士の組み合わせを避けることで、ある程度コントラストをつけることができます。

▲出典：デジタル庁「ウェブアクセシビリティ導入ガイドブック」

ただし、明度が同じだと、色覚のタイプによっては見えづらくなるため、明度にも注意しましょう。

動画の字幕

YouTubeなどプラットフォームでは、ユーザーが自身の視聴環境にあわせて字幕をつけることができます。

しかし、動画の音声をもとに字幕を生成するトランスクリプションでは、正しい字幕が生成されないことも少なくありません。

動画編集時に自動生成された字幕の編集が可能です。手動で字幕を付けることで、正しい情報をユーザーに届けることができます。

また、視覚障がいがある人も理解できるように、登場人物の表情やシーンなどの音声解説も入れておくと親切です。

読みやすさを意識する

幅広いユーザーに向けて発信していても、高等教育以上の読解力が必要なコンテンツは、ユーザーの幅を狭めてしまいます。正しく理解できていないことで、トラブルが起こるかもしれません。

WCAGでは提供するコンテンツにおいて、前期中等教育レベルを超えた読解力を必要としなければ、補足や代替は不要としています。

Webサイトやコンテンツを制作するときは、ユーザー視点でわかりやすさ、読みやすさを意識することが大切です。

こうした対策以外に、テキストの拡大縮小や配置など、ウェブアクセシビリティを達成するにはさまざまな対応が必要です。

Googleの『検索セントラル』やデジタル庁が発行している『ウェブアクセシビリティ導入ガイドブック』を一読しておくことをおすすめします。

参照：Google『検索セントラル』
参照：デジタル庁『ウェブアクセシビリティ導入ガイドブック』

アクセシブルなコンテンツを制作しなければならない

海外ではアクセシビリティへの対応が義務化されつつあります。日本でもアクセシビリティへの対応は進んでいますが、海外ほどではありません。

国は2021年に障害者差別解消法を改正し、民間事業者に対して「合理的配慮の提供」を努力義務から義務へと変更しました。
これにより、日本も海外のようにウェブアクセシビリティが義務化される可能性があると考えられています。

Webサイト制作に携わるすべての民間事業者は、ウェブアクセシビリティについて理解を深め、すべての人にとってアクセシブルなコンテンツを制作しなければなりません。

しかし、ウェブアクセシビリティの規格は複雑で理解するのも一苦労です。国は理解促進を目的に『みんなの公共サイト運用ガイドライン（2016年版）』を公表しています。

デジタル庁も2023年3月29日に『ウェブアクセシビリティ導入ガイドブック』を公開しました。こうしたガイドラインをもとに、ウェブアクセシビリティへの対応を進めておくことが大切です。

関連記事：アクセシビリティ 義務化
関連記事：アプリ・ウェブのアクセシビリティ向上に重要な3要素

SEO対策に役立つアクセシビリティチェックツール

ウェブアクセシビリティの基準を満たしているのか確認に役立つツールを3つご紹介します。

1. miChecker（エムアイチェッカー）

『miChecker（エムアイチェッカー）』は総務省が無償公開しているアクセシビリティのチェックツールです。『JIS X 8341-3:2016』をベースに作成されています。

利用環境に要件があるため、ダウンロード前に手順をしっかりと読んでおきましょう。

みんなのアクセシビリティ評価ツールmiChecker導入手順書

2. Lighthouse

『Lighthouse』はGoogleが無料で提供しているWebサイトの分析・診断ツールです。Chromeブラウザの拡張機能のため、導入がしやすいメリットがあります。

Googleでは、ほかにもWebページのパフォーマンスをチェックできる『Googleアナリティクス』や『Googleサーチコンソール』を提供しています。

関連記事：SEOに効果的なデザインを作る13のポイント【Web制作会社が解説】

3. NVDA

『NVDA』はWindows用スクリーン・リーダーです。Mac用がないのは視覚障がいのある人の環境にあわせて作られています。

ウェブアクセシビリティの達成に必要なスムーズな読み上げに対応できるかをチェックすることが可能です。

ウェブアクセシビリティのチェックは外注も可能

民間事業者もウェブアクセシビリティの「合理的配慮の提供」が義務化されたことで、ウェブアクセシビリティへの対応を真剣に考えなければなりません。

ウェブアクセシビリティのチェックは第三者機関へ依頼できますが、自社でガイドラインやツールを用いてチェックすることも可能です。

しかし、試験後は試験結果の公開など、上述のガイドラインなどをきちんと理解したうえで対応が求められます。

SEO対策もプロセスが複雑なため、自社で対応が難しい場合は専門知識をもつ業者へ依頼することも検討しましょう。

アクセシビリティ対応とSEO対策もGIGにおまかせください

アクセシビリティ対応はSEO内部対策のひとつです。Webサイトの品質向上にもつながるため、Web制作に携わる方は理解しておかなければなりません。

ウェブアクセシビリティだけではなく、SEO対策もさまざまなルールがあります。もし、対応できるリソースが不足しているなら、ぜひGIGへご相談ください。

GIGはWeb制作を中心にオウンドメディア運用やコンテンツ制作の実績が豊富です。SEOキーワード設計や企画、コンテンツ内製化の支援もおこなっています。

また、運営するフリーランスデザイナー専門のエージェントサービス『クロスデザイナー』より、アクセシビリティに対応したデザインも委託できる優秀なデザイナーの紹介も可能です。

お気軽にお問い合わせください。

お仕事のお問い合わせはこちら
会社紹介資料のダウンロードはこちら
採用応募はこちら（GIG採用サイト）
採用応募はこちら（Wantedly）

GIG BLOG編集部

株式会社GIGのメンバーによって構成される編集部。GIG社員のインタビューや、GIGで行われたイベントのレポート、その他GIGにかかわるさまざまな情報をお届けします。