どの指摘から直すか、いつ作り直しを選ぶか
診断の指摘を、タスクへの影響、影響を受ける人、起きている場所、修正の手間で並べる方法と、修正か作り直しかの判断、開発者がそのまま対応できる指摘の書き方
要点:最初に直すのは、主要なタスクを最後まで進められなくする問題と、共通のテンプレートやコンポーネントを1か所直せば全体が直る問題です。次に操作の手間を増やす問題、最後に煩わしいだけの問題を直します。画面全体を変える必要があるなら、進めなくなる問題だけを先に直し、別の手段を用意したうえで作り直しを計画します。
01
使う場面
Riverside Leisureは4か所のプールを運営し、Webサイトで水泳教室とレーンの予約を受け付けています。15ページを対象にした診断で、40件の指摘が見つかりました。夏のスケジュールの公開まで、開発チームに残された時間は2スプリント、4週間です。来年には新しい予約システムへの移行も予定されています。
プロダクトオーナーは、診断を受けた誰もが口にする質問をします。「どこから手を付ければいいのか」。レポートは指摘をWCAGの達成基準の番号順に並べていて、先頭は1.1.1です。この順番は規格の中での位置を表すだけで、教室を予約しようとしている人に何が起きるかは表していません。
02
進め方
指摘ごとに利用者への影響を見て、次に1回の修正でどれだけ解消できるか、どれだけ手間がかかるかで並べます。W3Cの実装の手引きも、影響が大きく解決しやすい問題から取り組むよう勧めています。
タスクへの影響を見る。 指摘ごとに、その問題に出会った人がどうなるかを考えます。
- 進めない:最後まで進めず、ページにほかの手段もない。パズルを解く以外に通れないCAPTCHAのようなログインや、フォーカスが抜け出せないエディターや入力欄は、先へ進めない問題です。
- 手間が増える:最後までは進めるが、余計な操作や推測、人の手助けが要る。背後にフォーカスが残るモーダルでは、閉じたときにフォーカスがページの先頭に戻り、キーボード利用者はナビゲーションをTabキーでたどり直すことになりますが、目的の場所には戻れます。
- 煩わしい:最後まで進めるが、余計な読み上げなどが挟まる。リンクの横のアイコンの文字が、リンクと同じ内容でもう一度読まれる場合などです。
影響を受ける人を確かめる。 その問題にどの利用者が出会うかを、影響を受ける利用者の区分で書き出します。EN 301 549の附属書Bは、各要件がどの機能的性能基準を支えるかを対応付けているため、満たしていない要件の行を見れば、影響を受ける人が分かります。複数の区分に影響する問題や、ほかに頼れる手段がない人に影響する問題は、順位を上げます。
場所で重みを付ける。 同じ問題でも、主要なタスクの中にあれば、過去のお知らせのページにあるより優先します。W3Cの暫定修正のページは、登録、検索、送信、購入などの主要なタスク(途中の手順をすべて含む)、トップページのようによく使われるページ、障害のある人に関係の深い内容、利用者から指摘を受けた内容を挙げています。「よく使われる」は推測でなく、アクセス解析の数字で判断します。
原因の場所をたどる。 問題のあるコードがどこにあるかを確かめます。ラベルのない入力欄が30か所あっても、ラベルがない・表示と食い違うフォームの入力欄のように、原因は入力欄のコンポーネント1つかもしれません。そのコンポーネントを直せば、30か所も、これから作るフォームもまとめて直ります。件数を数える前に原因ごとにまとめ、1回の修正で何件が解消するかを数えます。
修正の規模を見積もる。 修正が何を変えるかで分けます。
- スタイル:CSSだけの変更。フォーカスの枠や色など。修正も再確認も、たいてい最も手軽です。
- マークアップ:HTMLやARIAの変更。ラベルと入力欄の関連付けなど。画面上は変わらないことが多く、デザインの承認が要りません。
- 動作:スクリプトやサーバーの変更。フォーカスの管理や、CAPTCHAをやめてサーバー側で試行回数を制限する変更など。確認に手間がかかり、別のチームが必要になることもあります。
そのうえで、修正が利用者の見る画面を変えるかを確かめます。見えるラベルの追加、ボタンの移動、手順の削除は、デザインや文言の承認が要り、利用者への告知が必要な場合もあるため、コードの量から想像するより時間がかかります。
外からの要請を加える。 診断の外にある、急ぐべき理由を書き添えます。利用者からの苦情や問い合わせ、契約の期日、特定の問題を挙げた通知、公開が求められている方針などです。日本では、障害のある人から申し出があれば、負担が過重でない範囲で合理的配慮を提供することが、事業者にも義務付けられています(障害者差別解消法の改正とWebサイト)。事実と日付を記録し、法的に何を意味するかの判断は弁護士に任せます。
順番と期日を決める。 主要なタスクで先へ進めない問題を最初に置き、サイト全体に効く手軽な修正をその横に並べます。どちらも、作業1日あたりで取り除けるバリアが最も多いからです。次に主要なタスクの手間を増やす問題、その他の手間を増やす問題と続け、煩わしいだけの問題は最後にまとめて直します。作り直しまで待つ問題には、暫定修正と期日を付けます。修正すれば残りの状況も変わるため、リリースのたびに順番を見直します。
03
修正か、作り直しか
指摘によっては、直すより、その部分を作り直すほうが筋がよいこともあります。判断はサイト全体ではなく、部分ごとに行います。
| 観点 | 今直す理由になる | 作り直す理由になる |
|---|---|---|
| 広がり | 一部のコンポーネントやページだけ | ほとんどのテンプレート、またはシステム自体に同じ問題 |
| コード | 構造が明快で担当者がいて、よく変更している | 自動生成やベンダー固有で、安全に変更できる人がいない |
| その間の利用者 | 主要なタスクで先へ進めず、待てない | 作り直しまで別の方法で回避できる |
| 体制 | 今のスプリントで直せる小さな修正 | 1件の修正に、作り直すのと同じくらいの手間がかかる |
| 先の予定 | その部分を今後何年も使う | 置き換えの予算と時期がすでに決まっている |
多くの場合、答えはその両方です。先へ進めない問題は今直し、作り直しを計画し、その間は別の手段を用意します。W3Cの実装の手引きは、CMSのようにまもなく入れ替えるツールやシステムに関わる問題の優先度を下げることを挙げ、暫定修正のページは、新しいバリアを生まないよう、作り直し中の部分も対象に含めています。期日のない作り直しは計画とはいえません。完成するまで、古い部分のバリアは残り続けます。掲載されていない、または中身のないアクセシビリティ方針にあるように、残っている問題とその回避方法をサイトの方針のページに一つずつ書いておきます。
04
開発者がそのまま対応できる指摘
順番を決めても、指摘ごとに打ち合わせが必要では進みません。開発者がそのまま対応できる指摘は、3つの問いに答えています。
- どこで: ページのURL、コンポーネント、問題が起きる状態(「予約ページの手順2、備考欄のエディター、入力後」)と、そこに至る操作。そのコンポーネントを使うすべてのページで起きるかどうかも書きます。
- 何が: 何が起き、誰が困り、どの達成基準を満たしていないか(「Tabキーを押すとエディターから出ずに行がインデントされ、キーボード利用者が「予約を確定」に届かない。達成基準2.1.2 キーボードトラップなし」)。再現に操作が要る問題には、スクリーンショットや短い録画を添えます。
- どう直すか: コードとしての修正方法と、修正例へのリンク、修正の確認方法(「Tabキーの横取りをやめるか、Escapeキーで解除できるようにして画面に表示する。その後、TabキーとShift + Tabでエディターから出られることを確認する」)。
「スクリーンリーダーで使えない」だけでは、3つのどれにも答えていません。EaseWebのサンプルレポートは、指摘ごとに場所、テストで確認した内容、修正方法、根拠となる記録、サイト全体の問題かどうかを書いています。
05
実例
チームはまず40件の指摘を原因ごとにまとめ、15件の修正に整理しました。順番を決めたのは、このうち次の8件です。
| 修正 | 影響と対象 | 順番 |
|---|---|---|
| 共通のCSSリセットがフォーカスの枠を消している | 全ページでキーボード利用者の手間が増える。CSSのルール1つ | 1、スプリント1:1行でサイト全体に効く |
| パスワードを2回間違えるとCAPTCHAが出て、ほかの手段がない | スクリーンリーダー利用者や、ゆがんだ文字を読めない人がログインできず、予約できない | 2、スプリント1:主要なタスクで先へ進めない。サーバー側の試行回数制限に置き換える |
| 共通の入力欄コンポーネントのラベルがただのテキスト(5つのフォームで18か所) | 予約を含むすべてのフォームで、スクリーンリーダーや音声操作の利用者の手間が増える | 3、スプリント1:マークアップの変更1つで、見た目は変わらない |
| 予約の備考欄のエディターが、Tabキーをインデントに使っている | キーボード利用者が予約の手順を先へ進めない | 4、スプリント1:主要なタスクで先へ進めない |
| 共通のダイアログコンポーネントが、フォーカスを背後に残す(4ページ) | 教室の回を選ぶキーボード利用者の手間が増える | 5、スプリント2:動作の変更で、4ページすべてで再確認する |
| お知らせのページの文字のコントラストが低い | 弱視の人の手間が増える。アクセス全体の2%のページ | 6、スプリント2 |
| リンクの横のアイコンの文字が二重に読まれる(6か所) | スクリーンリーダー利用者には煩わしい | 7、スプリント2の後にまとめて |
| スケジュールが旧CMSから書き出した構造のないPDF | スクリーンリーダー利用者の手間が増える。新しいシステムで書き出し自体がなくなる | 作り直し。それまではHTMLのスケジュールページを用意 |
フォーカスの枠は手間を増やす問題ですが、1番目にしています。1行で全ページに効き、キーボード利用者がほかの修正を使うためにも欠かせないからです。CAPTCHAとエディターは、主要なタスクである予約で先へ進めない2件のため、どちらもスプリント1に入れます。スケジュールのPDFは旧CMSが書き出しているため新しいシステムを待ちますが、利用者は1年も待てません。そこで暫定修正として、HTMLのスケジュールページを用意し、アクセシビリティ方針のページに期日とともに載せます。
結果として、スプリント1で先へ進めない問題2件と、3つの共通コンポーネントのうち2つが直ります。入力欄のコンポーネントだけで、40件のうち18件でした。すべての指摘に担当者と期日が付きました。
06
よくある間違い
- レポートの順番どおりに直す。 達成基準は原則とガイドラインの順に番号が振られていて、影響の大きさの順ではありません。1.1.1から始めると、予約の手順にあるキーボードトラップ(2.1.2)より先に、すべての画像の代替テキストを直すことになりかねません。上の手順のように、タスクへの影響で見てください。
- 件数で順位を付ける。 ラベルの抜けが300件と報告されても、原因は1つかもしれません。一方、CAPTCHAは1か所でも、解けない人を全員止めます。先に原因ごとにまとめてください。スキャンで判定できることとできないことは、自動テストではカバーできないことにまとめています。
- コンポーネントではなくページごとに直す。 18か所を1つずつ直しても、コンポーネントは壊れたままで、次のフォームでまた同じ問題が出ます。ラベルがない・表示と食い違うフォームの入力欄のように、出力している場所で直してください。
- 適合レベルを順番とみなす。 W3Cの暫定修正のページは、レベルAの問題を影響が大きいことの目安の一つとしていますが、問題が出る場所や、手順がそこに依存しているかと並べて挙げています。購入手続きのレベルAAの問題が、過去記事のページのレベルAの問題より重いこともあります。
- 作り直しまで何もしない。 新しいサイトが公開されるまで、利用者は古いサイトを使います。後回しにするバリアには暫定修正を用意し、掲載されていない、または中身のないアクセシビリティ方針にあるように、方針のページに書いてください。
- 確認せずに修正を完了にする。 コードレビューだけで閉じたチケットは、よく再発します。見つけたときと同じ方法で再確認してください。方法はサイト全体をWCAGで評価し、根拠を示せる結果を出すで扱っています。
07
規格の定め
修正の順番を定めた規格はありません。規格が定めているのは、何をもって満たしたとするかと、各要件がどの利用者を支えるかです。
- WCAG 2.2 §5.2.1(要件): 適合レベルのいずれかを完全に満たすこと(原文は「met in full」)を求めています。レベルAAに適合するのは、レベルAとAAの達成基準をすべて満たしたページか、レベルAAに適合している代替版を提供しているページだけです。直す順番で変わるのは適合する時期で、すべての問題を直す必要があることは変わりません。
- EN 301 549 V4.1.1 附属書B(参考): 表B.2は、箇条5から13の各要件が箇条4.2のどの機能的性能基準を支えるかを示し、ある問題がどの利用者にどう影響しうるかを表すものだとしています(B.2.0)。「P」は主な関係(その要件が機能的性能基準を支える)、「S」は副次的な関係(特定の場面で使う人がいるため、部分的に支える)です。V3.2.1(2021-03)にも同じ附属書があり、そこでは「機能的性能の記述(functional performance statements)」と呼んでいます。ETSIは2026年9月にV4.1.1を発行しました。法令や契約がどの版を指しているかを確認してください。
- Section 508 §302(米国連邦政府のICTへの要件): 302.1 Without Visionから302.9 With Limited Language, Cognitive, and Learning Abilitiesまで、9つの機能的性能基準を定めています。EN 301 549の箇条4.2は同じ区分に、光過敏性発作の誘因の抑制とプライバシーの2つを加えています。
- W3C WAI(助言): 影響が大きく解決しやすい問題から取り組み、資源を効果的に使うよう勧めています。暫定修正のページは、多くのページに出る問題、よく使われるページの問題、購入フォームのような手順の問題、レベルAの問題を影響の大きい修正とし、時間、費用、技術、確認の手間が少ないものを手間の少ない修正としています。
- 日本(指針): 総務省「みんなの公共サイト運用ガイドライン(2024年版)」の6.2.5は、問題点を対象範囲、箇所数、改善の難易度で分け、誰が、いつ、どのように改善するかを決めるよう求めています。箇所数が膨大なものはアクセス数や情報の優先度を勘案して複数年度で、ホームページ全体に関わるものは次期リニューアルでの改善とし、その間は代替手段を講じる例も挙げています。WAICの対応度表記ガイドライン(3.2)は、今後の対応方針を示すことを条件に「一部準拠」の表記を認めています。直す順番と期日は、その方針の中身になります。
08
制限
この記事は指摘の順番を決めるためのもので、それぞれが達成基準を満たしていないかどうかは決めません。それはテストを行う人が、サイト全体をWCAGで評価し、根拠を示せる結果を出すの方法で判断します。順番は依頼主の判断です。アクセス解析、コード、予算を知っているのはチームで、重み付けが違ってもかまいません。法令や契約上のリスクは順番を変えますが、法令や契約が何を求めるかは弁護士が判断します。次のプロジェクトで同じ問題を生まないための体制は、プロジェクトの各段階で、誰が何をするかで扱います。
09
用語
- 先へ進めない問題
- タスクを最後まで進められなくなり、ページ上にほかの手段もない問題。
- 主要なタスク
- 会員登録、検索、予約、支払いなど、サイトが存在する目的そのものの作業。途中のすべての手順を含む。
- 共通コンポーネント
- 多くのページが使うテンプレート、コンポーネント、デザインシステムの部品。1か所を直せば、使っているページがすべて直る。
- 暫定修正
- 大きな作り直しを計画している間に、今あるバリアを取り除く修正や別の手段。
10
出典とガイド
- 参考 Web Accessibility First Aid: Approaches for Interim Repairs(W3C WAI、2026年8月12日更新): Consider the Scope(新しいタブで開きます)
- 参考 Planning and Managing Web Accessibility: Implement(W3C WAI): Prioritize issues(新しいタブで開きます)
- 規定 WCAG 2.2: 5.2.1 適合レベル(新しいタブで開きます)
- 参考 EN 301 549 V4.1.1(2026-09): 附属書B(参考)、B.1・B.2(新しいタブで開きます)
- 規定 Section 508(36 CFR 1194 附属書C): 302 Functional Performance Criteria(新しいタブで開きます)
- 参考 総務省「みんなの公共サイト運用ガイドライン(2024年版)」: 6.2.5 改善(新しいタブで開きます)
- 参考 WAIC「ウェブコンテンツの JIS X 8341-3:2016 対応度表記ガイドライン 2021年4月版」: 3.2 一部準拠(新しいタブで開きます)
関連するガイド
- パズルを解く以外に通れないCAPTCHA チケットサイトのログインでパスワードを2回間違えるとゆがんだ文字の画像が出るが、音声版もほかの方法もないため、画像を見られない人や読めない人は先へ進めなくなってしまう
- フォーカスが抜け出せないエディターや入力欄 インデントのためにTabキーを奪ったエディターや、正しいアドレスが入るまでフォーカスを戻すメール欄から、TabでもShift + Tabでも出られなくなってしまう
- 背後にフォーカスが残るモーダル 開いたダイアログの背後のページにフォーカスが残ったり、閉じた後にフォーカスが開いたボタンへ戻らなかったりする
- ラベルがない・表示と食い違うフォームの入力欄 配送先フォームはラベル付きに見えても、一つはただのテキスト、一つは違うIDを指すlabel、一つは別の言葉のaria-labelのため、見えている言葉が欄の名前になっていない
この記事は実務の進め方を、再現した例で説明するものです。法的な助言ではなく、特定の顧客についての指摘でもありません。