Siteforce Edge 補正 — 5課題 検証フィクスチャ
🔴 未補正✅ Edge補正済み⚠️ 補正失敗🚫 構造的制約(補正不可)

課題 3: SPA 再レンダリング

React の仮想 DOM 差分更新は、Edge が初期 HTML に付与した alt 等の補正属性を上書き・削除する。 Edge は初回レスポンスを補正できるが、React がコンポーネントを再レンダリングすると補正は消える。

🔴 未補正alt なし(ベースライン)
// React コンポーネント(alt prop なし) <img src={`/img?v=${count}`} /> // 3秒ごとに count が増加し再レンダリング // alt は最初から存在しない // 現在の alt: null // レンダリング回数: 0

画像は 3秒ごとに再生成される。alt 属性は存在しないため、 スクリーンリーダーはファイル名を読み上げるか無視する。

✅ Edge補正済み初回 HTML には alt が存在する
商品画像(Edge補正済み)
<!-- Edge が補正した初期 HTML --> <img src="/img?v=0" alt="商品画像(Edge補正済み)" data-siteforce="alt-corrected" /> <!-- スクリーンリーダーは「商品画像」と読み上げる -->

Edge はサーバーが返す HTML を書き換え、alt を付与して返す。 初回ページロード時点ではアクセシビリティ違反が解消されている。

⚠️ 補正失敗再レンダリング後(0 回更新済み)
商品画像(Edge補正済み)
// React コンポーネント(alt prop なし) // Edge が初期 HTML に alt を付与していても... <img src={`/img?v=${count}`} /> // ↑ alt は React props にないため // 再レンダリング時に React が DOM を再生成すると消える // 現在の alt: null // レンダリング回数: 0 // → まだ初回レンダリング(補正有効)

初回は Edge が付与した alt が HTML に存在する(✅)。 しかし React が再レンダリングすると、コンポーネントの props に alt がないため React が DOM を上書きし alt が消える(⚠️)。

結論: Edge は初回 HTML を補正できる(✅)。ただし React / Vue / Angular の差分更新により 補正属性は再レンダリング時に消える(⚠️)。si.js の MutationObserver で再適用するベストエフォート対応が必要。 SPA では Siteforce も競合 DOMオーバーレイ製品も同条件。 実機検証は未完了 [CR-R22-001] — 営業資料では「公式に確認された制約」を主語にすること。