課題 4: ページリロード時の未補正フラッシュ
DOM オーバーレイ型は HTML をそのまま返し、JS が後から補正を適用する。 リロード直後は補正前の状態が一瞬表示される（Flash of Unstyled Content）。 Edge 型は HTML 応答自体に補正が含まれるためフラッシュが発生しない。 これは Siteforce の構造的優位であり、「補正失敗」ケースは存在しない。
🔴 DOM オーバーレイ型（競合）JS 遅延補正 — フラッシュあり
🔴 補正待ち — 0ms 経過
<!-- オリジナル HTML（補正なし） -->
<button style="color:#ccc">...</button>
<!-- 600ms 後に overlay.js が DOM を書き換え -->
<button style="color:#000">...</button>
<!-- accessiBe 公式: "source code を変更しない,
browser-level・async load で動作" -->
「リロードを再現」ボタンで Flash を繰り返し確認できる。 スクリーンリーダーは補正前の低コントラスト状態のテキストを読む可能性がある。
✅ Edge補正済み（Siteforce）HTML 応答に補正が含まれる — フラッシュなし
✅ HTML 到達時点で補正済み — 0ms でコントラスト合格
<!-- Edge が返す補正済み HTML -->
<button
style="color:#000000; background:#ffffff"
data-siteforce="contrast-corrected"
>
...
</button>
<!-- JS のロードを待たずに、初回ペイントから合格 -->
Edge がサーバーからの HTML 応答を書き換えて返すため、 ブラウザが最初にレンダリングする時点で補正済みの状態になる。 JS の実行を待つ必要がない。
✅ 補正失敗ケースなしSiteforce の構造的優位
⚡
HTML = 常に補正済み
/* なぜフラッシュが起きないか */
// DOM オーバーレイ型:
// 1. ブラウザが未補正 HTML を受信
// 2. HTML がレンダリングされる（低コントラスト表示）
// 3. overlay.js が実行される（遅延あり）
// 4. DOM が書き換えられる
// → 2〜3 の間がフラッシュ期間
// Edge 型 (Siteforce):
// 1. Edge が HTML を補正して返す
// 2. ブラウザが補正済み HTML を受信
// 3. 最初から正常コントラストで表示
// → フラッシュなし
課題4はアーキテクチャの違いによる構造的優位。 Edge 型では HTTP レスポンスの HTML 自体が「正解」のため、 どのタイミングでも補正失敗は発生しない。
結論: 課題4は Siteforce（Edge 型）が構造的に解決している（✅）。 accessiBe は公式に「async load・source code 無変更」と説明しており [CU-R22-002][CU-R22-003]、 Flash of Unstyled Content が構造的に発生する。 DOMオーバーレイ型で同課題を回避する方法は存在しない。