コーポレートサイトにおける アクセシビリティ対応 。
重要だと分かっていても、コーポレートサイトにどこまで反映すべきかは悩みどころではないですか？

今回は、現実的に取り組みやすい部分と、対応が難しい部分を整理してご紹介します。

一概にこれが正解、というわけではありませんが、悩んでいる方の参考になればと思います。

コーポレートサイトでの達成基準は？

アクセシビリティ対応においては、国際的なウェブアクセシビリティ基準であるWCAG（Web Content Accessibility Guidelines）2.0を参考にします。

その中でも国内向けのサイトであれば、日本向けの補足や解説を加えた規格『JIS X 8341-3:2016』を基準に、達成レベルをクリアしていきます。
達成基準は以下のようになります。


サイトの作りにもよりますが、コーポレートではAAレベルを目標にするのが現実的です。


参考資料

• ウェブアクセシビリティ基盤委員会 – JIS X 8341-3:2016 解説
• みんなの公共サイト運用ガイドライン（2024年版） – 総務省
• JIS X 8341-3:2016 達成基準 早見表（レベルA & AA）

比較的対応しやすい部分

ここでは、コーポレートサイト制作において比較的対応しやすく、すぐに実践できるアクセシビリティ対応をご紹介します。
通常のコーディングや、デザイン作業の中で意識するだけで改善できるものがほとんどです。

「まずどこから始めればいいのか」と迷ったときは、このあたりから取り組むのがおすすめです。

画像に代替テキストを設定する

達成レベル：A 参考：WCAG 2.0 1.1.1

まずはサイト作成の基本ではありますが、画像への代替テキスト（alt属性）の設定です。会社のロゴやバナー、事業内容の図解など、意味を持つ画像には適切な説明を入れるようにしましょう。
alt属性の使用頻度が一番高いかもしれませんが、図のキャプション要素である<figcaption>なども有用です。

注意点として、<figcaption>でキャプションを表示している場合に、同じテキストをそのままalt属性に入れてしまうとチェッカーで「同一テキストの繰り返し」と判定されることがあります。

この場合は、altにはキャプションと異なる補足的な説明を入れるか、もしくは空のalt（alt=""）を設定することで、不要な読み上げを避けることができます。状況に応じて使い分けるのがポイントです。

見出し構造の整理（h1～h6の適切な使用）をする

達成レベル：A 参考：WCAG 2.0 1.3.1

こちらもサイト作成の基本ですが、「お知らせ」「会社概要」といった見出しタグ（<h2>や<h3>など）をきちんと整理しましょう。

スクリーンリーダーを利用するユーザーは、見出しを一覧表示してページを移動するケースが多いため、見出し構造が適切であれば内容をスムーズに理解できます。
逆に見た目だけ大きな文字で装飾してタグがh2でもh4でもない、といった状態では、読み上げ環境ではページ全体が分かりにくくなってしまいます。

見出しタグは「見た目を大きくするための装飾」ではなく「ページ構造を示すための要素」と捉え、意味のある階層を意識して利用することが大切になります。

色や形だけに依存しない情報提供をする

達成レベル：AA 参考：WCAG 2.0 1.4.1

例えばお問い合わせフォームで『赤文字は必須項目』といったように色だけで必須を表現したり、『*は必須項目です』のように記号だけに頼るのは避けましょう。

視覚に制限があるユーザーやスクリーンリーダー利用者には情報が伝わらず、スムーズに入力を進められない原因になります。

代わりに「*必須」のようにのように、テキストとしてきちんと意味を補足しておくとわかりやすくなります。
色や記号は「補助的な強調」として活用し、必ず文字情報でも内容が理解できるようにしておくことがポイントです。

グラフの場合

色について補足ですが、グラフやチャートでも「赤の線が売上、青の線が利益」といったように色だけで情報を区別するのは避けましょう。色覚に特性があるユーザーには違いが分かりにくいことがあります。
凡例やラベルに「売上」「利益」とテキストを併記したり、線のスタイルを変える（実線・点線など）ことで、判別がしやすい表現になります。

