Testing & Validation

Comprehensive guide to testing BiModal sites for humans and agents

Testing a BiModal site requires validating two audiences: human users (including those using assistive technologies) and AI agents. This guide covers testing methodologies, tools, and best practices to ensure your site works for everyone.

Jump to Section:

Accessibility Testing Agent Testing Structured Data Performance Testing Manual Checklist Automated Testing Monitoring Tools Reference

Accessibility Testing

Accessibility testing ensures your site works for users with disabilities and assistive technologies. These same features benefit AI agents.

Keyboard Navigation Testing

The Golden Rule:

Unplug your mouse. Can you complete every task using only the keyboard?

Test Procedure:

Use Tab to navigate forward through interactive elements
Use Shift + Tab to navigate backward
Use Enter to activate links and buttons
Use Space to activate buttons and checkboxes
Use Arrow keys for radio buttons and dropdown menus
Use Esc to close modals and dropdowns

What to Check:

✓ All interactive elements are reachable via Tab
✓ Focus order is logical and follows visual layout
✓ Focus indicator is clearly visible
✓ No keyboard traps (can always Tab away)
✓ Skip links work (jump to main content)
✓ Dropdowns and modals close with Esc

Screen Reader Testing

macOS: VoiceOver

Start: Cmd + F5

Navigate: Ctrl + Option + Arrow Keys

Read: Ctrl + Option + A

Windows: NVDA (Free)

Download: nvaccess.org

Navigate: Arrow keys or H for headings

Read: Insert + Down Arrow

What to Listen For:

✓ Page title is read first
✓ Headings are announced with level (e.g., "Heading level 2")
✓ Links describe their destination
✓ Images have descriptive alt text (not filenames)
✓ Form fields have labels that are read aloud
✓ Buttons describe their action
✓ Error messages are announced
✓ Dynamic content updates are announced

Automated Accessibility Testing

axe DevTools (Browser Extension)

Industry-standard tool that finds ~57% of WCAG issues automatically.

Install: Chrome Web Store or Firefox Add-ons

Usage: Open DevTools → axe DevTools tab → Scan Page

Target: Zero violations in each severity category

Lighthouse (Built into Chrome)

Google's audit tool for performance, accessibility, SEO, and best practices.

Usage: DevTools → Lighthouse tab → Generate Report

Target: 90+ accessibility score

Bonus: Also tests performance and SEO

WAVE (WebAIM)

Visual feedback tool that shows accessibility issues directly on the page.

URL: wave.webaim.org

Usage: Enter URL or use browser extension

Advantage: Shows errors in context on the page

⚠️ Important Note:

Automated tools catch only 30-50% of accessibility issues. Manual testing with keyboard and screen readers is essential for full compliance.

Agent Testing

Test how AI agents will experience your site by simulating agent behavior.

The Curl Test

The Ultimate Agent Test:

If curl can't see it, most agents can't either. This test reveals what agents actually receive from your server.

# Fetch your page as an agent would
curl https://yoursite.com

# What to look for:
# ✓ All content is present in the HTML
# ✓ No "Loading..." or empty divs
# ✓ Prices, descriptions visible
# ✓ Forms have proper action attributes
# ✗ Content that only appears after JS runs

Pass Criteria:

✓ All text content is readable in the HTML response
✓ Product information (name, price, description) is present
✓ Navigation links are visible
✓ Forms have proper action URLs
✓ No empty containers waiting for JavaScript

JavaScript Disabled Test

How to Disable JavaScript:

Chrome: DevTools → Settings (⚙️) → Debugger → "Disable JavaScript"

Firefox: about:config → javascript.enabled → false

Safari: Develop menu → Disable JavaScript

What Should Still Work:

✓ All content is visible
✓ Navigation works (standard links)
✓ Forms submit (even if not via AJAX)
✓ Pages are readable and usable
✓ Core functionality is available

What Can Break (Acceptable):

