Abilyo by WebAbility

Mobile SDK

Mobile accessibility testing with device emulation, touch targets, and responsive checks.

Install

npm install -D @webability/mobile

Single Device

import { mobileScan } from '@webability/mobile'
 
const result = await mobileScan('https://example.com', {
  device: 'iphone-14'
})

Multi-Device

import { multiDeviceScan } from '@webability/mobile'
 
const results = await multiDeviceScan('https://example.com', [
  'iphone-14', 'pixel-7', 'ipad-mini'
])
 
for (const [device, result] of Object.entries(results)) {
  console.log(`${device}: ${result.summary.total} issues`)
}

Devices

IDNameViewport
iphone-14iPhone 14390 x 844
iphone-seiPhone SE375 x 667
pixel-7Pixel 7412 x 915
galaxy-s23Galaxy S23360 x 780
ipad-proiPad Pro 12.9"1024 x 1366
ipad-miniiPad Mini768 x 1024

Mobile Checks

  • Touch target size (WCAG 2.5.8) — minimum 24x24px, recommended 44x44px
  • Viewport overflow (WCAG 1.4.10) — horizontal scroll at mobile width
  • Text size — flags text below 12px
  • Pinch-to-zoom (WCAG 1.4.4) — user-scalable=no or maximum-scale=1
  • Viewport meta — missing <meta name="viewport">

Custom Device

const result = await mobileScan('https://example.com', {
  device: {
    name: 'Custom',
    viewport: { width: 400, height: 800 },
    userAgent: 'Mozilla/5.0 ...',
    isMobile: true,
    hasTouch: true,
    deviceScaleFactor: 2,
  }
})

On this page