capacitor-accessibility

// Announce dynamic content
<div aria-live="polite" aria-atomic="true">
  {message}
</div>
 
// Urgent announcements
<div aria-live="assertive" role="alert">
  {error}
</div>

/* Minimum 44x44pt */
button, a, input {
  min-height: 44px;
  min-width: 44px;
}
 
/* Icon buttons need padding */
.icon-button {
  padding: 12px;
}

/* Good contrast (4.5:1 for text) */
.text {
  color: #333333;
  background: #ffffff;
}
 
/* Don't rely on color alone */
.error {
  color: #d32f2f;
  border-left: 4px solid #d32f2f; /* Visual indicator */
}
.error::before {
  content: "⚠ "; /* Icon indicator */
}

// Move focus after navigation
useEffect(() => {
  const heading = document.querySelector('h1');
  heading?.focus();
}, [page]);
 
// Trap focus in modals
function trapFocus(element: HTMLElement) {
  const focusable = element.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0] as HTMLElement;
  const last = focusable[focusable.length - 1] as HTMLElement;
 
  element.addEventListener('keydown', (e) => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  });
}

// Custom accessibility in native code
element.isAccessibilityElement = true
element.accessibilityLabel = "Play video"
element.accessibilityHint = "Double tap to play"
element.accessibilityTraits = .button

// Custom accessibility
ViewCompat.setAccessibilityDelegate(view, object : AccessibilityDelegateCompat() {
    override fun onInitializeAccessibilityNodeInfo(
        host: View,
        info: AccessibilityNodeInfoCompat
    ) {
        super.onInitializeAccessibilityNodeInfo(host, info)
        info.contentDescription = "Play video"
    }
})

# iOS: Enable VoiceOver in Simulator
# Settings > Accessibility > VoiceOver
 
# Android: Enable TalkBack
# Settings > Accessibility > TalkBack
 
# Web: Use axe-core
npx @axe-core/cli https://localhost:3000