企画・要件定義

アクセシブルなウェブサイトを構築する場合、ウェブサイトの目的を満たすコンテンツの内容や機能を考える企画初期の段階から、アクセシビリティに関する要件を織り込んでおく必要があります。

アクセシブルなウェブサイトに関するプロジェクトを計画する場合、スケジュールや工数、見積に特に影響を与える代表的な要素があります。ビジュアル（視覚的要素）に関するもの、内容に関するもの、機能に関するものに大きく分けられます。
主なものには以下があげられます。

色

制作依頼開発・運用

色は、ウェブサイトにおいて、企業のブランディングイメージやコンテンツのイメージを伝える非常に重要な要素の1つです。色を使って、さまざまな視覚的情報を発信しているので、色の違いを、ユーザーが視覚的に認識できることが重要になります。

しかし、ユーザーによって、色の見え方はさまざまです。
ユーザーの色覚特性やロービジョンといった身体的条件だけでなく、閲覧環境による差異（例えば室内光と屋外光による光量や色温度などによっても変わります。 そのため、WCAGでは、色の組み合わせを指定するのではなく、相対輝度によるコントラスト比を定めることで、どのようなユーザーや環境でも文字やオブジェクトの形が把握できるようにしています。

色について検討する場合、自社、あるいはクライアント固有のデザインガイドラインで規定されている色との条件の確認も必要です。プロジェクトのビジネス要件上、使用する色が指定されている場合もあります。 アクセシビリティの問題が発生する可能性がある場合は、そのままあきらめてしまわず、

• ウェブサイトなどのデジタル環境にあわせたデザインガイドラインの調整が可能か
• プロジェクト固有でのルール策定が可能か

などのように、さまざまな観点から色に関する要件の調整が可能かを検討するとよいでしょう。

動き続けるUI

制作依頼開発・運用

この項では、動き続けるカルーセル、GIFやWebGL（Web Graphics Library）などの技術を利用したアニメーション、背景動画などのような、「ビジュアル表現で、画面で動き続ける要素」について説明します。動きがあれば、画像に限らずテキストでも対象になります。

ウェブサイトを魅力的に見せたり、ウェブページの特定の場所に視線を誘導するためなど、自動再生するカルーセルやアニメーションといった動き続けるUIの利用を検討する場合、以下の二点について必ず確認してください。

1. 光過敏性発作（Photosensitive epilepsy、PSE）を起こすような、閃光や点滅の表現が使われていないか
2. 動き続けるカルーセルやアニメーションを、ユーザーが自分の望むタイミングで、停止や再生が操作出来る機能があるか

上記はWCAGやJISにおいて「非干渉」と呼ばれる規定の一部に該当します。「非干渉」とは、ウェブサイトの利用ができなくなる重大な問題を指す言葉です。ユーザー自身では回避が出来ませんので、問題が起きないようにしてください。もし既存のコンテンツで問題がある場合は、最優先で改修するようにします。

閃光・点滅を含む表現を許容するかによって、制作するウェブページの構成や原稿、動画のハーディングチェック費用や、全体スケジュールが変わりますので、事前に動画コンテンツの原稿担当や動画制作担当と、条件についての認識の統一と、対応が必要になった場合のフローなどを検討しておくようにします。

※ 動画を公開する媒体（テレビなど）によっては別途ガイドラインがあり、映像制作会社・ハーディングチェック専門業者が対応する範囲となります。事前に公開する環境や条件をクライアントに確認し、ウェブサイト制作側との作業範囲を切り分けるようにします。

コンテンツ（原稿）

制作依頼

ウェブページがアクセシブルかを判断する条件には、コンテンツの読みやすさや理解しやすさが含まれます。レベルAAまでの達成基準で求められる読みやすさや理解しやすさは、簡易な表現や用語を使うといったことではなく、コンテンツの情報がユーザーに伝わりやすい構造になっているか、伝わりやすい構造のための見出しや説明が適切に用意されているかで判断されます。

たとえば、ウェブページに長文のコンテンツが掲載されている場合、見出しや段落などがなく、ずっと文字が続いていたら、読みやすいとは言えません。また、見出しや段落に分けられていても、タイトルが数字だけだったり、段落の内容を適切に表していなければ、やはりわかりやすくはありません。

情報が適切に構造化されていること、情報のまとまりに適した見出しが用意されていることは、コンテンツの原稿の段階から準備されている必要があります。

代替コンテンツ

制作依頼

ウェブページの情報は大きく二つに分けられます。テキストと、テキスト以外です。テキスト以外のコンテンツには画像やPDF、動画などさまざまなものがありますが、総称して「非テキストコンテンツ」のように達成基準では呼びます。

非テキストコンテンツが持つ情報は、そのままでは機械に伝わらない・伝わりにくい場合があります。そのため、非テキストコンテンツの情報を、テキストによって表現し、機械に伝わるようにすることが求められます。（テキストによる代替のようにも言います。） また、動画のように、映像で伝えられている情報は、テキスト化するだけではなく、音声でも情報を伝えるようにすることを求めている場合もあります。

テキストによる代替だけではなく、テキスト以外による代替などを総称して「代替コンテンツ」と言います。

画像

代替テキストとは、なんらかの理由で画像の情報が視覚的に伝わらない場合に、代わりに表示されるためのテキストを指します。

