企業サイトのアクセシビリティチェックリスト:採用、PDF、IR、フォーム

企業サイトのアクセシビリティチェックリスト。ナビゲーション、採用ページと応募フォーム、PDFと年次報告書、動画、フォーム、Cookieバナー、アクセシビリティ声明まで。

FixReports 編集部1分で読めます

企業サイトで直接何かを販売することはまれなため、そこにあるアクセシビリティの問題は見過ごされがちです。しかし企業サイトは、人が求人に応募し、投資家が年次報告書を読み、記者がプレスリリースを探し、顧客が連絡先を調べる場所です。そしてそのどれもが、バリアによって妨げられることがあります。キーボードでは完了できない応募手続き、タグのないPDFで公開された年次報告書、キャプションのない動画、フォーカスを閉じ込めるCookieバナーなどです。このチェックリストでは、多くの企業サイトにあるセクションごとに、WCAG 2.2のレベルAAを確認し、それぞれで何をチェックすべきかを説明します。

要点

  • WebAIMの2026年の調査では、上位100万件のトップページの95.9%で検出可能なWCAGの不適合が見つかりました。最も多かったのは、コントラストの低いテキスト(83.9%)と代替テキストの欠落(53.1%)です(WebAIM (新しいタブで開きます))。
  • WCAGは、ウェブページだけでなく、サイトで公開するPDFなどの文書にも適用されます。W3Cは、PDFをアクセシブルにするための達成方法を公開しています(W3C (新しいタブで開きます))。
  • 収録済みの動画にはキャプションが必要です(1.2.2、レベルA)。映像が音声にない情報を伝えている場合は、音声解説も必要です(1.2.5、AA)(W3C (新しいタブで開きます))。
  • 米国司法省は2022年のガイダンスで、ADAは一般に開かれた事業者のウェブ上のサービスに適用されると述べましたが、具体的な技術基準は定めていません(ADA.gov (新しいタブで開きます))。
  • W3Cは、アクセシビリティ声明を作成するためのガイダンスと無料の作成ツールを提供しています(W3C (新しいタブで開きます))。

企業サイトでアクセシビリティが重要なのはなぜですか?

アクセシビリティを必要としている訪問者こそ、最も届けたい相手であることが多いからです。応募者、顧客、取引先、投資家です。世界保健機関(WHO)は、約6人に1人にあたる13億人が重大な障害を抱えていると推計しています(WHO (新しいタブで開きます))。さらに多くの人が、マウスの代わりにキーボードを使い、文字を拡大し、明るい場所でスマートフォンを見ています。

法令順守の観点もあり、その内容は国やサイトの利用者によって異なります。EUの公的機関はウェブアクセシビリティ指令を満たさなければならず、EUの消費者に販売する事業者には欧州アクセシビリティ法が適用される場合があります。米国では、司法省が、ADAは一般に開かれた事業者のウェブ上のサービスに適用されると述べています(ADA.gov (新しいタブで開きます))。純粋に企業間取引のサイトは、こうした法律の一部の対象外となることもありますが、大口の顧客が取引先にアクセシビリティについて尋ねることは増えています。背景については、欧州アクセシビリティ法とADAデマンドレターに関する当社のガイドで説明しています。これは法的助言ではありません。

すべてのページで何をチェックすべきですか?

これらの問題は共通のテンプレートから生じるため、一度修正すればサイト全体が修正されます。

  • コントラスト:本文は背景に対して4.5:1以上、大きなテキストは3:1以上にします(1.4.3)。よくある不適合は、薄いグレーの文字と、ブランドカラー上の白い文字です。カラーコントラストチェッカーでは、任意の色の組み合わせをテストできます。
  • キーボード:すべてのリンク、メニュー、ボタンにTabキーで到達でき、EnterキーまたはSpaceキーで操作でき、フォーカスインジケーターが見えるようにします(2.1.1、2.4.7)。メガメニューとカルーセルはよく問題になります。
  • スキップリンクとランドマーク:ヘッダーを飛ばしてメインコンテンツに移動する手段(2.4.1)と、header、nav、main、footerのランドマークを用意します。
  • 見出し:1ページにH1を1つとし、見出しを論理的な構造にします(1.3.1)。スクリーンリーダーの利用者がページを効率よく把握できるようになります。
  • リンクテキスト:「詳しくはこちら」を10回繰り返すのではなく、文脈から切り離しても意味がわかるリンクにします(2.4.4)。
  • 言語:すべてのページにlang属性を指定し、別の言語の部分にも指定します(3.1.1、3.1.2)。スクリーンリーダーが正しく発音できるようになります。
  • ズームとリフロー:200%に拡大しても、幅320ピクセルでも、横スクロールなしにコンテンツを利用できるようにします(1.4.4、1.4.10)。

