BiModal Design Examples

Production-ready code examples that work for humans and AI agents

These examples demonstrate BiModal Design principles in practice. Each example includes semantic HTML, ARIA attributes, structured data, and progressive enhancement. You can copy and adapt any of these patterns for your own projects.

Jump to Example:

Product Card Contact Form Search Interface Navigation Menu Blog Article Modal Dialog Data Table Login Form

Product Card

E-commerce product listing with pricing and cart action

BiModal Features:

✓ Schema.org Product structured data
✓ Agent-friendly data attributes
✓ Accessible button with clear action
✓ Descriptive image alt text
✓ Works without JavaScript

<article
  data-entity-type="product"
  data-product-id="wireless-mouse-001"
  itemScope
  itemType="https://schema.org/Product"
>
  <img
    src="/mouse.jpg"
    alt="Ergonomic wireless mouse with 5 programmable buttons"
    itemProp="image"
    width="300"
    height="300"
  >

  <h3 itemProp="name" data-field="name">
    Ergonomic Wireless Mouse
  </h3>

  <p itemProp="description" data-field="description">
    Comfortable wireless mouse with programmable buttons and long battery life
  </p>

  <div data-entity-type="pricing">
    <p itemProp="offers" itemScope itemType="https://schema.org/Offer">
      <span
        itemProp="price"
        data-field="price"
        data-amount="49.99"
        data-currency="USD"
      >
        $49.99
      </span>
      <meta itemProp="priceCurrency" content="USD">
      <link itemProp="availability" href="https://schema.org/InStock">
      <span data-field="availability" data-status="in-stock">
        In Stock
      </span>
    </p>
  </div>

  <form action="/cart/add" method="POST" data-action="add-to-cart">
    <input type="hidden" name="product-id" value="wireless-mouse-001">
    <button
      type="submit"
      aria-label="Add Ergonomic Wireless Mouse to cart"
      data-action="add-to-cart"
      data-product-id="wireless-mouse-001"
    >
      Add to Cart
    </button>
  </form>
</article>

Contact Form

Accessible form with validation and error handling

BiModal Features:

✓ All inputs properly labeled
✓ Required fields marked with aria-required
✓ Error messages with role="alert"
✓ Hint text with aria-describedby
✓ Server-side validation (works without JS)
✓ Clear form purpose with data-action

<form
  action="/contact"
  method="POST"
  data-action="contact"
  data-intent="communicate"
  aria-label="Contact form"
>
  <!-- Name field -->
  <div>
    <label for="name">
      Name <span aria-label="required">*</span>
    </label>
    <input
      type="text"
      id="name"
      name="name"
      required
      aria-required="true"
      data-field="name"
    >
  </div>

  <!-- Email field with hint -->
  <div>
    <label for="email">
      Email <span aria-label="required">*</span>
    </label>
    <input
      type="email"
      id="email"
      name="email"
      required
      aria-required="true"
      aria-describedby="email-hint"
      data-field="email"
    >
    <p id="email-hint" class="hint">
      We'll never share your email with anyone
    </p>
  </div>

  <!-- Phone field with error (if validation failed) -->
  <div>
    <label for="phone">Phone</label>
    <input
      type="tel"
      id="phone"
      name="phone"
      aria-describedby="phone-error"
      aria-invalid="true"
      data-field="phone"
    >
    <p id="phone-error" role="alert" class="error">
      Please enter a valid phone number (e.g., 555-123-4567)
    </p>
  </div>

  <!-- Message field -->
  <div>
    <label for="message">
      Message <span aria-label="required">*</span>
    </label>
    <textarea
      id="message"
      name="message"
      rows="5"
      required
      aria-required="true"
      data-field="message"
    ></textarea>
  </div>

  <!-- Consent checkbox -->
  <div>
    <label>
      <input
        type="checkbox"
        name="consent"
        required
        aria-required="true"
      >
      I agree to the privacy policy
    </label>
  </div>

  <!-- Submit button -->
  <button type="submit" data-action="submit">
    Send Message
  </button>
</form>

Search Interface

Search form with results and pagination

BiModal Features:

✓ role="search" for search form
✓ Results count for screen readers
✓ Pagination with aria-label
✓ Current page indicator
✓ Data attributes for result metadata

