WCAG 準拠

組み込み機能 — 別途の実装は不要です

このページで説明するすべてのアクセシビリティ機能は、Unveily SDK のネイティブコンポーネントにすでに実装されています。ウェブ開発者が別途ネイティブコードを書く必要はありません。Android と iOS の両方で同等にサポートされています。

概要

Unveily SDK のネイティブ UI コンポーネントは、WCAG 2.1/2.2 AA 基準を満たすように設計されています。視覚障害・運動障害・聴覚障害などのあるユーザーも、アプリを同等に利用できます。

基準	項目	適用コンポーネント	Android	iOS
WCAG 1.1.1	テキスト以外のコンテンツ（スクリーンリーダーラベル）	パネル、メニュー、タブ、ドロワー	✓	✓
WCAG 1.4.3	コントラスト比（4.5:1 以上）	パネル背景、メニューアイコン	✓	✓
WCAG 1.4.4	テキストのサイズ変更（200%まで）	アクセシビリティパネルの設定	✓	✓
WCAG 2.1.1	キーボードアクセス	すべてのインタラクティブ要素	✓	✓
WCAG 2.4.3	フォーカス順序	AccessibilityPanel、SideDrawer、TopDownMenu	✓	✓
WCAG 2.5.5	最小タッチターゲット（48dp / 44pt）	タブ、ドロワー行、メニュー項目	✓	✓
WCAG 2.5.8	最小ターゲットサイズ（24dp、WCAG 2.2）	バッジ、アイコンボタン	✓	✓

ブリッジの準備タイミング

このページの JavaScript の例は window.unveilyBridge（小文字）を使用します。React・Vue などの SPA のマウント時に accessibilityPanel のような名前空間を呼び出す場合は、まず unveilyGlueReady イベントを待ってから呼び出してください。ボタンクリックなどのユーザー操作から呼び出す場合は不要です。

フォーカストラップ（WCAG 2.4.3）

パネル・ドロワー・メニューが開いているとき、フォーカスは内部のみで循環します。

Android: Tab → 次の要素、Shift+Tab → 前の要素、最後の要素で Tab → 最初の要素に戻ります。

AccessibilityPanelView.kt（SDK 内部）

// Tab / Shift+Tab の循環 — SDK が自動的に処理します
setOnKeyListener { _, keyCode, event ->
    if (keyCode == KeyEvent.KEYCODE_TAB && event.action == KeyEvent.ACTION_DOWN) {
        val focusables = getFocusableChildren()
        val nextIndex = if (event.isShiftPressed)
            (currentIndex - 1 + focusables.size) % focusables.size
        else
            (currentIndex + 1) % focusables.size
        focusables[nextIndex].requestFocus()
        true
    } else false
}

iOS: パネルが開くと UIAccessibility.post(notification: .screenChanged, argument: containerView) が呼び出され、VoiceOver がすぐにパネル内部にフォーカスを移動します。

AccessibilityPanelView.swift（SDK 内部）

// パネル表示時の VoiceOver 自動通知 — SDK が自動的に処理します
UIAccessibility.post(notification: .screenChanged, argument: containerView)

スクリーンリーダーラベル（WCAG 1.1.1）

すべての UI 要素にスクリーンリーダー（Android TalkBack / iOS VoiceOver）が読めるラベルが自動的に設定されます。

メニュー項目 — 無効状態の案内

Android（SDK 内部）

// 有効な項目: "カメラ"
// 無効な項目: "カメラ、無効" — 色だけで区別しない
itemView.contentDescription = if (enabled) label
    else "$label, ${getString(R.string.acc_state_disabled)}"

iOS（SDK 内部）

// NSLocalizedString で自動適用
button.accessibilityLabel = NSLocalizedString("acc_state_disabled", comment: "")
button.accessibilityTraits = enabled ? .button : [.button, .notEnabled]

バッジの通知数案内

Android

// TalkBack: "通知 3 件"
badge.contentDescription = getString(R.string.acc_badge_count, count)

iOS

// VoiceOver: "3 notifications"
badge.accessibilityLabel = String(format: NSLocalizedString("acc_badge_count", comment: ""), count)

アクセシビリティパネルでユーザーが文字サイズを設定すると、WebView のテキストサイズも一緒に変わります。アクセシビリティパネルは normal / large / extraLarge の 3 段階を提供します。WCAG 1.4.4 では 200% まで拡大してもコンテンツを利用できる必要があると定めており、WebView はこのパネル設定に加えてユーザーのシステム文字サイズ設定も反映するため、200% 拡大でもコンテンツを利用できます。

