WCAG Compliance

Overview

The Unveily SDK's native UI components are designed to meet WCAG 2.1/2.2 AA standards. Users who need accessibility (visual impairment, motor impairment, hearing impairment, etc.) can use the app equally.

Focus Trap (WCAG 2.4.3)

When a panel, drawer, or menu opens, focus cycles only within it.

Android: Tab → next element, Shift+Tab → previous element, Tab from the last element → back to first.

// Tab / Shift+Tab cycling — handled automatically by the 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: When the panel opens, UIAccessibility.post(notification: .screenChanged, argument: containerView) is called so VoiceOver immediately moves focus inside the panel.

// VoiceOver automatic notification on panel display — handled automatically by the SDK
UIAccessibility.post(notification: .screenChanged, argument: containerView)

Screen Reader Labels (WCAG 1.1.1)

All UI elements automatically have labels that screen readers (Android TalkBack / iOS VoiceOver) can read.

Menu Items — Disabled State Announcement

// Active item: "Camera"
// Disabled item: "Camera, disabled" — not distinguishable by color alone
itemView.contentDescription = if (enabled) label
    else "$label, ${getString(R.string.acc_state_disabled)}"

// Applied automatically via NSLocalizedString
button.accessibilityLabel = NSLocalizedString("acc_state_disabled", comment: "")
button.accessibilityTraits = enabled ? .button : [.button, .notEnabled]

Badge Notification Count Announcement

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

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

Text Resize (WCAG 1.4.4)

When the user sets the font size in the accessibility panel, the WebView text size is also adjusted. The accessibility panel offers three steps: normal / large / extraLarge. WCAG 1.4.4 requires that content remains usable at up to 200% zoom; in addition to this panel setting, the WebView honors the user's system text-size setting, so content stays usable at 200% zoom.

You can read the current setting from JavaScript. getSettings takes a callback function name as a string; there is no synchronous form:

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

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

Minimum Touch Targets (WCAG 2.5.5 / 2.5.8)

All interactive elements guarantee a minimum touch size. iOS uses 44pt and Android uses 48dp (physically equivalent).

High Contrast Mode (WCAG 1.4.3)

Activating high contrast mode in the accessibility panel dynamically changes the background style.

iOS: Background color switches from systemBackground → black, text color from label → white, ensuring a 4.5:1 contrast ratio.
Android: Panel background opacity is increased and blur effects are removed.

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");
  }
};

Multilingual Accessibility Strings

TalkBack/VoiceOver labels automatically change to match the app language. The SDK supports 3 languages: Korean (ko), English (en), and Japanese (ja).

Motor Impairment Support

Left-Handed Mode

Switches the drawer from the right side of the screen to the left.

window.unveilyBridge.accessibilityPanel.open();

The user sets it via the "Left-Hand Mode" toggle in the panel.

One-Handed Mode

Compresses content into the bottom area of the screen for single-handed use.

Always Show Tab Bar

Pins an auto-hiding tab bar to always-visible state.

window.unveilyBridge.accessibilityPanel.open();

The user sets it via the "Pin Tab Bar" toggle in the panel.

Easy Read

Simplifies the layout so users with cognitive disabilities can easily navigate.

Web Content Accessibility

Accessibility for web content within the WebView is the responsibility of the web developer. Apply standard web accessibility techniques such as aria-* attributes, semantic HTML, and focus management.