widget runtime lab

Page-Type Lab — どのページ構成で動く?

各カードは、ウィジェットが現場で遭遇する ページ構成(アーキテクチャ) を 1 つずつ再現した実機デモです。 既存の a11y-training / screen-reader-lab は「機能」を見せるもの。こちらは「どの種類のページで widget 自体が正しく動くか」を検証します。 各ページに観測パネルを内蔵し、widget がやるべきこと・既知のギャップを明示します。

対応済み — 動作確認用 部分対応 — 既知の制約あり 未対応 — ギャップ実証用

① SPA クライアントルーティング 対応済み

history.pushState / popstate · DOM 全入れ替え

ルート遷移で reload せずに <main> を丸ごと差し替え。MutationObserver で新コンテンツに自動再適用(当初の懸念は実機で否定)。

デモを開く →

② SSR + ハイドレーション 対応済み

server-rendered HTML → client JS が後から書き換え

サーバー描画済み DOM の上で、JS が遅れて文言や属性を差し替える。DOMContentLoaded 後の boot と MutationObserver の挙動を確認。

デモを開く →

③ 遅延読み込み / 無限スクロール 部分対応

MutationObserver · lazy <img> · IntersectionObserver

スクロールで後から DOM 追加。追加要素にコントラスト/フォント拡大が効くか、遅延 GIF の凍結が漏れないか(naturalWidth>0 問題)を観測。

デモを開く →

④ iframe 埋め込み 未対応

same-origin · cross-origin (YouTube/Typeform 等)

iframe 内のコンテンツに widget が届かないことを実証。same-origin / cross-origin それぞれの境界を可視化。

デモを開く →

⑤ Shadow DOM / Web Components 未対応

customElements · attachShadow({mode:'open'})

querySelectorAll が shadow root を貫通しない。web component 内のテキストにコントラスト/フォント拡大が効かないことを実証。

デモを開く →

⑥ PDF 埋め込み 未対応

<embed type="application/pdf"> · <iframe src="*.pdf">

埋め込み PDF は widget の対象外。read-aloud / コントラストが PDF ビューアに届かないことを示し、screen-reader (PDF compatible) との差を明確化。

デモを開く →

⑦ Canvas / SVG / WebGL アニメーション 未対応

<canvas> rAF loop · SVG SMIL · WebGL

「アニメーション停止」が CSS animation には効くが、canvas/WebGL の rAF ループには効かないことを実証。SVG SMIL は pauseAnimations() で停止可能。

デモを開く →

⑧ htmx / Turbo フルボディ入れ替え 修正済み (B2)

hx-boost · Turbo Drive · full <body> swap

body 入れ替えで #siteforce-root が一旦破棄されるが、survival observer が自動再マウント(B2 修正)。手動 Siteforce.boot() 不要。

デモを開く →

⑨ 印刷 / @media print 修正済み (B1)

@media print · window.print()

widget は @media print { :host { display:none } } を持ち、印刷時に UI が紙面に出ない(B1 修正)。

デモを開く →

⑩ RTL / 国際化 (dir=rtl) 未対応

html[dir=rtl] · Arabic/Hebrew · logical props

panel は LTR 前提で角が不自然に。text-align:left !important が RTL 本文を破壊。ロケールに RTL 言語なし。

デモを開く →

⑪ EC チェックアウト(決済 iframe) 部分対応

multi-step form · payment iframe · session timeout

フォーム本文は widget 対象。カード入力は決済 iframe 内(別オリジン)で対象外。funnel・フォーカス管理を壊さないことが要件。

デモを開く →

⑫ 大規模テーブル + モーダル 部分対応

large DOM (chunked) · sortable table · focus-trap

大 DOM のチャンク処理漏れ、ソートのキーボード操作との競合、アプリ modal と widget パネルのフォーカストラップ競合を観測。

デモを開く →

⑬ ローダー エッジケース 修正済み

document.body null at boot · async currentScript (B3)

head 読み込み(body 未生成)でも throw せず起動(B3 修正)。async/注入で currentScript=null でも data-key を解決。

デモを開く →

⑭ Web Component フレームワーク 未対応

Lit/Stencil/LWC 風 · ネスト shadow root · reactive re-render

フレームワークが出力するネストした shadow root内のテキストは貫通不可。Light DOM / slotted のみ効く。⑤ より実戦的。

デモを開く →

⑮ CMS (WordPress/Shopify 風) 対応見込み

Gutenberg blocks · theme preset class · nested wrappers

テーマのカラープリセット(低コントラスト既定値)+ wp-block ネスト。通常 DOM なので widget が効くはず(制約ではない)。

デモを開く →

⑯ Canvas / WebGL / データ可視化 未対応

canvas 2D · WebGL · Chart/D3 風 · Figma 風

コンテンツが canvas/WebGL ピクセルに描画 → テキストノード無し → recolor/読み上げ対象外。HTML 凡例のみ届く。

デモを開く →

⑰ WebView / Kiosk / Signage 要検証

WKWebView/Android WebView · auto-refresh · signage rotation · touch-only

Chromium/WebKit ベースなので boot するはず。自動切替スライド追従は観測可、long-running メモリ・touch 操作は未検証。

デモを開く →