القائمة
Automated and manual accessibility auditing, WCAG compliance, and screen reader testing for mobile apps
| name | mobile-accessibility-testing |
| description | Automated and manual accessibility auditing, WCAG compliance, and screen reader testing for mobile apps |
| standards-version | 1.10.0 |
Use this skill when the developer asks about:
| Input | Description |
|---|---|
| Framework | expo (React Native) or flutter |
| Scope | Full audit, specific screen, or CI setup |
Use mobile_auditAccessibility for a static analysis scan:
Use MCP tool: mobile_auditAccessibility
framework: "expo"
The tool scans source files for:
accessibilityLabel / Semantics on interactive elementsaccessibilityRole annotations// Bad
<TouchableOpacity onPress={onDelete}>
<Icon name="trash" />
</TouchableOpacity>
// Good
<TouchableOpacity
onPress={onDelete}
accessibilityLabel="Delete item"
accessibilityRole="button"
accessibilityHint="Removes this item from your list"
>
<Icon name="trash" />
</TouchableOpacity>
// Minimum 44x44pt
<Pressable
onPress={onPress}
style={{ minWidth: 44, minHeight: 44 }}
hitSlop={8}
>
<Icon name="settings" size={24} />
</Pressable>
import { PixelRatio } from "react-native";
const fontScale = PixelRatio.getFontScale();
// Ensure layouts don't break at 2x font scale
// Use maxFontSizeMultiplier on Text to cap if layout breaks
<Text maxFontSizeMultiplier={1.5}>Content</Text>
import { AccessibilityInfo } from "react-native";
const [reduceMotion, setReduceMotion] = useState(false);
useEffect(() => {
AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);
const sub = AccessibilityInfo.addEventListener(
"reduceMotionChanged",
setReduceMotion
);
return () => sub.remove();
}, []);
import { AccessibilityInfo } from "react-native";
AccessibilityInfo.announceForAccessibility("Item deleted");
// Bad
GestureDetector(
onTap: onDelete,
child: Icon(Icons.delete),
)
// Good
Semantics(
label: 'Delete item',
button: true,
hint: 'Removes this item from your list',
child: GestureDetector(
onTap: onDelete,
child: const Icon(Icons.delete),
),
)
// Material guidelines: 48x48 logical pixels minimum
SizedBox(
width: 48,
height: 48,
child: IconButton(
onPressed: onSettings,
icon: const Icon(Icons.settings),
),
)
MediaQuery(
data: MediaQuery.of(context).copyWith(textScaler: TextScaler.linear(2.0)),
child: child,
)
final disableAnimations = MediaQuery.of(context).disableAnimations;
SemanticsService.announce('Item deleted', TextDirection.ltr);
| Test | Pass Criteria |
|---|---|
| All buttons announced | Label read aloud, role stated |
| Images described | Alt text read or skipped if decorative |
| Touch targets | ≥ 44pt (iOS) / ≥ 48dp (Android) |
| Contrast ratio | ≥ 4.5:1 normal text, ≥ 3:1 large text |
| Font scaling | Layout intact at 200% font size |
| Focus order | Logical top-to-bottom, left-to-right |
| Reduced motion | Animations skipped when enabled |
import { render } from "@testing-library/react-native";
test("delete button has accessibility label", () => {
const { getByRole } = render(<DeleteButton />);
const btn = getByRole("button", { name: "Delete item" });
expect(btn).toBeTruthy();
});
testWidgets('delete button has semantics', (tester) async {
await tester.pumpWidget(const MaterialApp(home: DeleteButton()));
expect(
find.bySemanticsLabel('Delete item'),
findsOneWidget,
);
});
| Resource | URL |
|---|---|
| WCAG 2.1 (W3C) | https://www.w3.org/TR/WCAG21/ |
| RN Accessibility | https://reactnative.dev/docs/accessibility |
| Flutter Accessibility | https://docs.flutter.dev/accessibility-and-internationalization/accessibility |
| axe DevTools Mobile | https://www.deque.com/axe/devtools/mobile/ |
| iOS HIG Accessibility | https://developer.apple.com/design/human-interface-guidelines/accessibility |
User: "Run an accessibility audit on my app and fix any violations"
Assistant:
mobile_auditAccessibility to scan all source filesaccessibilityLabel and accessibilityRole to interactive elementsmobile_generateTestFile to prevent regressions| Tool | When |
|---|---|
mobile_auditAccessibility | Run automated a11y scan on the project |
mobile_generateTestFile | Generate a11y-focused test file |
accessible={false} (RN) or excludeFromSemantics: true (Flutter).mobile-theming - semantic color tokens for consistent contrastmobile-component-patterns - accessible component architecturemobile-forms-validation - accessible form error handlingIntegrate AI APIs (OpenAI, Anthropic, Google AI) into a React Native/Expo app. Covers vision, text generation, and audio transcription with secure API key management. Use when the user wants to add AI-powered features to their mobile app.
Add crash reporting and event tracking to a React Native/Expo or Flutter app. Covers Sentry, Firebase Crashlytics, PostHog, source map upload, user identification, session recording, and GDPR compliance. Use when the user wants visibility into crashes, user behavior, or app performance in production.
Submit an Expo/React Native app to the Google Play Store. Covers Play Console setup, signing keys, AAB format, EAS Build and Submit, service accounts, content ratings, and staged rollouts. Use when the user wants to publish to Google Play.
Add animations to a React Native/Expo or Flutter app. Covers Reanimated 3 (shared values, worklets, gesture-driven), Lottie and Rive for vector animations, implicit and explicit Flutter animations, Hero transitions, and performance best practices. Use when the user wants smooth UI transitions, loading animations, or gesture-driven motion.
Integrate REST and GraphQL APIs into a React Native/Expo app. Covers fetch, Axios, React Query, urql, auth headers, retry logic, offline queuing, and optimistic updates. Use when the user needs to connect their app to a backend API.
Add production application performance monitoring (APM) to a React Native/Expo or Flutter app. Covers Sentry Performance, Datadog RUM, and Instabug for error tracking, performance tracing, session replay, and release health. Includes OpenTelemetry spans, cold/warm start metrics, Apdex scoring, alerting, dashboards, and user impact analysis. Use when the user needs to monitor production errors, track app performance, measure launch times, or set up alerting.