フォームのラベル設定をする

達成レベル：A 参考：WCAG 1.3.1, 2.4.6

お問い合わせフォームの入力欄には、必ず<label>要素を正しく紐づけましょう。
labelと入力欄が紐づいていないと、スクリーンリーダー利用者は「テキストボックス」としか認識できず、何を入力すべきかが分かりません。
具体的には、入力欄に id を設定し、for 属性でラベルと紐づけます。

例えばメールアドレス欄なら以下のようになります。

リンクテキストの明確化をする

達成レベル：AA 参考：WCAG 2.0 2.4.4

リンクテキストは、ページ内や外部への移動の手がかりとなる重要な要素です。

例えば「詳しくはこちら」といった表現はよく使われますが、このままではリンク先がどのページなのか、スクリーンリーダー利用者や検索エンジンにとっても分かりづらいです。

そのため、リンク先の内容を具体的に示すことで、誰にとっても分かりやすくなります。
例えば「採用情報の詳細を見る」や「最新のプレスリリース一覧へ」といったように、リンク先を明確に書きましょう。

どうしてもデザイン上、長いリンクテキストの表示が難しい場合はaria-labelやスクリーンリーダー用テキストで補完してもOKです。

キーボード操作の確認をする

達成レベル：A 参考：WCAG 2.1 2.1.1

ページ内リンクやボタンなどが、Tabキーによる操作で順番に移動できるように確認しましょう。
特に注意したいのは、細かいインタラクション部分です。

例えば、ハンバーガーメニューの開閉やモーダルウィンドウの操作なども、キーボード操作で適切にフォーカス移動できるように調整する必要があります。
実際の確認方法としては、マウスを使わずにTabキーやShift+Tabでページ内を移動してみて、リンクやボタン、フォームに正しい順序でフォーカスが当たるかチェックします。

また、Enterキーやスペースキーでのアクションも必ず確認しましょう。

少し工夫が必要な部分

ここからは、対応に少し工夫や追加作業が必要な部分をご紹介します。
コーディング作業以外にも、デザインや制作体制、運用方法など調整しながら改善していくことが求められるものも多いです。
このあたりを意識することで、より幅広いユーザーにとって使いやすいサイトに近づけることができます。

ブランドカラーを使ったデザイン

達成レベル：A～AAA（状況による） 参考：WCAG 2.0 1.4.3

コーポレートサイト作成でよくあるのが、ブランドカラーを使ったデザインです。

しかし、ブランドカラーによっては十分なコントラストを確保できず、アクセシビリティで引っかかることもあります。特にオレンジ色は、背景との組み合わせによっては読みづらくなるケースが多いため注意が必要です。
理想的としては、アクセシビリティに配慮したデザインを優先するのが望ましいですが、実際にはブランドイメージとの兼ね合いで制約が生じることもあります。そのため、デザインを進める前に、ブランドのイメージとアクセシビリティのどちらを優先するか、関係者間で事前にすり合わせを行うことが大切です。

場合によっては、コントラスト調整や装飾の工夫（背景色の明度を少し変える、文字に影を付けるなど）でデザインの印象を大きく損なわずに対応できることもあります。
バランスを意識しながら進めていきましょう。

動画コンテンツ

達成レベル：AA 参考：WCAG 2.0 1.2.2

動画は直感的に情報を伝えられる便利なコンテンツですが、音声だけに依存すると、音だけでは情報を受け取りづらい方には内容が伝わりません。

そのため、字幕を付けることが重要です。字幕は聴覚に制限のある方だけでなく、音を出せない環境で視聴するユーザーにとっても有益です。

YouTubeなど一部のサービスでは自動字幕機能が用意されていますが、利用している配信サービスによっては同様の機能がない場合もあります。その場合、既存動画に後から字幕を追加するには文字起こしやタイミング調整といった作業が必要になり、制作コストや差し替え対応が発生する点に注意が必要です。

