/kb-mobile-accessibility

name: kb-mobile-accessibility
description: Reference data, not a reviewer. Audit React Native, Expo, iOS, Android for accessibility. Review accessibilityLabel, accessibilityRole, accessibilityHint, touch targets (44x44pt min), screen reader support, and platform semantics.
license: MIT
disable-model-invocation: true
user-invocable: false
metadata:
  tier: reference
  domain: cross-cutting
  output: none
  effort: low
  title: Mobile Accessibility

Mobile Accessibility Skill

This skill provides mobile accessibility reference data for React Native, Expo, iOS, and Android auditing. Used by the `mobile-accessibility` skill.

---

React Native Accessibility Props - Full Reference

Each prop, with its type, values or notes, WCAG SC and required. The `aria-*` props and `role` are aliases in current React Native (0.88); there is no `aria-describedby` or `aria-role`.

| Prop | Type | Values / Notes | WCAG SC | Required | |------|------|---------------|---------|---------| | `accessible` | boolean | `true` marks the view as an accessibility node | 4.1.2 | Conditional | | `accessibilityLabel` | string | Human-readable name - overrides all child text | 1.1.1, 4.1.2 | Yes (all interactive + image elements) | | `accessibilityLabelledBy` | string / string[] | Android only - references the `nativeID` of the labelling element | 1.3.1 | For form inputs | | `accessibilityRole` | string (see roles table) | Communicates element type to AT | 4.1.2 | Yes (all interactive elements) | | `accessibilityHint` | string | Additional context spoken after label + role | 3.3.2 | When action isn't obvious | | `accessibilityState` | object | `{checked, disabled, expanded, selected, busy}` | 4.1.2 | State-bearing elements | | `accessibilityValue` | object | `{min, max, now, text}` | 4.1.2 | Sliders, steppers, progress bars | | `accessibilityActions` | array | `[{name, label}]` - defines custom actions | 2.5.1, 4.1.2 | Context menus, long-press alternatives | | `onAccessibilityAction` | function | Handles custom action triggers | 2.5.1, 4.1.2 | Paired with `accessibilityActions` | | `accessibilityLiveRegion` | string | Android only - `'none'` / `'polite'` / `'assertive'` | 4.1.3 | Dynamic content updates | | `accessibilityViewIsModal` | boolean | iOS only - VoiceOver ignores sibling views | 2.4.3 | Modals, drawers, sheets | | `accessibilityElementsHidden` | boolean | iOS - hides element and children from VoiceOver | 1.1.1 | Decorative elements | | `importantForAccessibility` | string | Android - `'auto'` / `'yes'` / `'no'` / `'no-hide-descendants'` | 1.1.1 | Decorative / grouped elements | | `accessibilityIgnoresInvertColors` | boolean | iOS - preserves colors in Inverted Colors mode | - | Images, video | | `aria-label` | string | Alias for `accessibilityLabel` | 1.1.1, 4.1.2 | Preferred in new code | | `aria-labelledby` | string | Android only - alias for `accessibilityLabelledBy` | 1.3.1 | Form inputs | | `role` | string | Alias for `accessibilityRole` that takes ARIA role names (`button`, `heading`, `listitem`...) | 4.1.2 | All interactive elements | | `aria-checked` | boolean / 'mixed' | RN 0.73+ alias for `accessibilityState.checked` | 4.1.2 | Checkboxes | | `aria-disabled` | boolean | RN 0.73+ alias for `accessibilityState.disabled` | 4.1.2 | Disabled elements | | `aria-expanded` | boolean | RN 0.73+ alias for `accessibilityState.expanded` | 4.1.2 | Accordions, dropdowns | | `aria-selected` | boolean | RN 0.73+ alias for `accessibilityState.selected` | 4.1.2 | Tabs, list items | | `aria-busy` | boolean | RN 0.73+ alias for `accessibilityState.busy` | 4.1.3 | Loading elements | | `aria-hidden` | boolean | RN 0.73+ - maps to `importantForAccessibility` / `accessibilityElementsHidden` | 1.1.1 | Decorative content | | `aria-live` | string | Android only - `'polite'` / `'assertive'` / `'off'` | 4.1.3 | Dynamic content | | `aria-modal` | boolean | iOS only - alias for `accessibilityViewIsModal` | 2.4.3 | Modals |

Accessibility Role Values

Each `accessibilityRole`, with the UIAccessibilityTraits value React Native sets on iOS and the class name it reports on Android (from React Native 0.88 source, RCTViewManager.m and ReactAccessibilityDelegate.kt). "None" means React Native adds no trait; the state props still apply. `accessibilityRole` has no `listitem`; the web-style `role` prop accepts `listitem` and other ARIA role names.

| Role | iOS trait | Android class | Use For | |------|-------------|-----------------|--------| | `'button'` | Button | android.widget.Button | Buttons, submission triggers | | `'link'` | Link | android.view.View | Navigation links, external URLs | | `'search'` | SearchField | android.widget.EditText | Search bars | | `'image'` | Image | android.widget.ImageView | Images (when accessible=true) | | `'imagebutton'` | Image + Button | android.widget.ImageButton | Icon buttons | | `'header'` | Header | android.view.View | Headings | | `'text'` | StaticText | android.widget.TextView | Static text | | `'adjustable'` | Adjustable | android.widget.SeekBar | Sliders | | `'checkbox'` | None | android.widget.CheckBox | Checkboxes | | `'combobox'` | None | android.view.View | Dropdowns | | `'dropdownlist'` | None | android.widget.Spinner | Dropdown lists | | `'menu'` | None | android.view.View | Menus | | `'menuitem'` | None | android.view.View | Menu items | | `'menubar'` | None | android.view.View | Menu bars | | `'progressbar'` | UpdatesFrequently | android.view.View | Progress indicators | | `'radio'` | None | android.widget.RadioButton | Radio buttons | | `'radiogroup'` | None | android.view.View | Radio button groups | | `'scrollbar'` | None | android.view.View | Scrollbars | | `'spinbutton'` | None | android.widget.SpinButton | Steppers, number inputs | | `'switch'` | switch trait (private) | android.widget.Switch | Toggle switches | | `'togglebutton'` | Button | android.widget.ToggleButton | Toggle buttons | | `'tab'` | None | android.view.View | Tab elements | | `'tablist'` | None