A comprehensive guide for implementing BiModal Design's Defense in Depth strategy across the full Agent Capability Spectrum.
- Getting Started
- Framework Selection
- Implementation Phases
- Code Integration Patterns
- Testing and Validation
- Performance Optimization
- Deployment Strategies
- Monitoring and Analytics
- Development Environment: Node.js 20+, modern build tools
- Framework Knowledge: Understanding of your chosen framework (React, Vue, etc.)
- Accessibility Basics: Familiarity with semantic HTML, ARIA, and schema.org
- Performance Awareness: Basic understanding of web performance metrics
# Test FR-1: Does content load without JS?
curl -s https://your-app.com/ | grep -E '<(main|nav|h1|article)'
# Test structured data
curl -s https://your-app.com/ | grep "application/ld+json"Assessment Questions:
- Does your app serve meaningful content without JavaScript? (Layer 1)
- Are HTML5 landmarks and ARIA labels used properly? (Layer 2)
- Is structured data (schema.org/JSON-LD) present? (Layer 3)
- Are APIs documented with OpenAPI? (Layer 4)
- Are agent protocols (MCP/A2A) available? (Layer 5)
Choose your implementation strategy based on your current architecture:
Best for: New projects, SEO-critical applications, maximum agent coverage
Frameworks: Next.js (React), Nuxt.js (Vue), SvelteKit, Remix
Agent Coverage: Excellent — Levels 0-5 supported Implementation Effort: Medium
// Next.js: Server component ensures FR-1 compliance
export default async function ProductsPage() {
const products = await fetchProducts();
return (
<main aria-label="Product catalog">
<h1>Product Catalog</h1>
{products.map((product) => (
<article
key={product.id}
itemScope
itemType="https://schema.org/Product"
>
<h2 itemProp="name">{product.name}</h2>
<p itemProp="description">{product.description}</p>
<span itemProp="price" content={product.price}>
${product.price}
</span>
</article>
))}
</main>
);
}Best for: Content sites, blogs, marketing pages, documentation
Frameworks: Astro, Next.js SSG, Nuxt Generate, 11ty
Agent Coverage: Excellent — Levels 0-5 supported Implementation Effort: Low
---
// Astro: All content is pre-rendered at build time
const products = await fetchProducts();
---
<main aria-label="Product catalog">
{products.map((product) => (
<article itemscope itemtype="https://schema.org/Product">
<h2 itemprop="name">{product.name}</h2>
<p itemprop="description">{product.description}</p>
</article>
))}
</main>Best for: Existing SPAs where SSR isn't feasible
Agent Coverage: Partial — Level 0-1 require skeleton content Implementation Effort: High
See CSR Mitigation Guide for detailed strategies.
Best for: Complex applications needing both SPA interactivity and agent support
Agent Coverage: Excellent when properly implemented Implementation Effort: High
Goal: Ensure FR-1 compliance — content in the initial HTML response.
curl -s https://your-app.com/ | grep -E '<(nav|main|h1|form)'
# Should return meaningful semantic elements with contentIf your site fails FR-1, switch to server rendering or static generation. This is the single most impactful change for agent accessibility.
# Level 0 (HTTP Retriever): Does curl return content?
curl -s https://your-app.com/ | wc -c
# Should be >5000 bytes of meaningful HTML
# Level 1 (LLM Browser): Is content parseable?
curl -s https://your-app.com/ | grep -E '<(h1|h2|p|article|section)'Deliverable: FR-1 passing, content visible without JavaScript
Goal: Establish accessible semantic structure for Levels 1-3.
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="/products" aria-current="page">Products</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main aria-label="Product catalog">
<!-- Primary content -->
</main>
<aside aria-label="Related products">
<!-- Complementary content -->
</aside>
<footer>
<!-- Site footer -->
</footer><form aria-label="Contact form" method="POST" action="/contact">
<fieldset>
<legend>Contact Information</legend>
<label for="name">Full Name *</label>
<input
id="name"
required
aria-required="true"
aria-describedby="name-help"
/>
<small id="name-help">Your legal name for our records</small>
</fieldset>
</form><h1>Product Catalog</h1>
<h2>Electronics</h2>
<h3>Wireless Headphones</h3>
<h3>Smart Speakers</h3>
<h2>Clothing</h2>
<h3>T-Shirts</h3>Computer-Use agents rely heavily on the Accessibility Object Model (AOM). Add
explicit aria-keyshortcuts and aria-roledescription to enhance OS-level
interaction, and implement explicit Focus Management (see Pattern 5) to support
keyboard-navigating agents.
<!-- Explicit keyshortcuts tell the agent it can press "C" instead of searching for the button -->
<button aria-label="Add to cart" aria-keyshortcuts="c" onclick="addToCart()">
Add to Cart (C)
</button>
<!-- Describe custom widgets clearly -->
<div
role="group"
aria-roledescription="product carousel"
aria-label="Featured items"
></div>Deliverable: Semantic HTML audit report, ARIA labels on all interactive elements
Goal: Add schema.org structured data for enhanced agent understanding.
<article itemscope itemtype="https://schema.org/Product">
<h2 itemprop="name">Wireless Headphones</h2>
<p itemprop="description">High-quality wireless audio</p>
<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<span itemprop="price" content="99.99">$99.99</span>
<meta itemprop="priceCurrency" content="USD" />
<link itemprop="availability" href="https://schema.org/InStock" />
</div>
</article><script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Wireless Headphones",
"description": "High-quality wireless audio",
"offers": {
"@type": "Offer",
"price": "99.99",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
}
</script>Deliverable: Structured data passing Google Rich Results Test
Goal: Expose programmatic access for Level 4 agents.
openapi: 3.0.0
info:
title: Product Catalog API
version: 1.0.0
paths:
/api/products:
get:
summary: List all products
parameters:
- name: category
in: query
schema:
type: string
responses:
'200':
description: Product list
content:
application/json:
schema:
type: array
items:
$ref: '#/components/schemas/Product'<link rel="api" type="application/openapi+json" href="/api/openapi.json" />Deliverable: OpenAPI spec published, API endpoints tested
Goal: Enable protocol-native agent access for Level 5.
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
const server = new McpServer({ name: 'product-catalog', version: '1.0.0' });
server.tool('search_products', { query: z.string() }, async ({ query }) => {
const results = await searchProducts(query);
return { content: [{ type: 'text', text: JSON.stringify(results) }] };
});// /.well-known/agent.json
{
"name": "Product Catalog Agent",
"description": "Search and browse product catalog",
"capabilities": ["product-search", "product-details", "add-to-cart"],
"protocols": ["mcp", "a2a"]
}Deliverable: MCP server functional, Agent Card published
Goal: Verify implementation across all agent levels.
See Testing and Validation below.
Start with accessible HTML, enhance with JavaScript:
<!-- Base: Works for all agent levels -->
<button type="button" aria-label="Add to cart">Add to Cart</button>
<!-- Enhanced: JavaScript adds interactivity for humans -->
<script>
document
.querySelector('[aria-label="Add to cart"]')
.addEventListener('click', handleAddToCart);
</script>Use schema.org and ARIA instead of custom attributes:
<!-- v3.0: Standards-based approach -->
<article itemscope itemtype="https://schema.org/Product">
<h2 itemprop="name">Wireless Headphones</h2>
<p itemprop="description">Premium wireless audio</p>
<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<span itemprop="price" content="99.99">$99.99</span>
</div>
<button aria-label="Add Wireless Headphones to cart">Add to Cart</button>
</article>Forms that work without JavaScript:
<form method="POST" action="/api/contact" aria-label="Contact form">
<fieldset>
<legend>Contact Information</legend>
<label for="email">Email *</label>
<input id="email" type="email" name="email" required aria-required="true" />
</fieldset>
<button type="submit">Send Message</button>
</form>Serve content at multiple levels simultaneously:
<!-- Layer 1: Content in HTML -->
<main aria-label="Product catalog">
<h1>Our Products</h1>
<!-- Layer 2: Semantic structure -->
<section aria-labelledby="electronics-heading">
<h2 id="electronics-heading">Electronics</h2>
<!-- Layer 3: Structured data -->
<article itemscope itemtype="https://schema.org/Product">
<h3 itemprop="name">Wireless Headphones</h3>
</article>
</section>
</main>
<!-- Layer 3: JSON-LD for richer structured data -->
<script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "ItemList", ... }
</script>
<!-- Layer 4: API link for programmatic access -->
<link rel="api" href="/api/openapi.json" />
<!-- Layer 5: MCP Server Discovery -->
<link rel="alternate" type="application/mcp+json" href="/mcp-server" />Computer-Use agents often navigate via keyboard. Manage focus explicitly when dynamic content loads:
function showModal() {
const modal = document.getElementById('checkout-modal');
modal.removeAttribute('hidden');
modal.setAttribute('aria-modal', 'true');
// Explicitly move focus for keyboard-navigating agents
const firstInput = modal.querySelector('input');
if (firstInput) firstInput.focus();
}Agents evaluated in benchmarks like ST-WebAgentBench can make destructive mistakes if inputs aren't constrained. Use standard HTML5 validation to proactively guide agent tool use:
<form id="transfer-funds-form">
<!-- The pattern and min/max explicitly constrain agent behavior before submission -->
<input
type="text"
name="account"
required
pattern="[0-9]{10}"
aria-label="10-digit Account Number"
/>
<input
type="number"
name="amount"
required
min="1"
max="5000"
aria-label="Transfer Amount (Max 5000)"
/>
<button type="submit" aria-label="Confirm Transfer">Transfer</button>
</form>When an agent attempts a critical action, use <dialog aria-modal="true"> and
schema.org/ConfirmAction to pause execution and prompt the human. This
satisfies multi-turn interaction requirements highlighted by τ-bench.
<!-- The dialog blocks the rest of the UI, explicitly pausing the agent -->
<dialog
id="confirmation-modal"
aria-modal="true"
aria-labelledby="confirm-title"
itemscope
itemtype="https://schema.org/ConfirmAction"
>
<h2 id="confirm-title" itemprop="name">Confirm Transfer</h2>
<p itemprop="description">
Are you sure you want to transfer $5,000 to Account 1234567890?
</p>
<form method="dialog">
<!-- The human or agent must interact with these explicit controls -->
<button value="cancel" aria-label="Cancel transfer">Cancel</button>
<button value="confirm" aria-label="Confirm transfer">Confirm</button>
</form>
</dialog>
<script>
// Show the modal explicitly to trigger a focus change and pause flow
document.getElementById('confirmation-modal').showModal();
</script># Level 0: HTTP Retriever
curl -s https://your-app.com/ | grep -E '<(main|nav|h1)'
# Expected: semantic HTML with content
# Level 1: LLM Browser
curl -s https://your-app.com/ | grep "application/ld+json"
# Expected: structured data present
# Level 2: Browser Automation
npx playwright test --project=chromium
# Expected: all flows complete
# Level 4: Tool-Use Agent
curl https://your-app.com/api/products
# Expected: JSON response with typed data
# Level 5: Protocol-Native
# Test MCP server connectivity// playwright.config.js
module.exports = {
projects: [
{
name: 'level-0-http',
use: { javaScriptEnabled: false },
},
{
name: 'level-2-automation',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'level-3-vision',
use: {
...devices['Desktop Chrome'],
screenshot: 'on',
},
},
],
};Layer 1 — Content Accessibility:
- Content loads without JavaScript
- Navigation works with keyboard only
- Forms submit successfully server-side
Layer 2 — Semantic Structure:
- HTML5 landmarks present
- ARIA labels on interactive elements
- Heading hierarchy correct
Layer 3 — Structured Data:
- JSON-LD validates (Google Rich Results Test)
- schema.org types correct
- OpenGraph meta tags present
Layer 4 — API Surface:
- OpenAPI spec validates
- API endpoints return correct data
- Error responses are clear
Layer 5 — Agent Protocols:
- MCP tools callable
- Agent Card accessible at
/.well-known/agent.json
- First Contentful Paint (FCP): < 1.0s
- Largest Contentful Paint (LCP): < 1.5s
- Cumulative Layout Shift (CLS): < 0.1
- Time to First Byte (TTFB): < 200ms for agents
<!-- Inline critical CSS for faster agent parsing -->
<style>
main {
display: block;
}
nav {
display: flex;
}
</style>
<!-- Defer non-critical JavaScript -->
<script src="/app.js" defer></script># Compress content
gzip on;
gzip_types text/html text/css application/javascript application/json;
# Cache static assets
location ~* \.(css|js|png|jpg|svg|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}Single deployment with server rendering for all users:
// Next.js App Router: server components by default
export default async function Page() {
const data = await fetchData();
return <MainContent data={data} />;
}Pre-build pages, revalidate on a schedule:
// Next.js: Incremental Static Regeneration
export const revalidate = 3600; // Revalidate every hour
export default async function Page() {
const data = await fetchData();
return <MainContent data={data} />;
}Deploy at the edge for lowest latency:
// Cloudflare Workers / Vercel Edge
export const runtime = 'edge';
export default async function Page() {
const data = await fetchData();
return <MainContent data={data} />;
}Agent Coverage Metrics:
- Content accessibility rate by agent level
- Structured data validation pass rate
- API response times and error rates
- MCP tool invocation success rate
Business Impact Metrics:
- AI-assisted discovery rate (GEO performance)
- Search engine indexing coverage
- Agent task completion rates
- Accessibility compliance scores
# Periodic FR-1 check
curl -s https://your-app.com/ | grep -c '<(main|nav|h1|article)'
# Structured data validation
curl -s https://your-app.com/ | grep -c 'application/ld+json'
# API health
curl -s -o /dev/null -w "%{http_code}" https://your-app.com/api/products- Framework selection completed
- Team trained on BiModal Design v3.0 concepts
- Agent Capability Spectrum understood
- Defense in Depth layers prioritized
- FR-1 compliance verified
- SSR/SSG implemented
- Content visible without JavaScript
- HTML5 landmarks added
- ARIA labels implemented
- Heading hierarchy correct
- Forms properly structured
- schema.org microdata on key content
- JSON-LD blocks for rich data
- OpenGraph meta tags present
- REST/GraphQL endpoints documented
- OpenAPI specification published
- API discoverable via link tags
- MCP server implemented (optional)
- Agent Card published (optional)
- NLWeb endpoint available (optional)
- All agent levels tested
- Performance benchmarks met
- Compliance checklist passed
- Monitoring configured
- Review the whitepaper — BiModal Design v3.0
- Check compliance — Compliance Checklist
- See examples — Implementation Examples
- Troubleshoot issues — Troubleshooting Guide
- Documentation: BiModal Design Docs
- Examples: Implementation Examples
- Issues: GitHub Issues
- Discussions: Community Forum