例えば、全盲の視覚障害を持つユーザーは、ウェブサイトを音声で読み上げるスクリーンリーダーという支援技術を使っています。しかし、画像ファイルはスクリーンリーダーでそのまま読み上げることができません。画像がもつ情報をテキストという形で表すことで、スクリーンリーダーで読み上げることができます。 また、インターネット接続が不安定で画像が読み込まれないといった、環境による原因で表示されない場合にも、画像の内容を伝える役割を果たします。

代替テキストは、画像の制作コンセプトや、画像が表している情報を理解している担当者、例えば原稿担当者が作成するのが望ましいですが、代替テキストとして適切な書き方を知っているアクセシビリティの知見のある制作会社やアクセシビリティの専門家に依頼してもよいでしょう。

企画・要件定義の段階では、画像の代替テキストの内容が確定していなくても問題ありません。代替テキストを誰が作成するのか、作成に必要な情報はいつ確定し作成担当者に渡せるのか、作成された内容についてのチェックを誰が行うかといった進め方と方針を確認し、工数やスケジュールをしっかり確保しておくようにします。

※ 開発・運用 代替テキストの具体的な対応方法や例は、「情報設計・コンテンツ準備」> 代替コンテンツを参照

PDF

制作依頼開発・運用

PDFは電子文書のためのフォーマットで、OSやアプリケーションが異なっても表示が左右されないことから、広く活用されています。ウェブサイトにPDFファイルが含まれる場合、ウェブページと同様に、PDFもアクセシビリティ施策の対象となります。

PDFをアクセシブルにするためには、大きく分けて二つの方法があります。

• 作成済のPDFを、編集ツールを使ってアクセシブルになるよう調整する
• PDFと同等の情報を、アクセシブルなフォーマット（HTMLやテキストファイルなど）で提供する

どちらの方法を選ぶかで、工数とスケジュールが大きく変わります。

また、PDFの代替コンテンツを用意する場合、どのPDFに対するものかをユーザーからわかるように用意する必要があります。PDFに対する代替コンテンツを置けるように、ウェブサイトやウェブページの構成、デザインの用意をあらかじめ見積に織り込んでおくようにしましょう。

音声・動画

制作依頼開発・運用

音声ファイル（音声だけで映像を含まないファイル）や、動画ファイルで音声のみで描写されている内容や、映像のみで描写されている内容についても代替コンテンツを準備します。

音声に対しては、字幕やテキストによる説明を作成します。テキストによる説明は、動画に隣接する位置にウェブページの本文として記載したり、テキストによる説明を別ページで作成するといった方法が考えられます。

映像に対しては、音声解説を代替コンテンツとして準備します。目標とする適合レベルがAAの場合は、テキストによる説明だけではなく、音声解説が必須になります。

代替コンテンツは動画の制作と並行して準備・作成することが重要です。特に音声解説は、動画の制作が始まって、コンテやシナリオの制作が進んでから追加することになると、これまでの作業が大きくやり直しになります。 プリプロダクション、ポストプロダクションといった動画の制作工程のいずれでも、代替コンテンツに関する作業が必要ですので、動画制作の企画段階から代替コンテンツの制作を前提として進めます。

UIパーツ、ライブラリを選定する

制作依頼開発・運用

コンテンツの目的に合った機能やUIパーツやライブラリを選択するにあたり、あらかじめ基本的なアクセシビリティ要件を満たしているものを採用するようにします。

アクセシビリティの問題があるUIパーツやライブラリを利用すると、利用された箇所すべてにアクセシビリティの問題が発生してしまうことになります。問題を発生・拡大させないために、ライブラリやパーツの状態でのアクセシビリティの問題がないことを実際にチェックすることが重要です。 アクセシブルなUIライブラリであると記載されていても、実際にはアクセシブルではないケースがあるためです。 また、ウェブサイトの要件から、アクセシブルなUIコンポーネントに対して、機能追加をしたり、ビジュアルの追加調整が必要な場合もあります。

第三者サービス利用の有無を確認する

制作依頼開発・運用

近年のウェブサイトでは、Google マップなどの地図情報サービスやYouTubeのような動画プラットフォームなど、自社あるいはクライアント以外から提供されるサービスを利用してコンテンツをリッチにすることは当たり前になっています。自社やクライアント、あるいは制作会社自身が提供していないサービスのことを第三者サービスと総称します。

第三者サービスを利用する場合、アクセシブルなサービスを選択するようにします。UIパーツやライブラリの場合と同じく、サービスがアクセシブルかをチェックするようにしましょう。また、クライアントから利用する第三者サービスが指定されている場合も同様です。

第三者サービスにアクセシビリティの問題がある場合、他の問題ないサービスに変更できないか検討しましょう。ビジネス要件などで変更ができない場合、

• 第三者サービスのオーナーに対して改修が可能かを打診する
• 代替コンテンツを作成する
• アクセシビリティ施策の対象外とする

のいずれかを検討します。

第三者サービスが改修されない場合、代替コンテンツの用意を検討します。具体的な例をあげます。

• 動画配信プラットフォームの動画をウェブページで読み込んでいて、動画に字幕（キャプション）が用意されていない場合は、ウェブページにキャプションデータをアクセシブルなフォーマットで別途用意する。
• 地図情報サービスによってウェブページ上に地図が表示され、目的地までの行き方が図示されているが、代替テキストが用意されていない場合は、地図情報サービスが表す目的地までの行き方の情報を本文テキストなどで用意する。

※第三者サービスのコンテンツに代替テキストを追加することが技術的に可能な場合もありますが、地図情報に含まれる情報は多量なことが多く、代替テキストではなくウェブページの本文テキストとするほうが好ましい対応となります。