UX

User experience checks for viewport, images, and touch targets

How it Works

The UX pillar opens your page with Puppeteer and checks for common user experience issues that cause layout shifts, poor mobile usability, or invisible text.

What it Checks

Rule	Severity	Description
ux/viewport-missing	serious	Page must have <meta name="viewport">
ux/img-no-dimensions	moderate	Images should have explicit width and height attributes
ux/touch-target-small	moderate	Interactive elements should be at least 44x44px (mobile only)
ux/font-display-missing	minor	@font-face rules should have font-display property

Touch Target Check

On mobile device emulation, Web Guard measures the bounding box of all interactive elements (a, button, input, select, textarea, [role='button']). Any element smaller than 44x44px is flagged. This check is skipped in desktop mode.

Configuration

json

{
  "ux": {
    "minScore": 80,
    "ignoreSeverities": ["minor"]
  }
}

Security