<!-- Search form -->
<form
  action="/search"
  method="GET"
  role="search"
  data-action="search"
  data-intent="inform"
>
  <label for="search-input">Search products</label>
  <input
    type="search"
    id="search-input"
    name="q"
    placeholder="Enter search terms..."
    aria-label="Search products"
    data-field="search-query"
  >
  <button type="submit" data-action="search">
    Search
  </button>
</form>

<!-- Search results -->
<section
  data-entity-type="search-results"
  data-query="wireless mouse"
  data-result-count="24"
  aria-label="Search results"
>
  <!-- Results summary -->
  <h2>
    <span data-field="result-count">24</span> results for
    "<span data-field="query">wireless mouse</span>"
  </h2>

  <!-- Individual result -->
  <article
    data-entity-type="product"
    data-search-result="true"
    data-result-position="1"
  >
    <h3 data-field="name">
      <a href="/products/wireless-mouse">Ergonomic Wireless Mouse</a>
    </h3>
    <p data-field="price">$49.99</p>
    <p data-field="description">
      Comfortable wireless mouse with programmable buttons
    </p>
  </article>

  <!-- More results... -->

  <!-- Pagination -->
  <nav
    aria-label="Search pagination"
    data-entity-type="pagination"
  >
    <ul>
      <li>
        <a
          href="/search?q=wireless+mouse&page=1"
          aria-current="page"
          data-page="1"
        >
          1
        </a>
      </li>
      <li>
        <a
          href="/search?q=wireless+mouse&page=2"
          data-page="2"
        >
          2
        </a>
      </li>
      <li>
        <a
          href="/search?q=wireless+mouse&page=3"
          data-page="3"
        >
          3
        </a>
      </li>
      <li>
        <a
          href="/search?q=wireless+mouse&page=2"
          rel="next"
          aria-label="Next page"
        >
          Next
        </a>
      </li>
    </ul>
  </nav>
</section>

<nav aria-label="Main navigation">
  <ul>
    <!-- Simple link -->
    <li>
      <a href="/" data-nav-priority="high">
        Home
      </a>
    </li>

    <!-- Active page -->
    <li>
      <a
        href="/products"
        aria-current="page"
        data-nav-priority="high"
      >
        Products
      </a>
    </li>

    <!-- Dropdown menu -->
    <li>
      <button
        aria-expanded="false"
        aria-controls="about-menu"
        data-nav-priority="medium"
      >
        About
      </button>
      <ul id="about-menu" hidden>
        <li>
          <a href="/about/company">Company</a>
        </li>
        <li>
          <a href="/about/team">Team</a>
        </li>
        <li>
          <a href="/about/careers">Careers</a>
        </li>
      </ul>
    </li>

    <!-- Contact link -->
    <li>
      <a href="/contact" data-nav-priority="medium">
        Contact
      </a>
    </li>
  </ul>
</nav>

<script>
// Progressive enhancement for dropdown
const dropdownButton = document.querySelector('[aria-controls="about-menu"]');
const dropdownMenu = document.getElementById('about-menu');

dropdownButton.addEventListener('click', () => {
  const isExpanded = dropdownButton.getAttribute('aria-expanded') === 'true';
  dropdownButton.setAttribute('aria-expanded', !isExpanded);
  dropdownMenu.hidden = isExpanded;
});

// Close on Escape
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && !dropdownMenu.hidden) {
    dropdownButton.setAttribute('aria-expanded', 'false');
    dropdownMenu.hidden = true;
    dropdownButton.focus();
  }
});
</script>

Blog Article

Article with Schema.org markup and proper structure

BiModal Features:

✓ Schema.org BlogPosting structured data
✓ Proper heading hierarchy
✓ Author and date metadata
✓ Table of contents with skip links
✓ Semantic article structure

<!-- Structured data in head -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Getting Started with BiModal Design",
  "description": "Learn how to build websites for humans and AI agents",
  "image": "https://example.com/article-image.jpg",
  "author": {
    "@type": "Person",
    "name": "Jane Developer",
    "url": "https://example.com/author/jane"
  },
  "publisher": {
    "@type": "Organization",
    "name": "BiModal Design",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "datePublished": "2025-01-15T08:00:00Z",
  "dateModified": "2025-01-20T10:30:00Z",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/blog/bimodal-intro"
  }
}
</script>