設定	WebView textZoom
標準（Normal）	100%
大（Large）	130%
特大（Extra Large）	160%

JavaScript から現在の設定を読み込めます。getSettings はコールバック関数名を文字列で受け取り、同期的に返す形式はありません：

window.unveilyBridge.accessibilityPanel.getSettings("onAccessibilitySettingsLoaded");

window.onAccessibilitySettingsLoaded = function (settings) {
  console.log(settings.fontSize); // "normal" | "large" | "extraLarge"
};

最小タッチターゲット（WCAG 2.5.5 / 2.5.8）

すべてのインタラクティブ要素で最小タッチサイズを保証します。 iOS は 44pt、Android は 48dp を基準とします（物理的なサイズは同等）。

コンポーネント	Android	iOS
アクセシビリティパネル項目	48dp × 72dp	44pt × 66pt
下部タブ	48dp × 48dp	44pt × 44pt
ドロワー行	48dp × 56dp	44pt × 52pt
バッジ	24dp × 24dp（WCAG 2.2）	24pt × 24pt（WCAG 2.2）

ハイコントラストモード（WCAG 1.4.3）

アクセシビリティパネルでハイコントラストモードを有効にすると、背景スタイルが動的に変わります。

iOS: 背景色が systemBackground → black、テキスト色が label → white に切り替わり、4.5:1 のコントラスト比を保証します。
Android: パネル背景の不透明度が上がり、ブラー効果が除去されます。

window.unveilyBridge.accessibilityPanel.getSettings("onAccessibilitySettingsLoaded");

window.onAccessibilitySettingsLoaded = function (settings) {
  if (settings.highContrast) {
    // Recommended: also apply a high-contrast style to web content
    document.body.classList.add("high-contrast");
  }
};

多言語アクセシビリティ文字列

TalkBack/VoiceOver のラベルがアプリの言語に合わせて自動的に変わります。 SDK は韓国語（ko）・英語（en）・日本語（ja）の 3 言語をサポートしています。

文字列キー	한국어	English	日本語
`acc_high_contrast`	고대비	High Contrast	ハイコントラスト
`acc_font_size`	글꼴 크기	Font Size	文字サイズ
`acc_tts`	읽어주기	Read Aloud	読み上げ
`acc_easy_read`	쉬운 읽기	Easy Read	かんたん表示
`acc_haptic`	진동 피드백	Vibration	振動フィードバック
`acc_tab_pin`	탭 바 고정	Pin Tab Bar	タブ固定
`acc_left_handed`	왼손 모드	Left-Hand Mode	左利きモード
`acc_one_handed`	한손 모드	One-Hand Mode	片手モード
`acc_state_disabled`	비활성화됨	Disabled	無効
`acc_state_selected`	선택됨	Selected	選択済み
`acc_badge_count`	알림 %ld건	%ld notifications	%ld件の通知

TTS の音声言語は別

上の表は UI（スクリーンリーダーラベル）の言語です。TTS の音声合成はこれとは別に zh-CN（中国語簡体字）もサポートします — UI 言語ではなく音声出力用です。

運動障害のサポート

左利きモード

ドロワーの位置を画面右側から左側に切り替えます。

window.unveilyBridge.accessibilityPanel.open();

パネル内の「左利きモード」トグルで設定します。

片手モード

画面下部の領域にコンテンツを縮小して、片手で操作できるようにします。

タブバーを常に表示

自動非表示のタブバーを常に表示した状態に固定します。

window.unveilyBridge.accessibilityPanel.open();

パネル内の「タブ固定」トグルで設定します。

かんたん表示

レイアウトをシンプルにして、認知障害のあるユーザーも使いやすくします。

ウェブコンテンツのアクセシビリティ

WebView 内のウェブコンテンツのアクセシビリティはウェブ開発者が担当します。 aria-* 属性・セマンティック HTML・フォーカス管理など、標準的なウェブアクセシビリティの手法を適用してください。

TTS Bridge の活用

ウェブコンテンツから直接 TTS を呼び出すと、Android TalkBack / iOS VoiceOver がなくても読み上げ機能を実装できます。詳しくはアクセシビリティ Bridge API をご確認ください。