採用ページと応募手続きをアクセシブルにするにはどうすればよいですか?

採用のセクションは、バリアの影響が最もはっきり表れる場所です。応募を完了できない応募者は、選考の対象にすらなりません。

  • 求人一覧:絞り込みと検索をキーボードで操作でき、結果の件数がスクリーンリーダーに通知されるようにします(4.1.3)。
  • 応募フォーム:すべての入力欄に目に見えるラベルを付け(3.3.2)、エラーはテキストで説明し(3.3.1)、ファイルのアップロードボタンにはアクセシブルな名前を付けます。
  • 時間制限:フォームにタイムアウトがある場合は、事前に警告し、時間を延長できるようにします(2.2.1)。
  • 外部の採用管理システム:多くの企業は、応募の受付に外部のシステムを使っています。提供元にアクセシビリティ適合報告書を求め、自社でも応募の流れをキーボードでテストし、メールなどの別の応募方法を採用ページに記載しておきます。
  • 適性検査と動画面接:オンラインの検査や動画面接のツールが、スクリーンリーダーとキャプションに対応し、希望に応じて時間を延長できることを確認します。

アクセシブルなPDFと年次報告書を公開するにはどうすればよいですか?

年次報告書、サステナビリティレポート、パンフレット、方針文書は、PDFだけで公開されることが多く、その多くはタグがありません。そのため、スクリーンリーダーは1つのテキストのかたまりとして読み上げるか、まったく読み上げられません。

  • 重要なコンテンツはHTMLを優先します。 ウェブページのほうがアクセシブルにしやすく、スマートフォンでも見やすく、検索もしやすくなります。
  • PDFを公開する場合はタグを付けます。 元の文書(Word、InDesign)からタグを有効にして書き出し、見出し、リスト、表、読み上げ順序が保たれるようにします。アクセシブルなPDFは、PDF/UA規格(ISO 14289)で定義されています。
  • 基本事項を確認します:文書のタイトル、文書の言語、グラフや画像の代替テキスト、本物の表の見出し、論理的な読み上げ順序です。Adobe Acrobat Proにはアクセシビリティチェック機能が組み込まれており、PACはWindows向けの無料のチェックツールです。
  • スキャンした文書は文字の画像なので、OCRとタグ付けを行うか、HTML版を用意する必要があります。
  • 財務の表:見出しの行と列をマークアップします。HTMLでは、scopeを付けた<th>を使います。

動画、ウェブキャスト、ポッドキャストについてはどうですか?

  • 発話を含むすべての収録済み動画(1.2.2、A)と、ライブのウェブキャスト(1.2.4、AA)にキャプションを付けます。自動キャプションは確認が必要です。人名、数字、専門用語はよく間違っています。
  • 話し手が読み上げないスライド上の文字など、重要な情報が映像だけで伝えられている場合は、音声解説を用意します(1.2.5、AA)。多くの場合、最も簡単な方法は、話し手がスライドの内容を説明することです。
  • ポッドキャストや音声のみのコンテンツには書き起こしを用意します(1.2.1、A)。
  • プレーヤーのコントロール:埋め込みのプレーヤーはキーボードで操作できる必要があり、3秒を超えて自動再生される音声には、一時停止または停止する手段が必要です(1.4.2)。

音声と動画をアクセシブルにするためのW3Cのガイドでは、計画、キャプション、解説について取り上げています(W3C (新しいタブで開きます))。