<!-- Article structure -->
<article data-entity-type="article">
  <!-- Header -->
  <header>
    <h1 data-field="title">Getting Started with BiModal Design</h1>

    <p class="meta">
      By <span data-field="author">Jane Developer</span> •
      <time
        datetime="2025-01-15T08:00:00Z"
        data-field="published-date"
      >
        January 15, 2025
      </time>
    </p>
  </header>

  <!-- Table of contents -->
  <nav aria-label="Table of contents">
    <h2>Contents</h2>
    <ul>
      <li><a href="#introduction">Introduction</a></li>
      <li><a href="#principles">Core Principles</a></li>
      <li><a href="#implementation">Implementation</a></li>
      <li><a href="#conclusion">Conclusion</a></li>
    </ul>
  </nav>

  <!-- Article body -->
  <div data-field="content">
    <section id="introduction" aria-labelledby="intro-heading">
      <h2 id="intro-heading">Introduction</h2>
      <p>
        BiModal Design is an approach to web development that creates
        interfaces accessible to both human users and AI agents...
      </p>
    </section>

    <section id="principles" aria-labelledby="principles-heading">
      <h2 id="principles-heading">Core Principles</h2>
      <p>
        The foundation of BiModal Design rests on three principles...
      </p>
    </section>

    <section id="implementation" aria-labelledby="implementation-heading">
      <h2 id="implementation-heading">Implementation</h2>
      <p>
        To implement BiModal Design, start with semantic HTML...
      </p>
    </section>

    <section id="conclusion" aria-labelledby="conclusion-heading">
      <h2 id="conclusion-heading">Conclusion</h2>
      <p>
        By following these principles, you can build websites that
        serve both audiences effectively...
      </p>
    </section>
  </div>
</article>

Modal Dialog

Accessible modal with focus trap and keyboard controls

BiModal Features:

✓ role="dialog" and aria-modal="true"
✓ aria-labelledby for dialog title
✓ Focus trapped inside modal
✓ Esc key closes modal
✓ Focus returns to trigger on close
✓ Background content inert

<!-- Trigger button -->
<button
  id="open-modal"
  data-action="open-dialog"
>
  Open Dialog
</button>

<!-- Modal dialog (hidden by default) -->
<div
  id="modal"
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  hidden
  class="modal-overlay"
>
  <div class="modal-content">
    <!-- Close button -->
    <button
      id="close-modal"
      aria-label="Close dialog"
      data-action="close-dialog"
    >
      ×
    </button>

    <!-- Modal header -->
    <h2 id="modal-title">Confirm Action</h2>

    <!-- Modal body -->
    <p>
      Are you sure you want to proceed with this action?
    </p>

    <!-- Modal actions -->
    <div class="modal-actions">
      <button
        id="modal-cancel"
        data-action="cancel"
      >
        Cancel
      </button>
      <button
        id="modal-confirm"
        data-action="confirm"
      >
        Confirm
      </button>
    </div>
  </div>
</div>

<script>
const modal = document.getElementById('modal');
const openButton = document.getElementById('open-modal');
const closeButton = document.getElementById('close-modal');
const cancelButton = document.getElementById('modal-cancel');
const confirmButton = document.getElementById('modal-confirm');
let previousFocus;

// Open modal
openButton.addEventListener('click', () => {
  previousFocus = document.activeElement;
  modal.hidden = false;
  closeButton.focus();

  // Trap focus in modal
  document.addEventListener('keydown', trapFocus);
});

// Close modal
function closeModal() {
  modal.hidden = true;
  document.removeEventListener('keydown', trapFocus);
  previousFocus.focus();
}

closeButton.addEventListener('click', closeModal);
cancelButton.addEventListener('click', closeModal);

// Close on Escape
function trapFocus(e) {
  if (e.key === 'Escape') {
    closeModal();
  }

  // Keep focus inside modal
  if (e.key === 'Tab') {
    const focusableElements = modal.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    const firstElement = focusableElements[0];
    const lastElement = focusableElements[focusableElements.length - 1];

    if (e.shiftKey && document.activeElement === firstElement) {
      lastElement.focus();
      e.preventDefault();
    } else if (!e.shiftKey && document.activeElement === lastElement) {
      firstElement.focus();
      e.preventDefault();
    }
  }
}
</script>

