How to implement Accessibility testing for web and mobile apps

Accessibility testing is becoming just as important as functional testing today. Let’s go over how to implement accessibility testing for both web and mobile apps, including tools, automation, and integration into CI/CD.

---

🌐 Accessibility Testing for Web Apps

1. Goals

Accessibility testing ensures your website can be used by:

• People with visual, auditory, motor, or cognitive disabilities
• Screen readers, keyboard-only navigation, and assistive devices

It checks compliance with standards like WCAG 2.1, Section 508, and ARIA guidelines.

---

2. Methods

✅ Manual Testing

• Keyboard navigation: Tab through elements, ensure focus order and visible focus indicators.
• Screen readers: Test with NVDA (Windows) or VoiceOver (Mac). Check if labels, alt text, and landmarks make sense.
• Color contrast: Verify sufficient contrast ratio (minimum 4.5:1 for text).

🤖 Automated Testing

You can automate basic accessibility checks.

Popular Tools / Libraries

Tool	Description	Integration
axe-core	Most popular accessibility engine	Integrates with Selenium, Playwright, Cypress
Pa11y	CLI & CI-friendly	Great for continuous testing
Lighthouse	Chrome DevTools tool	Built-in accessibility audits
WAVE	Browser extension	For visual feedback

Example (using Playwright + axe-core):

// Example in JavaScript / TypeScript
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('Accessibility check', async ({ page }) => {
  await page.goto('https://example.com');
  const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
  console.log(accessibilityScanResults.violations);
});

This outputs all accessibility rule violations.

---

3. CI/CD Integration

• Run axe-core / Pa11y / Lighthouse CI in your build pipeline.
• Fail builds if critical accessibility issues are detected.

Example:

pa11y-ci --config .pa11yci

---

📱 Accessibility Testing for Mobile Apps

1. For Android

• Use Android Accessibility Scanner (by Google).
• Test with TalkBack (screen reader).
• Use Espresso Accessibility Checks for automated testing:

AccessibilityChecks.enable();
onView(withId(R.id.loginButton)).perform(click());

This automatically fails the test if the view is not accessible.

---

2. For iOS

• Use XCUITest with Apple’s accessibility API.
• Test with VoiceOver.
• Validate labels, hints, and traits on UI elements.

Automated check example:

let button = app.buttons["Login"]
XCTAssertTrue(button.isHittable, "Login button should be accessible")

---

3. Cross-Platform / Hybrid Apps

For React Native, Flutter, etc.:

• Use Detox or Appium + axe-core-mobile for automated accessibility testing.
• Accessibility IDs should be consistently defined across iOS and Android.

---

🧩 Summary Table

Area	Web	Mobile
Manual tools	Screen reader (NVDA, VoiceOver), WAVE	TalkBack, VoiceOver
Automation tools	axe-core, Pa11y, Lighthouse	Espresso, XCUITest, axe-core-mobile
CI/CD integration	Pa11y CI, Lighthouse CI	Espresso / XCUITest in pipeline
Main focus	ARIA roles, alt text, contrast, keyboard	Labels, hints, touch targets

---

✅ Best Practices

• Start early — run accessibility checks during development, not just before release.
• Educate devs about semantic HTML and ARIA.
• Include accessibility acceptance criteria in user stories.
• Re-test after UI changes or redesigns.