もし字幕の追加が難しい場合でも、ナレーション内容を文章化した「トランスクリプト（文字原稿）」を用意することも一つの手です。
制作コストも比較的低く、最低限のアクセシビリティ対応として取り入れやすい方法です。

カルーセルやスライダー

達成レベル：AA 参考：WCAG 2.0 2.2.2

コーポレートサイトのトップページなどで、複数の画像や情報をスライド表示する「カルーセル」や「スライダー」を導入することも多いのではないでしょうか。
見た目に動きが出て華やかになる一方で、アクセシビリティ対応という観点では注意点が多い要素のひとつです。

よくある課題としては、以下のようなものが挙げられます。

• 自動再生によって内容を読む前に次のスライドへ移ってしまい、情報が追えない
• 「次へ」「前へ」などの操作ボタンがマウス専用で、キーボード操作ができない
• 今どのスライドを見ているのかが分かりにくい
• スライド内の画像に適切な代替テキストが付与されていない

これらを解決するためには、次のような工夫が必要になります。

• 自動再生をオフにする、または停止ボタンを設置する
• 操作ボタンにaria-labelを付与し、スクリーンリーダーでも「次のスライドへ」などと分かるようにする
• インジケーター（●●●）にaria-currentを使い、現在位置を正しく伝える
• 画像に適切なaltを付ける（装飾の場合は空altにする）
• キーボードでも操作できるようにする（Tabキーや矢印キー対応）

完全にアクセシビリティ対応したカルーセルを実装しようとすると工数がかかる場合がありますが、「自動再生を止める」「ボタンを分かりやすくする」といった最低限の工夫を取り入れるだけでも、格段に利用しやすくなります。
このあたりはデザイン時にも意識をして作成をしましょう。

コーディング時にはライブラリを使うことも多いかと思いますが、その際にはしっかりアクセシビリティ対応しているものを最初から使用すれば楽に対応ができます。

背景動画・自動再生アニメーション

達成レベル：AA 参考：WCAG 2.0 2.2.2

サイトでよくある背景で常時ループ再生される動画や、動きの大きいアニメーションは、視覚過敏のある方などに負担になることがあります。
テキストと重なる場合もあり、アクセシビリティの観点では注意が必要です。

ただし、デザインや演出上、動画を使いたい場合もあるかと思います。
WCAGでは、「自動再生する動きのあるコンテンツは停止・一時停止・非表示にできる仕組みを用意すること」 が求められています。

これを踏まえると、再生・停止ボタンを設けたり、モーションを控えめにするといった工夫により、背景動画を使用しながらでもAAレベルを満たすことができます。

PDF資料

達成レベル：AA
参考：WCAG 1.1.1, 1.3.1, 2.4.6, PDFのアクセシビリティ

コーポレートサイト上では、細かい情報などはPDFで公開されるケースが多くあります。
しかし、PDFはそのままではスクリーンリーダーに対応しにくく、アクセシビリティの観点では課題となることがあります。特にグラフや表を多用した資料は、読み上げソフトで正しく内容を理解するのが難しくなる場合があります。

このため、アクセシブルな「タグ付きPDF」にすることが推奨されます。タグ付きPDFとは、見出しや段落、表といった構造情報をPDF内部に埋め込んだもので、スクリーンリーダーで適切に読み上げられるようになります。

ただし、その作成には専門知識や追加の工数が必要となり、作りによってはすべてのPDFに対応することは難しい場合もあります。

現実的な対応策としては、重要な情報をWebページとしても公開する方法があります。
PDFをそのまま配布する一方で、同じ内容をHTMLページに掲載しておけば、ユーザーは必要に応じてテキストとしても参照できます。
これでAAレベルであれば満たすことができます。


——
難しい部分もありますが、工夫次第でユーザーに優しいサイトに近づけます。
完璧を目指すより、まずはできることから少しずつ取り入れてみましょう！