プロジェクトの各段階で、誰が何をするか
アクセシビリティを最後に回さないために、計画に組み込み、デザインシステムの部品から作り、スプリントごとに確認し、経営層からコンテンツの書き手までで分担し、公開後も保つ方法
要点:計画では、目標の適合レベルを完成の定義に入れ、責任者、予算、研修を決めます。制作では、アクセシブルな共通部品を先に作り、どのページもそこから組み立てます。テストは公開前の1回ではなく、CIの自動チェックと手作業の確認で毎スプリント行います。公開後も、新しいコンテンツとリリースの確認を続けます。
01
使う場面
ある慈善団体が、制作会社と一緒にWebサイトを作り直しています。寄付、ボランティアの申し込み、イベントのページを、2週間のスプリント6回で作り、12週間後に公開する計画です。契約にはWCAG 2.2のレベルAAとあります。前回の作り直しでは、最初のアクセシビリティ診断が公開の2週間前でした。見つかった60件の多くは共通のヘッダー、入力欄、ダイアログにあり、スプリント2で完成したはずのコードを作り直すために、公開は1か月遅れました。
今回、団体のデジタル担当者は、初日からアクセシビリティを計画に入れ、両方のチームの一人ひとりが自分の担当を分かっている状態にしたいと考えています。
02
計画:目標、責任者、完成の定義
W3Cの計画の手引きは、最初に決めておくこととして、次を挙げています。
- 目標: 方針には少なくとも、どのアクセシビリティの規格に、いつまでに適合するかを書きます。これを契約と完成の定義の両方に入れます。適合レベルは法令や契約で決まることもあります。レベルが何を求めるかは、ページがWCAGに適合するための条件で扱います。
- 責任者: W3Cは、アクセシビリティの実現を特定の人に割り当て、職務の内容に含めるよう勧めています。そうすれば、その人は作業の時間と研修を得られます。目標と日程がぶつかったときに決めるのは、指名された1人です。
- 予算: レビュー、研修、診断、利用者とのテストに、それぞれ日程上の時間を取ります。診断で見つかった問題を直す時間がなければ、手に入るのはレポートだけで、サイトは良くなりません。
- 研修: 役割ごとに必要なものを用意します。W3Cは、デザイナー向けのアクセシブルな視覚デザイン、開発者とテスト担当者向けのアクセシブルなコーディング、コンテンツの書き手向けのアクセシブルな文章の書き方を挙げています。
- 購入するもの: 購入したコンポーネント、ウィジェット、システムもサイトの一部です。契約の前にアクセシビリティを確かめます。方法は購入の前に、ベンダーのVPATをどう読み、何を尋ねるかで説明しています。
完成の定義は、目標をストーリーごとの確認に置き換えたものです。短く、すべてのストーリーで同じものを使います。
- デザインシステムのコンポーネントで作られている。新しいコンポーネントを足す場合は、そのアクセシビリティのテストも足している。
- CIの自動チェックで、新しい問題が報告されていない。
- すべてのコントロールをキーボードだけで操作でき、順番が画面と一致し、フォーカス表示が見える。
- チームで決めたスクリーンリーダーとブラウザーで、そのストーリーのタスクを最後まで行える。
- 200%の拡大表示と、幅320 CSSピクセルで使える。
- 見出し、リンクの文言、ラベル、代替テキストを確認している。
03
制作:ページより先に部品を作る
完成したサイトの診断で見つかる問題の多くは、少数のコンポーネントが全ページで同じように壊れているものです。だから、共通の部品を、それを使うページより先に作って確かめます。W3Cの実装の手引きは、アクセシブルなコンテンツを作りやすくするために、アクセシブルなテンプレートとコンポーネントの開発を優先するよう勧め、計画の手引きは、アクセシブルなコンポーネントのライブラリーを保つことを開発の役割としています。
- ボタン: コンポーネントライブラリーの標準をHTML標準の
buttonにして、Tabキーで到達できないdivのボタンのようなdivがどのページにも入らないようにします。 - フォーカス: フォーカス表示をデザインシステムのトークンに1つ用意し、フォーカス表示が見えない独自デザインのボタンのように、リセットでページごとに消えることがないようにします。
- 入力欄: ラベルがない・表示と食い違うフォームの入力欄にあるように、共通の入力欄コンポーネントでラベルを必須のプロパティにし、
forとidを一緒に生成します。 - ダイアログ、メニュー、タブ: 操作を伴う部品は、キーボードの動作をページではなくコンポーネントに組み込みます。
デザイナーが渡すのは絵だけではありません。W3Cの成熟度モデルは、開発者に渡すデザインの成果物にアクセシビリティの情報と注釈を含めることを挙げています。見出しの構造、フォーカスの順番、各コントロールの名前と状態などです。コンテンツの書き手は、部品では決められない見出し、リンクの文言、代替テキストを書きます。
04
テスト:最後ではなく、毎スプリント
W3Cは、リスクと費用を減らすために問題を早く見つけて直すこと、確認を別に行うのではなく、チームがすでに行っているテストに組み込むことを勧めています。確認をどこに置くかは、プロジェクトの進め方で変わります。
| 進め方 | アクセシビリティを確認する時期 | 遅れて見つかったときの負担 |
|---|---|---|
| ウォーターフォール | 要件とデザインを目標に照らして確認し、制作のあとにテスト工程を1回 | 共通部品の問題が、全ページで使われてから見つかる。デザイン、コード、テストをやり直すことになる |
| アジャイル | ストーリーごとの完成の定義で毎スプリント、節目ではより広く | 問題を作ったスプリントのうちに見つかり、コードが新しいうちに直せる |
| 継続的デリバリー | 変更ごとに自動チェック、リリースの間に決まった間隔で手作業の確認 | 変更は自動チェックを通って公開され、残りは手作業の確認で拾う |
どの進め方でも、3種類のテストが別々の役割を担います。
- CIの自動チェック: プルリクエストごとに行います。名前の抜け、誤ったARIA、コード上のコントラストなどを、手間をかけずに毎回見つけますが、それ以外の多くは判定できません。その範囲は自動テストではカバーできないことで説明しています。
- 手作業の確認: 毎スプリント、新しいコンポーネントと主要なタスクについて、キーボードだけ、スクリーンリーダー、拡大表示とリフローで確かめます。フォーカスの順番、読み上げ、タスクを最後まで行えるかは、ここで確認します。
- 回帰テスト: すでに動いているものを守ります。コンポーネントのテストで、変更のたびに名前、ロール、状態、キー操作を確かめ、リリースの前には主要なタスクを手作業でもう一度試します。リリース判定を置けば、既知の先へ進めない問題が、誰も止めないまま公開されることはありません。
これらのどれでも見つからない問題は、障害のある人とのテストで見つかります。最初の試作から計画に入れておく価値があります。詳しくは障害のある人とのテストでわかること、監査ではわからないことで扱います。
05
誰が何をするか
W3Cの役割の対応表(ARRM)は、アクセシビリティに関わる役割を挙げています。計画の手引きは、購買と受け入れテストを加えています。プロジェクトでは、それぞれが次の部分を受け持ちます。
| 役割 | 受け持つこと |
|---|---|
| 経営層と統括 | 方針、目標とその期限、予算、責任者の指名 |
| プロダクトオーナー | 受け入れ条件、アクセシビリティの不具合の優先度、チーム全体で合意する完成の定義 |
| プロジェクトマネージャー | アクセシビリティの作業とテストを含めた見積もりと日程 |
| UXリサーチャー | 調査とテストへの障害のある参加者の参加 |
| UXデザイナー | 構造、フォーカスの順番、キーボード操作と、開発者向けの注釈 |
| ビジュアルデザイナー | コントラスト、フォーカス表示、色だけに頼らない状態の表し方 |
| コンテンツの書き手 | 見出し、リンクの文言、代替テキスト、キャプション、平易な言葉 |
| フロントエンド開発者 | 意味に合ったHTML、アクセシブルなコンポーネント、名前と状態 |
| バックエンド開発者 | エラーメッセージ、制限時間、ページに出せる内容を左右するデータ |
| 品質保証 | 自動と手作業のテスト、回帰テスト、アクセシビリティの不具合の管理 |
| 購買と契約 | 購入するものすべての契約に入れるアクセシビリティの要件 |
| サポート | 利用者がバリアを報告できる窓口と、直すチームへの連絡経路 |
06
公開後:新しいコンテンツとデグレード
公開後は、プロジェクトのチームがいないままサイトが変わり続けます。W3Cは、コンテンツの変更が新しい問題を生むことがあるとして、次のことを勧めています。
- 公開時に確認する: 公開の手順にアクセシビリティの確認を入れ、問題が出るリスクを減らします。CMSの機能でも、書き手自身の見直しでも確認します。
- 定期的に見直す: コンテンツが変わっていくのに合わせて定期的にレビューし、問題ごとに原因を探ります。研修が足りないのか、CMSの変更か、公開の手順が分かりにくいのか、などです。
- リリースのたびに試し直す: CIの自動チェックと回帰テストを、リリースごとに続けます。成熟度モデルの最も高い段階には、保守のためのリリースもアクセシビリティを確認し直すことが含まれています。
- 声を聞く: 利用者からの意見を求め、窓口の担当者が対応できるよう研修し、問題を伝えてくれた人には修正の見込み時期を知らせます。利用者がその窓口を探すのは、アクセシビリティ方針のページです。書き方は掲載されていない、または中身のないアクセシビリティ方針を参照してください。
07
実例
慈善団体の12週間を、この方法で計画しました。
| 時期 | 行うこと | 担当 |
|---|---|---|
| スプリント0 | WCAG 2.2 AAを契約と完成の定義に記載。デジタル担当者を責任者に指名。役割ごとに半日の研修。スプリント3と6に外部レビューを予約 | 経営層、プロダクトオーナー、プロジェクトマネージャー |
| スプリント1と2 | ボタン、入力欄、ダイアログ、メニュー、フォーカスのトークンを作り、どのページで使うよりも先にキーボードとスクリーンリーダーで確認。デザインに注釈 | デザイナー、フロントエンド開発者、品質保証 |
| スプリント3から5 | 部品からページを組み立てる。プルリクエストごとにCIのチェック。ストーリーごとのタスクを手作業で確認。スプリント3の外部レビューで寄付と申し込みを確認 | 開発者、コンテンツの書き手、品質保証 |
| スプリント6 | 主要なタスクの全体レビュー。回帰テスト。リリース判定:未解決の先へ進めない問題がないこと | 品質保証、外部のレビュー担当、プロダクトオーナー |
| 公開後 | CMSで公開時の確認。四半期ごとにアクセス数上位10ページを見直し。アクセシビリティ方針のページからメールで意見を受け付け | コンテンツの書き手、サポート、責任者 |
結果として、スプリント3のレビューで、フォーカスを元に戻さないダイアログが見つかりました。使っていたのはまだ1ページだけで、1日で直りました。公開前のレビューで見つかったのは9件で、先へ進めない問題も共通部品の問題もなく、サイトは予定どおり公開されました。公開後の最初の四半期には、公開時の確認で、代替テキストのない画像14枚を公開前に止めました。
08
よくある間違い
- 公開前に1回だけテストする。 すべての問題が、最も直しにくい時期に見つかります。上のように完成の定義に確認を入れ、毎スプリントテストしてください。
- 開発者に任せきりにする。 コントラスト、見出し、リンクの文言、キャプションを決めるのは、デザイナーとコンテンツの書き手です。上の表のように、役割ごとに受け持ちを決めてください。
- 部品より先にページを作る。 ページの中で直しても、部品は壊れたままで、次のページにまた出ます。ラベルがない・表示と食い違うフォームの入力欄が入力欄コンポーネントで直すように、共通の部品を先に直して確かめてください。
- CIが通れば完了とみなす。 キーボードやスクリーンリーダーの利用者が最後まで進めないページでも、自動チェックは通ります。手作業の確認を完成の定義に残してください。理由は自動テストではカバーできないことにあります。
- 公開で終わりにする。 新しいコンテンツや後のリリースは、新しい問題を持ち込みます。公開時の確認、回帰テスト、意見の窓口を続けてください。
- 指摘だけ直して、進め方を直さない。 診断のあとは、どの指摘から直すか、いつ作り直しを選ぶかの順番で直し、それぞれがなぜ起きたかを確かめて、次のプロジェクトで繰り返さないようにします。
09
規格の定め
特定のプロジェクトの進め方を求めるアクセシビリティの規格はありません。WCAG、EN 301 549、Section 508、JIS X 8341-3が定めるのは結果が満たすべきことで、そこまでの進め方は助言です。
- W3C WAI「Planning and Managing Web Accessibility」(助言): 上で引いたPlan、Implement、Sustainの活動です。規格と期限を書いた方針、担当の明確化、予算の確保、役割ごとの研修、デザインと開発の全体を通じた評価、公開後の監視を挙げています。
- W3C「Accessibility Roles and Responsibilities Mapping」(助言): 上の表のもとにした役割を、業務分析やコンテンツの作成から統括まで挙げています。作業を分けるための手引きで、要件ではありません。
- W3C Accessibility Maturity Model(W3Cグループノート、助言): ICT開発ライフサイクルの側面では、着想からデザイン、開発、テストまで、ICT開発のライフサイクル全体でアクセシビリティを考えるべきだとし、項目の例として、アクセシビリティを製品のリリース判定に含めることや、フルリリースを経ずに変更を届けるアジャイルの開発でのテスト手順と間隔を文書にすることを挙げています。最も高いOptimizeの段階では、自動のアクセシビリティテストがCI/CDのパイプラインに組み込まれ、保守のためのリリースも確認し直されます。
- 日本(指針): 総務省の「みんなの公共サイト運用ガイドライン(2024年版)」は、公的機関向けに同じ循環を示しています。年度ごとの取組(ガイドラインの更新、職員研修、検証、ユーザー評価、改善)、日々の運用(ページ作成時の対応、公開前のチェック、利用者の意見収集と対応)、外部発注(方針と仕様書、設計段階、デザイン画、HTMLのひな形、個別ページ、公開直前の複数段階での検証、JIS X 8341-3:2016に基づく試験、試験結果を確認したうえでの検収)です。公開前のチェックでは、作成者、課内の承認者、公開を承認する部署など、できるだけ多くの時点で、複数の方法を組み合わせて確認するよう求め、チェックツールやCMSのチェック機能ではすべてを機械的に判定できないと注意しています。
10
制限
この記事は作業の分け方を扱うもので、目標の適合レベルは決めません。それは法令、契約、組織の方針が決めます。完成したサイトが適合するかどうかも決めず、サイト全体をWCAGで評価し、根拠を示せる結果を出すような試験が必要です。役割は出発点です。小さなチームでは1人が4つの役割を兼ねることもあり、大切なのは、どの部分にも担当者がいることです。CIのチェックで見つけられること、見つけられないことは、自動テストではカバーできないことにあります。
11
用語
- 完成の定義
- 作業を完了とする前に必ず通す確認の一覧。書き出して、すべてのストーリーに同じものを使う。
- デザインシステム
- 製品のページを組み立てる共通のコンポーネント、トークン、指針。ここで直せばすべてのページに反映される。
- 回帰テスト
- 変更のたびに繰り返すテスト。修正済みの機能や動いていた機能が、後の変更で壊れていないかを確かめる。
- リリース判定
- リリースの前に必ず通す確認。既知の先へ進めない問題が、誰も止めないまま公開されることを防ぐ。
12
出典とガイド
- 参考 Planning and Managing Web Accessibility: Plan(W3C WAI): Create accessibility policy、Assign responsibilities、Determine budget and resources(新しいタブで開きます)
- 参考 Planning and Managing Web Accessibility: Implement(W3C WAI): Build skills and expertise、Assign tasks and support delivery、Evaluate early and regularly、Prioritize issues(新しいタブで開きます)
- 参考 Planning and Managing Web Accessibility: Sustain(W3C WAI): Monitor websites、Incorporate user feedback(新しいタブで開きます)
- 参考 Accessibility Roles and Responsibilities Mapping(W3C WAI): Roles Involved in Accessibility(新しいタブで開きます)
- 参考 W3C Accessibility Maturity Model(W3Cグループノート、2025年11月4日): 3.2 ICT Development Lifecycle(新しいタブで開きます)
- 参考 総務省「みんなの公共サイト運用ガイドライン(2024年版)」: 6.2 年度ごとに計画し実行する取組、6.3 日々の運用における取組、6.4 外部発注等における取組(新しいタブで開きます)
関連するガイド
この記事は実務の進め方を、再現した例で説明するものです。法的な助言ではなく、特定の顧客についての指摘でもありません。