課題 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 が補正した初期 HTML -->
<img
src="/img?v=0"
alt="商品画像(Edge補正済み)"
data-siteforce="alt-corrected"
/>
<!-- スクリーンリーダーは「商品画像」と読み上げる -->
Edge はサーバーが返す HTML を書き換え、alt を付与して返す。 初回ページロード時点ではアクセシビリティ違反が解消されている。
⚠️ 補正失敗再レンダリング後(0 回更新済み)
// 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] — 営業資料では「公式に確認された制約」を主語にすること。