リニューアルでアクセシビリティは、どこまで要件にしますか？
まず参照する基準を1つ決め、その中で対応する範囲を決めます。基準を決めずに「アクセシビリティに配慮する」と書くと、要件として機能しません。
ウェブアクセシビリティとは、目や耳、手の状態や利用する機器にかかわらず、同じ情報にたどり着けるようにすることです。対応の範囲は連続的で、どこまでやれば終わりという線が自動的には決まりません。だからこそ、発注側が線を引く必要があります。
決める順番は次の3つです。
- 参照する基準を決める（所要時間の目安: 情報源の確認を含めて2時間程度）
- 対応する範囲をページ単位で決める（同: サイトの構成を見ながら1時間程度）
- 制作会社に確認する項目を書き出す（同: 1時間程度）
参照する基準を先に決める
基準を1つ決めると、要件の書き方と受け入れの判断が両方決まります。国内のウェブアクセシビリティではJIS規格が、国際的にはW3Cが公開する基準が参照されることが一般的です。
ただし、規格の版や適用の考え方は更新されます。要件を確定させる前に、デジタル庁や日本産業標準調査会（JISC）の公表資料で、現在参照すべき基準とその版を確認してください。制作会社に「どの基準のどの水準を満たすか」を提案してもらう方法も取れます。
対応する範囲をページ単位で決める
全ページを同じ水準にする必要はありません。到達する人が多いページと、問い合わせや申し込みにつながるページを優先し、それ以外は段階的に広げる決め方が現実的です。
つまずきやすい点は、PDFや動画の扱いです。掲載しているPDFの中身までは、ページの作り方を直しても改善しません。PDFを対象に含めるかどうかを最初に決めておかないと、受け入れの段階で解釈が分かれます。
公的な情報源で最新の状況を確認する
自社サイトにどのような対応が求められるかは、事業の内容と規模によって異なります。義務の有無や範囲について、デジタル庁や所管の官公庁が公開している資料で確認することをおすすめします。
この記事では、要件として何をどう書くかという発注側の実務に絞って説明します。制度上の位置づけの確認は、公的な情報源で行ってください。
なぜ「配慮する」という要件では足りないのですか？
何をもって満たしたと判断するかが決まらないため、検収の基準にならないからです。測れる形に書き換える必要があります。
検収できない要件になる理由
「アクセシビリティに配慮する」という一文は、制作会社にとっても発注側にとっても判断できません。納品されたサイトを見て、配慮されたかどうかを判定する方法が無いためです。
結果として、次のどちらかが起きます。制作会社が独自の解釈で対応し、発注側の期待と食い違う。あるいは、実質的に何もされないまま納品される。どちらも検収の場で初めて判明します。
書き換えの方向は1つです。「どのページの」「どの項目が」「どういう状態なら満たす」と分解します。分解できない項目は、要件から外して別の方法で扱います。
表示速度の基準との違い
参考になるのは、表示速度の扱いです。表示速度には公式の数値基準があります。GoogleはCore Web Vitalsの良好の基準として、LCP（最大コンテンツの描画）を2.5秒以内、INP（次のペイントまでのインタラクション）を200ミリ秒以内、CLS（累積レイアウトシフト）を0.1以下と定めています。評価は実際の利用者データの75パーセンタイルで行われます。
出典: web.dev「Web Vitals」、Google Search Central
数値と測り方が決まっているため、「LCPを2.5秒以内にする」という要件は、そのまま検収の基準になります。
アクセシビリティには、これと同じ形の単一の数値はありません。項目ごとに「満たす」「満たさない」を判定する形になります。だからこそ、どの項目を対象にするかを発注側が列挙する必要があります。
つまずきやすい点は、自動チェックツールの結果を要件にすることです。ツールで検出できる項目は一部に限られ、点数が高くても実際には使いにくい場合があります。ツールの点数を唯一の基準にせず、項目ごとの確認と併用してください。次のセクションで、書ける項目を具体的に整理します。
要件として書ける項目は何ですか？
画像の代替テキスト、見出しの階層、フォームのラベル、色のコントラスト、キーボード操作の5つは、中小企業のサイトでも具体的に指定できます。いずれも判定の方法が明確で、検収の場で確認できます。
| 項目 | 要件の書き方 | 確認の方法 |
|---|---|---|
| 画像の代替テキスト | 内容を伝える画像に代替テキストを設定する。装飾目的の画像は空にする | 対象ページの画像を一覧で確認する |
| 見出しの階層 | 見出しを見た目ではなく階層で設定し、段を飛ばさない | ページの見出し構造を一覧で確認する |
| フォームのラベル | 入力欄ごとにラベルを対応づける | 入力欄を順に確認する |
| 色のコントラスト | 本文と背景のコントラスト比が基準を満たす | 配色の組み合わせごとに測定する |
| キーボード操作 | マウスを使わずに全ての操作ができる | 対象ページをキーボードだけで操作する |
この表を仕様書に添えれば、制作会社との解釈のずれが小さくなります。
代替テキストと見出しの階層
代替テキストは、画像の内容を文字で伝えるための設定です。要件として書くときは、対象を「内容を伝える画像」に限定し、装飾目的の画像は空にすると明記します。すべての画像に文字を入れると、かえって読み上げが煩雑になります。
見出しの階層は、見出しに見えるかどうかではなく、文書構造として正しく設定されているかです。文字を大きくしただけの行は見出しになりません。リニューアルでは新しく作り直すため、最初から階層を設計に含めれば追加の手間はほとんどかかりません。
フォームのラベルとエラー表示
フォームは最も優先度が高い箇所です。入力欄ごとにラベルを対応づけ、どの欄に何を入れるかが分かる状態にします。
あわせて、エラーの表示方法も要件に含めます。色だけで誤りを示すと、色の区別がつきにくい利用者に伝わりません。文字でも誤りの内容と該当の欄を示すよう指定してください。
色のコントラストとキーボード操作
色のコントラストは、参照する基準で必要な比率が定められています。要件には基準の名称と求める比率を書き、配色を決める段階で確認します。デザインが確定した後に指摘すると作り直しになるため、配色の提案を受けた時点で確認するのが実務上は早いです。
キーボード操作は、対象ページをキーボードだけで操作して確認します。つまずきやすい点は、独自に作った開閉式のメニューや画面上に重なる窓です。マウス前提で作られていると、キーボードでは開けない、あるいは閉じられない状態になります。この種の部品を使う場合は、要件に明記してください。
どこから着手すると効果が大きいですか？
問い合わせフォームと、閲覧数の多い上位ページから着手します。全ページを同時に対応するより、到達する人が多い経路を先に直すほうが効果が出ます。
この判断は、アクセシビリティに限った話ではありません。中小企業庁の2022年版中小企業白書では、Webサイトを含むデジタルツールを導入しても、その活用が売上や業務効率の改善につながっていないケースが多いことが示されています。同白書は、デジタル化の「導入」と「活用」の間にギャップがあることを課題として指摘しています。
出典: 中小企業庁「2022年版中小企業白書」第2節
対応したという事実ではなく、実際に使われる経路が改善されたかどうかで判断してください。
フォームを最優先にする理由
フォームは、サイトの中で唯一「操作できないと目的が達成できない」箇所です。読みにくいページは時間をかければ読めますが、送信できないフォームは代わりの手段がありません。
御社のサイトで問い合わせや資料請求のフォームが1つしかない場合、そのフォームが実質的にサイトの出口です。ここが操作できない利用者は、そのまま離脱します。
つまずきやすい点は、外部のサービスで作ったフォームを埋め込んでいる場合です。埋め込んだ部分は制作会社の作業範囲に入らないことがあります。フォームが外部サービスかどうかを確認し、要件の対象に含めるかを明示してください。
閲覧数の多いページから広げる
フォームの次は、閲覧数の上位から順に広げます。アクセス解析で上位10ページを出し、その範囲を最初の対象にする決め方が扱いやすくなります。
上位のページは、リニューアルでも作り直す対象になっていることがほとんどです。新しく作る部分にアクセシビリティを織り込めば、既存ページを個別に直すよりも手間が小さく済みます。
残りのページは、次回の更新に合わせて順次対応する計画にします。対応の予定をページ単位で持っておくと、どこまで進んだかを社内で説明できます。