• Interactive features (image galleries, live search)
• Client-side validation (server validation must work)
• Smooth animations and transitions
• Real-time updates

Progressive Enhancement Check: If your site is completely broken without JavaScript, it fails the BiModal test. Core functionality must work without JS.

Data Extraction Test

Test whether agents can easily extract structured data from your pages.

Test data attribute extraction:

// Open browser console and run:

// 1. Find all products
const products = document.querySelectorAll('[data-entity-type="product"]');
console.log('Found', products.length, 'products');

// 2. Extract product data
products.forEach(product => {
  const name = product.querySelector('[data-field="name"]')?.textContent;
  const price = product.querySelector('[data-field="price"]')?.dataset.value;
  console.log({ name, price });
});

// 3. Find available actions
const actions = document.querySelectorAll('[data-action]');
console.log('Available actions:',
  Array.from(actions).map(el => el.dataset.action)
);

Expected Results:

✓ All key entities can be found via data-entity-type
✓ Field values are extractable via data-field
✓ Actions are identifiable via data-action
✓ Data attributes match visible content

Structured Data Validation

Google Rich Results Test

Official Google tool for validating Schema.org markup.

URL: search.google.com/test/rich-results

Usage: Enter URL or paste code

Checks: Product, Article, FAQ, Event, etc.

Target: "Page is eligible for rich results" with no errors

Schema.org Validator

Official Schema.org markup validator.

URL: validator.schema.org

Usage: Paste JSON-LD code

Checks: Valid Schema.org syntax

Target: No errors, valid JSON-LD structure

HTML Validator

W3C's official HTML validation service.

URL: validator.w3.org

Usage: Enter URL or upload file

Checks: Valid HTML5 syntax

Target: No errors (warnings acceptable)

Microdata Testing

Test inline microdata (itemScope, itemProp) if used.

Tool: Google's Rich Results Test

Usage: Automatically detects microdata

Checks: Proper nesting and values

Note: JSON-LD is preferred, but microdata also works

Performance Testing

Core Web Vitals

Google's metrics for user experience. Good scores benefit both humans and search rankings.

LCP

Largest Contentful Paint

<2.5s

Good

FID / INP

Interaction Delay

<100ms

Good

CLS

Cumulative Layout Shift

<0.1

Good

How to Test:

• Lighthouse: Chrome DevTools → Lighthouse → Performance
• PageSpeed Insights: pagespeed.web.dev (tests real user data)
• Chrome DevTools: Performance panel → Record page load

BiModal Performance Advantage

Server-rendered BiModal sites typically score 90+ on Lighthouse performance, while client-side-rendered SPAs struggle to break 60. Progressive enhancement naturally leads to better performance.

Automated Testing

Integrate BiModal testing into your CI/CD pipeline.

Pa11y (Accessibility Testing)

# Install
npm install --save-dev pa11y

# Test a URL
npx pa11y https://yoursite.com

# CI Integration (package.json)
{
  "scripts": {
    "test:a11y": "pa11y https://yoursite.com"
  }
}

Lighthouse CI

# Install
npm install --save-dev @lhci/cli

# Configuration (lighthouserc.json)
{
  "ci": {
    "collect": {
      "url": ["https://yoursite.com"]
    },
    "assert": {
      "preset": "lighthouse:recommended",
      "assertions": {
        "categories:accessibility": ["error", {"minScore": 0.9}]
      }
    }
  }
}

# Run
npx lhci autorun

Custom BiModal Tests (Jest + Playwright)

// bimodal.test.js
import { test, expect } from '@playwright/test';

test('Content visible without JavaScript', async ({ page }) => {
  await page.goto('https://yoursite.com', {
    javaScriptEnabled: false
  });

  // Check that key content is present
  await expect(page.locator('h1')).toBeVisible();
  await expect(page.locator('[data-entity-type="product"]')).toBeVisible();
});

