BiModal Design Examples

<form
  action="/contact"
  method="POST"
  data-agent-action="get-support"
  data-agent-intent="contact"
  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"
    >
  </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"
    >
    <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"
    >
    <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"
    ></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">
    Send Message
  </button>
</form>

<!-- Search form -->
<form
  action="/search"
  method="GET"
  role="search"
  data-agent-action="browse-home"
  data-agent-page="search"
>
  <label for="search-input">Search products</label>
  <input
    type="search"
    id="search-input"
    name="q"
    placeholder="Enter search terms..."
    aria-label="Search products"
  >
  <button type="submit">
    Search
  </button>
</form>

<!-- Search results -->
<section
  data-agent-component="product-list"
  data-agent-content-type="listing"
  aria-label="Search results"
>
  <!-- Results summary -->
  <h2>
    24 results for "wireless mouse"
  </h2>

  <!-- Individual result -->
  <article
    data-agent-component="product-card"
    data-agent-content-type="product"
  >
    <h3 data-agent-content="product-name">
      <a href="/products/wireless-mouse">Ergonomic Wireless Mouse</a>
    </h3>
    <p data-agent-content="product-price">$49.99</p>
    <p data-agent-content="product-description">
      Comfortable wireless mouse with programmable buttons
    </p>
    <a
      href="/products/wireless-mouse"
      data-agent-action="view-product-details"
    >
      View Details
    </a>
  </article>

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

  <!-- Pagination -->
  <nav aria-label="Search pagination">
    <ul>
      <li>
        <a
          href="/search?q=wireless+mouse&page=1"
          aria-current="page"
        >
          1
        </a>
      </li>
      <li>
        <a href="/search?q=wireless+mouse&page=2">2</a>
      </li>
      <li>
        <a href="/search?q=wireless+mouse&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"
  data-agent-component="navigation"
>
  <ul>
    <!-- Home link -->
    <li>
      <a href="/" data-agent-action="go-home">
        Home
      </a>
    </li>

    <!-- Active page -->
    <li>
      <a
        href="/products"
        aria-current="page"
        data-agent-action="view-products"
      >
        Products
      </a>
    </li>

    <!-- Dropdown menu -->
    <li>
      <button
        aria-expanded="false"
        aria-controls="about-menu"
      >
        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-agent-action="get-support">
        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>

<!-- 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-agent-component="main-content" data-agent-content-type="article">
  <!-- Header -->
  <header>
    <h1 data-agent-content="page-title">Getting Started with BiModal Design</h1>

    <p class="meta">
      By <span>Jane Developer</span> •
      <time datetime="2025-01-15T08:00:00Z">
        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-agent-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>

<!-- Trigger button -->
<button id="open-modal">
  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"
    >
      ×
    </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">Cancel</button>
      <button id="modal-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>

<table>
  <caption>Product Inventory</caption>

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

  <tbody>
    <tr>
      <td>Wireless Mouse</td>
      <td>$49.99</td>
      <td>25</td>
      <td>
        <button aria-label="Edit Wireless Mouse">Edit</button>
      </td>
    </tr>

    <tr>
      <td>Keyboard</td>
      <td>$89.99</td>
      <td>12</td>
      <td>
        <button aria-label="Edit Keyboard">Edit</button>
      </td>
    </tr>

    <tr>
      <td>Monitor</td>
      <td>$299.99</td>
      <td>8</td>
      <td>
        <button aria-label="Edit Monitor">Edit</button>
      </td>
    </tr>
  </tbody>
</table>

<form
  action="/login"
  method="POST"
  data-agent-action="skip-to-content"
  data-agent-page="login"
  data-agent-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"
    >
  </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"
    >
    <p id="password-requirements" class="hint">
      Password must be at least 8 characters
    </p>
  </div>

  <!-- Remember me -->
  <div>
    <label>
      <input type="checkbox" name="remember">
      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">
    Sign In
  </button>

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

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