Data Table

Accessible data table with sortable columns

BiModal Features:

✓ Proper table structure (thead, tbody)
✓ Column headers with scope="col"
✓ Caption for table description
✓ aria-sort for sortable columns
✓ Data attributes for values

<table data-entity-type="data-table">
  <caption>Product Inventory</caption>

  <thead>
    <tr>
      <th scope="col">
        <button
          aria-sort="ascending"
          data-column="product"
        >
          Product
        </button>
      </th>
      <th scope="col">
        <button
          aria-sort="none"
          data-column="price"
        >
          Price
        </button>
      </th>
      <th scope="col">
        <button
          aria-sort="none"
          data-column="stock"
        >
          In Stock
        </button>
      </th>
      <th scope="col">Actions</th>
    </tr>
  </thead>

  <tbody>
    <tr data-product-id="001">
      <td data-field="product">Wireless Mouse</td>
      <td
        data-field="price"
        data-value="49.99"
      >
        $49.99
      </td>
      <td
        data-field="stock"
        data-value="25"
      >
        25
      </td>
      <td>
        <button
          aria-label="Edit Wireless Mouse"
          data-action="edit"
        >
          Edit
        </button>
      </td>
    </tr>

    <tr data-product-id="002">
      <td data-field="product">Keyboard</td>
      <td
        data-field="price"
        data-value="89.99"
      >
        $89.99
      </td>
      <td
        data-field="stock"
        data-value="12"
      >
        12
      </td>
      <td>
        <button
          aria-label="Edit Keyboard"
          data-action="edit"
        >
          Edit
        </button>
      </td>
    </tr>

    <tr data-product-id="003">
      <td data-field="product">Monitor</td>
      <td
        data-field="price"
        data-value="299.99"
      >
        $299.99
      </td>
      <td
        data-field="stock"
        data-value="8"
      >
        8
      </td>
      <td>
        <button
          aria-label="Edit Monitor"
          data-action="edit"
        >
          Edit
        </button>
      </td>
    </tr>
  </tbody>
</table>

Login Form

Authentication form with security best practices

BiModal Features:

✓ autocomplete attributes for password managers
✓ aria-describedby for password requirements
✓ Clear error messages
✓ data-action and data-intent attributes
✓ data-requires-auth for protected routes

<form
  action="/login"
  method="POST"
  data-action="login"
  data-intent="authenticate"
>
  <h2>Sign In</h2>

  <!-- Email field -->
  <div>
    <label for="email">Email</label>
    <input
      type="email"
      id="email"
      name="email"
      autocomplete="email"
      required
      aria-required="true"
      data-field="email"
    >
  </div>

  <!-- Password field -->
  <div>
    <label for="password">Password</label>
    <input
      type="password"
      id="password"
      name="password"
      autocomplete="current-password"
      required
      aria-required="true"
      aria-describedby="password-requirements"
      data-field="password"
    >
    <p id="password-requirements" class="hint">
      Password must be at least 8 characters
    </p>
  </div>

  <!-- Remember me -->
  <div>
    <label>
      <input
        type="checkbox"
        name="remember"
        data-field="remember-me"
      >
      Remember me
    </label>
  </div>

  <!-- Error message (shown if login fails) -->
  <div role="alert" aria-live="polite" class="error">
    Invalid email or password. Please try again.
  </div>

  <!-- Submit button -->
  <button type="submit" data-action="login">
    Sign In
  </button>

  <!-- Alternative actions -->
  <p>
    <a
      href="/forgot-password"
      data-action="forgot-password"
    >
      Forgot password?
    </a>
  </p>

  <p>
    Don't have an account?
    <a
      href="/signup"
      data-action="signup"
    >
      Sign up
    </a>
  </p>
</form>

Download All Examples

Get all these examples as a downloadable code package with additional documentation and starter templates.

Additional Resources

CodePen Collection

Interactive demos you can fork and experiment with

View on CodePen →

GitHub Repository

Full source code with Next.js, Remix, and SvelteKit examples

View on GitHub →

Component Library

Pre-built BiModal components for React, Vue, and Svelte

Browse Components →

Build Your Own BiModal Site

Now that you've seen these examples, follow our step-by-step tutorial to build your first BiModal site from scratch.

Start the Tutorial →