アクセシビリティ
アクセシビリティ機能と TalkBack / VoiceOver のサポート
概要
アクセシビリティ Bridge を使うと、TTS（テキスト読み上げ）・STT（音声認識）・ハプティクスフィードバック・アクセシビリティパネルをウェブページから JavaScript で制御できます。 Android（TalkBack）と iOS（VoiceOver）の両方で同じ Bridge API をサポートしています。
注入されるグローバルオブジェクトは window.unveilyBridge（小文字）のみで、アクセシビリティ関連の機能は tts・stt・haptic・accessibilityPanel の名前空間で提供されます。
| 機能 | 名前空間 | Android | iOS |
|---|---|---|---|
| TTS | unveilyBridge.tts | ✓ | ✓ |
| STT | unveilyBridge.stt | ✓ | ✓ |
| Haptic | unveilyBridge.haptic | ✓ | ✓ |
| アクセシビリティパネル | unveilyBridge.accessibilityPanel | ✓ | ✓ |
ブリッジの準備タイミング
window.unveilyBridge はページ読み込み前に登録されますが、名前空間はグルースクリプトの注入後に生成されます。React・Vue などの SPA のマウント時（useEffect/onMounted）にアクセシビリティ API を呼び出す場合は、まず unveilyGlueReady イベントを待ってください。ボタンクリックなどのユーザー操作から呼び出す場合は不要です。
window.addEventListener('unveilyGlueReady', () => {
window.unveilyBridge.tts.speak("Hello, world", "en-US");
}, { once: true });モジュールの有効化
assets/config.json でアクセシビリティモジュールを有効にする必要があります。
{
"modules": {
"accessibility": {
"enabled": true,
"topDownPanel": true
}
}
}TTS（テキスト読み上げ）
unveilyBridge.tts のメソッドは 位置引数（positional） を使用します。オプションオブジェクトは渡しません。
speak
テキストを音声で読み上げます。第 1 引数は読み上げるテキスト、第 2 引数は言語コードです。
window.unveilyBridge.tts.speak("Hello, world", "en-US");stop
現在再生中の TTS を停止します。
window.unveilyBridge.tts.stop();pause / resume
TTS を一時停止または再開します。
window.unveilyBridge.tts.pause();
window.unveilyBridge.tts.resume();setSpeed
TTS の再生速度を設定します。1.0 が標準速度で、0.1〜4.0 の範囲に自動的に制限されます。
window.unveilyBridge.tts.setSpeed(1.0); // 1.0 = normal, clamped to 0.1–4.0再生状態イベント
TTS の再生状態の変化は、グローバル関数 window.onTTSStateChanged に渡されます。
window.onTTSStateChanged = function (result) {
// result.state: 'started' | 'completed' | 'paused' | 'error'
console.log(result.state);
};対応言語
TTS は ko-KR・ja-JP・zh-CN を認識し、それ以外の値は英語（en-US）として処理されます。
| コード | 言語 |
|---|---|
"ko-KR" | 韓国語 |
"ja-JP" | 日本語 |
"zh-CN" | 中国語（簡体字） |
"en-US" | 英語（デフォルト） |
TTS 再生完了直後に getUserMedia({ audio: true }) を呼び出しても正常に動作します。SDK が TTS の再生前後でオーディオフォーカスを自動管理するため、遅延なしにマイクをすぐ使用できます。
STT（音声認識）
unveilyBridge.stt は位置引数として言語コードのみを受け取ります。結果とエラーはグローバル関数（window.onSTTResult・window.onSTTError）で渡され、コールバックのパラメータでは渡されません。
start
音声認識を開始します。
window.unveilyBridge.stt.start("en-US");
window.onSTTResult = function (result) {
// result.isFinal === false means a partial (real-time) result
console.log(result.text, result.isFinal);
};
window.onSTTError = function (error) {
console.error(error.code, error.message);
};渡されるオブジェクトの構造
// window.onSTTResult(result) — isFinal: false means a partial result
{ "text": "recognized text", "isFinal": true }
// window.onSTTError(error)
{ "code": "PERMISSION_DENIED", "message": "..." }stop
音声認識を停止します。
window.unveilyBridge.stt.stop();必要な権限 — マイク
STT にはマイクの権限が必要です。
| プラットフォーム | 権限 |
|---|---|
| Android | RECORD_AUDIO — マニフェストでコメントを解除して有効化 |
| iOS | Info.plist に NSMicrophoneUsageDescription と NSSpeechRecognitionUsageDescription を宣言 |
iOS では、最初の STT 呼び出し時にシステムのマイク権限ポップアップが自動的に表示されます。
Haptic（ハプティクスフィードバック）
unveilyBridge.haptic は settings.haptic が有効になっている必要があります。
vibrate
指定した時間（ms）だけ振動させます。ミリ秒の値を位置引数として渡します。
window.unveilyBridge.haptic.vibrate(200);pattern
パターン振動を実行します。[待機, 振動, 待機, 振動, ...] の配列を JSON 文字列として渡します。
// JSON string: [wait, vibrate, wait, vibrate, ...]
window.unveilyBridge.haptic.pattern("[0, 100, 50, 200]");impact
あらかじめ定義された強さのインパクト振動を実行します。
iOS では UIImpactFeedbackGenerator、Android では VibrationEffect を使用します。
window.unveilyBridge.haptic.impact("medium"); // "light" | "medium" | "heavy"アクセシビリティパネル
ユーザーが自分でアクセシビリティのオプションを調整できるパネル UI で、unveilyBridge.accessibilityPanel 名前空間で制御します（別名 unveilyBridge.accessibility も使用可能）。config.json の modules.accessibility.enabled で有効化されます。
パネルが開くと、Android は TYPE_WINDOW_STATE_CHANGED、iOS は UIAccessibility.screenChanged を自動的に送信するため、TalkBack/VoiceOver がすぐに認識します。
open / close / toggle
window.unveilyBridge.accessibilityPanel.open();
window.unveilyBridge.accessibilityPanel.close();
window.unveilyBridge.accessibilityPanel.toggle();getSettings
現在のアクセシビリティ設定を読み込みます。コールバック関数名を文字列で渡します。省略した場合のデフォルトは onAccessibilitySettingsLoaded です。
window.unveilyBridge.accessibilityPanel.getSettings("onAccessibilitySettingsLoaded");
window.onAccessibilitySettingsLoaded = function (settings) {
console.log(settings.fontSize); // "normal" | "large" | "extraLarge"
console.log(settings.highContrast); // boolean
};applySettings
設定をプログラムから適用します。getSettings と同じフィールドを持つ JSON 文字列を渡します。
window.unveilyBridge.accessibilityPanel.applySettings(JSON.stringify({
highContrast: true,
fontSize: "large",
tts: true,
easyRead: false,
haptic: true,
tabAlwaysShow: false,
leftHanded: false,
oneHanded: false
}));設定オブジェクト
パネルでユーザーが調整できる項目で、getSettings と applySettings が共有するフィールドです。
| 設定キー | タイプ | 説明 |
|---|---|---|
highContrast | boolean | ハイコントラストモード |
fontSize | "normal" | "large" | "extraLarge" | 文字サイズ |
tts | boolean | TTS の有効・無効 |
easyRead | boolean | かんたん表示（シンプルなレイアウトに切り替え） |
haptic | boolean | ハプティクスフィードバックの有効・無効 |
tabAlwaysShow | boolean | タブバーを常に表示（自動非表示を無効化） |
leftHanded | boolean | 左利きモード |
oneHanded | boolean | 片手モード |
config.json の modules.accessibility.topDownPanel: true に設定すると、画面上部から下に現れるパネル形式で表示されます。