お問い合わせフォーム、地図、所在地情報をアクセシブルにするにはどうすればよいですか?

  • フォーム:ラベルとわかりやすいエラーメッセージを用意し、ゆがんだ文字を読むことやパズルを解くことだけに頼るCAPTCHAは使わないでください。代替手段を用意します(W3C (新しいタブで開きます))。
  • 連絡先をテキストで記載:電話番号、メールアドレス、事業所の住所は、画像や地図の中だけでなく、ページ上のテキストとして記載します。
  • 地図:埋め込みの地図はスクリーンリーダーでは使いにくいものです。テキストで記載した住所と道順が、アクセシブルな代替手段になります。
  • チャットウィジェット:キーボードで開き、使い、閉じられること、そしてフォーカスされたコンテンツを覆い隠さないことを確認します(2.4.11)。

Cookieバナーはアクセシビリティの問題を引き起こしますか?

よくあります。最初に表示され、ほかのすべての上に重なるからです。

  • バナーにはキーボードで到達して操作でき、Tabキーでバナーから抜け出せる必要があります(2.1.2 キーボードトラップなし)(W3C (新しいタブで開きます))。
  • バナーのボタンには、わかりやすい名前と十分なコントラストが必要です。「拒否」は「同意」と同じくらい見つけやすくなければなりません。
  • バナーの背後にあるページで、フォーカスされた要素を隠してはいけません(2.4.11)。

当社のスキャンは、Cookieバナーが表示されたままの状態でトップページから始めます。それがキーボード利用者が最初に出会う状態だからです。Tabキーでバナーを越えられない場合は、フォーカストラップとして報告します。

アクセシビリティ声明は必要ですか?

EUの公的機関には公開が義務付けられています。企業の場合は通常任意ですが、欧州アクセシビリティ法は、対象となるサービスに対し、その要件をどのように満たしているかについての情報の提供を求めています。良い声明には、目標とする基準、既知の制限事項、利用者が問題を報告したり別の形式でコンテンツを求めたりする方法、最終確認日を記載します。W3Cは、ガイダンスと無料の作成ツールを公開しています(W3C (新しいタブで開きます))。

誠実に書いてください。自動テストですべてをチェックすることはできないため、自動スキャンだけで完全な適合をうたうこと自体がリスクになります。

企業サイトはどのようにテストすべきですか?

  1. 自動スキャンを実行します。 トップページ、採用ページ、ニュース記事、お問い合わせページ、そしてすべてのフォームが対象です。当社の無料のアクセシビリティチェッカーでは、主要ページを実際のブラウザでWCAG 2.2のA・AAに照らしてテストし、画像の代替テキストチェッカーでは、ページ上のすべての画像を一覧表示します。
  2. キーボードでテストします:キーボードだけを使って、メニューを操作し、求人に応募し、お問い合わせフォームを送信します。
  3. 文書を確認します:最も重要なPDFを、スクリーンリーダーまたはPDFのアクセシビリティチェックツールで開きます。
  4. キャプションをオンにし、音声をオフにして動画を視聴します。
  5. 障害のある人に主要なタスクを試してもらいます。どのチェックリストでも予測できない問題が見つかります。

よくある質問

WCAGはPDFにも適用されますか?

はい。WCAGは、サイトで公開する文書を含むウェブコンテンツに適用されます。W3Cは、PDFファイルでWCAGを満たすための具体的な達成方法を公開しています。

採用サイトは外部の会社が運営しています。それでも当社の責任ですか?

応募者から見れば、それは御社の応募手続きです。提供元にアクセシビリティ適合報告書を求め、応募の流れをテストし、別の応募方法を用意してください。法的な責任を負うかどうかは、管轄する法域によって異なります。

自動キャプションはWCAGを満たしますか?

正確な場合に限ります。自動キャプションは、人名、数字、用語をよく間違えます。頼る前に、確認して修正してください。

企業サイトはオーバーレイで十分ですか?

いいえ。オーバーレイは、基盤となるコード、文書、動画を修正しません。当社のオーバーレイとFTCの命令に関するガイドをご覧ください。

企業サイトはどの基準を目標にすべきですか?

現行のバージョンであり、通常の目標でもあるのは、WCAG 2.2のレベルAAです。多くの法律や方針はいまもWCAG 2.1 AAを参照していますが、2.2 AAを満たすサイトは2.1 AAも満たします。

出典