test('Data attributes present', async ({ page }) => {
  await page.goto('https://yoursite.com');

  // Check for entity types
  const products = await page.locator('[data-entity-type="product"]').count();
  expect(products).toBeGreaterThan(0);

  // Check for fields
  const prices = await page.locator('[data-field="price"]').count();
  expect(prices).toBeGreaterThan(0);
});

test('Structured data valid', async ({ page }) => {
  await page.goto('https://yoursite.com');

  // Extract JSON-LD
  const jsonLd = await page.locator('script[type="application/ld+json"]').textContent();
  const data = JSON.parse(jsonLd);

  // Validate structure
  expect(data['@context']).toBe('https://schema.org');
  expect(data['@type']).toBe('Product');
  expect(data.name).toBeTruthy();
});

Continuous Monitoring

Set up ongoing monitoring to catch regressions and maintain BiModal compliance.

Real User Monitoring

Monitor actual user experiences in production.

Tools:

• Google Analytics 4 (Core Web Vitals)
• Sentry (Error tracking)
• LogRocket (Session replay)

What to Track:

• Core Web Vitals scores
• JavaScript errors
• Form submission success rates
• Browser/device breakdown

Scheduled Testing

Run automated tests on a schedule to catch issues early.

Frequency:

• Daily: Accessibility scans
• Weekly: Full Lighthouse audits
• Per deploy: CI/CD integration

Tools:

• GitHub Actions
• Cron jobs + Pa11y
• Lighthouse CI

Complete Tools Reference

Accessibility Testing

axe DevTools

Browser extension, automated scanning

WAVE

Visual feedback tool

Lighthouse

Built into Chrome DevTools

Pa11y

Command-line accessibility testing

VoiceOver / NVDA

Screen reader testing

Validation

W3C HTML Validator

validator.w3.org

Google Rich Results Test

Schema.org validation

Schema.org Validator

validator.schema.org

CSS Validator

jigsaw.w3.org/css-validator

Performance

PageSpeed Insights

Real user Core Web Vitals

WebPageTest

Detailed performance analysis

Lighthouse CI

Continuous performance monitoring

Chrome DevTools

Performance profiling

Automated Testing

Playwright

End-to-end testing

Cypress

Browser automation

Jest

Unit testing

Testing Library

Component testing

Testing is Essential

Regular testing ensures your BiModal site works for everyone—humans with disabilities, users on slow connections, and AI agents. Build testing into your workflow from day one.

Recommended Testing Cadence:

• Every deploy: Automated accessibility + performance tests
• Weekly: Manual keyboard + screen reader testing
• Monthly: Full BiModal compliance audit
• Quarterly: User testing with people with disabilities

Testing & Validation

Jump to Section:

Accessibility Testing

Keyboard Navigation Testing

Test Procedure:

What to Check:

Screen Reader Testing

macOS: VoiceOver

Windows: NVDA (Free)

What to Listen For:

Automated Accessibility Testing

axe DevTools (Browser Extension)

Lighthouse (Built into Chrome)

WAVE (WebAIM)

Agent Testing

The Curl Test

Pass Criteria:

JavaScript Disabled Test

How to Disable JavaScript:

What Should Still Work:

What Can Break (Acceptable):

Data Extraction Test

Expected Results:

Structured Data Validation

Google Rich Results Test

Schema.org Validator

HTML Validator

Microdata Testing

Performance Testing

Core Web Vitals

LCP

FID / INP

CLS

BiModal Performance Advantage

Manual Testing Checklist

HTML & Semantics

Images & Media

Forms

Accessibility

Agent-Friendly

Performance

Automated Testing

Pa11y (Accessibility Testing)

Lighthouse CI

Custom BiModal Tests (Jest + Playwright)

Continuous Monitoring

Real User Monitoring

Scheduled Testing

Complete Tools Reference

Accessibility Testing

Validation

Performance

Automated Testing

Testing is Essential