Index

Key MX Principles: The Three Pillars

· 7 min read

Machine Experience isn’t a collection of unrelated techniques. It’s a unified methodology built on three interconnected principles that reinforce each other:

  1. Structured Data - Make meaning explicit through Schema.org markup
  2. Accessibility - Build on WCAG 2.1 AA as foundation for agent compatibility
  3. Explicit Intent - Declare what things are and what they do, never rely on inference

Together, these pillars create websites that work reliably for both humans and AI agents.

Pillar 1: Structured Data (Schema.org)

Core principle: Stop making machines guess.

Every piece of information on your website that matters to visitors—prices, contact details, reviews, hours, availability—should be marked up with Schema.org vocabulary so AI agents can parse it with certainty.

Why Schema.org?

Schema.org is a collaborative vocabulary maintained by Google, Microsoft, Yahoo, and Yandex. It provides standardized ways to mark up content so machines can understand it.

Example: Product without structure

<div class="product">
  <div class="name">Wireless Headphones</div>
  <div class="price">$129.99</div>
  <div class="rating">4.5 stars (230 reviews)</div>
</div>

AI agent sees: Three generic divs with text. It might infer meaning, or it might not.

Example: Product with Schema.org

<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="name">Wireless Headphones</span>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">129.99</span>
    <meta itemprop="priceCurrency" content="USD">
  </div>
  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.5</span> stars
    (<span itemprop="reviewCount">230</span> reviews)
  </div>
</div>

AI agent sees: Product entity with explicit name, offer with price and currency, and aggregate rating with value and count. No guessing required.

Common Schema.org Types for MX

Organization - Your company info, location, contact details LocalBusiness - Physical locations, hours, service areas Product - Items you sell, with specifications and pricing Offer - Pricing, availability, shipping details Review - Customer feedback with ratings and dates Article - Content with authorship and publication info FAQPage - Q&A format with structured questions and answers ContactPoint - Support channels, hours, languages

The Structured Data Mindset

Ask yourself: “If this information matters to a human visitor, can an AI agent parse it with certainty?”

If the answer is no, add structure.

Pillar 2: Accessibility (WCAG 2.1 AA)

Core principle: Accessible design IS agent-compatible design.

The things that make websites accessible to humans with disabilities are the SAME things that make them parseable by AI agents. This is the convergence thesis at the heart of Machine Experience.

Why WCAG Matters for AI

WCAG 2.1 AA compliance requires:

Every WCAG fix you make simultaneously improves agent compatibility.

Semantic HTML: The Foundation

Use the right element for the job. Semantic HTML communicates purpose to assistive tech AND AI agents.

Bad (Non-semantic):

<div class="header">
  <div class="nav">
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
  </div>
</div>
<div class="content">
  <div class="article">...</div>
</div>

Good (Semantic):

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
<main>
  <article>...</article>
</main>

The semantic version tells agents: “This is navigation. This is the main content. This is an article.”

Heading Hierarchy: Content Structure

Proper heading structure (h1 → h2 → h3, never skipping levels) shows agents how content is organized.

Why this matters: When an AI agent extracts information from your page, it uses heading hierarchy to understand relationships:

Skipping levels breaks this structure. Agents can’t tell if an h4 under an h2 is a subsection or an error.

Alt Text: Describe, Don’t Decorate

Alt text serves two audiences:

  1. Vision-impaired users using screen readers
  2. AI agents understanding image content

Bad alt text:

<img src="photo.jpg" alt="image">
<img src="logo.png" alt="logo">

Good alt text:

<img src="team-meeting.jpg" alt="Development team reviewing MX implementation on whiteboard">
<img src="mx-logo.png" alt="CogNovaMX company logo">

Good alt text is descriptive, specific, and purposeful.

Pillar 3: Explicit Over Implicit

Core principle: Don’t make machines infer. Declare.

Humans are excellent at inferring meaning from context. Machines are not. If something is disabled, required, loading, or conditional—say so explicitly in your markup, not just visually.

State Must Be Explicit

Visual-only disabled state:

<button class="btn-disabled" style="color: gray; cursor: not-allowed;">
  Submit
</button>

Human sees: Grayed-out button, probably disabled. AI agent sees: Fully functional button with gray text.

Explicit disabled state:

<button disabled aria-disabled="true">
  Submit
</button>

Human sees: Grayed-out button (via browser default styling). AI agent sees: Button explicitly marked disabled. Do not attempt to activate.

Required Fields Must Be Declared

Visual-only required indicator:

<label>Email <span class="required">*</span></label>
<input type="email" name="email">

Human sees: Asterisk indicates required field. AI agent sees: Regular email input with no requirements.

Explicit required declaration:

<label for="email">Email <abbr title="required">*</abbr></label>
<input type="email" id="email" name="email" required aria-required="true">

Human sees: Same asterisk indicator. AI agent sees: Input explicitly marked required. Validate before submission.

Loading States Must Be Announced

Visual-only loading state:

<div class="spinner"></div>

Human sees: Animated spinner, content is loading. AI agent sees: Empty div with class name. Purpose unclear.

Explicit loading state:

<div role="status" aria-live="polite" aria-busy="true">
  <span class="spinner" aria-hidden="true"></span>
  <span class="sr-only">Loading content, please wait...</span>
</div>

Human sees: Spinner (or hears “Loading content” via screen reader). AI agent sees: Content area in busy state, wait before interacting.

Ambiguous navigation:

<div class="menu">
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/support">Support</a>
</div>

Human sees: Menu with links. AI agent sees: Generic container with links. Is this navigation? A footer? A sidebar?

Explicit navigation:

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/support">Support</a></li>
  </ul>
</nav>

Human sees: Same menu. AI agent sees: Primary navigation with current page indicated.

How the Three Pillars Interconnect

The power of Machine Experience comes from how these principles reinforce each other:

Structured Data + Accessibility

Schema.org markup works best on semantically structured HTML. When you use proper elements (<article>, <nav>, <time>), adding Schema.org attributes becomes natural.

Accessibility + Explicit Intent

WCAG requires explicit state declarations (required, disabled, invalid). These same declarations help AI agents understand interaction constraints.

Explicit Intent + Structured Data

When you explicitly mark something as a product, price, or review, you’re simultaneously making it accessible and providing structured data for agents.

Example: All three pillars working together

<article itemscope itemtype="https://schema.org/Product">
  <h2 itemprop="name">Premium Wireless Mouse</h2>

  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <data itemprop="price" value="79.99">$79.99</data>
    <meta itemprop="priceCurrency" content="USD">
    <link itemprop="availability" href="https://schema.org/InStock">
    <span class="stock-status" aria-label="In stock">✓ Available</span>
  </div>

  <button type="submit"
          aria-label="Add Premium Wireless Mouse to cart">
    Add to Cart
  </button>
</article>

This markup:

It works perfectly for humans, screen readers, and AI agents.

Implementing the Three Pillars

Start with one pillar and expand:

Phase 1: Structured Data

Phase 2: Accessibility

Phase 3: Explicit Intent

The goal: Every page should pass all three pillars. Start with your homepage and core user journeys, then expand.

Deep Dives

Want to understand each pillar in depth?

→ Schema.org for AI Agents → Accessibility ↔ AI Convergence → Explicit Over Implicit

Ready to implement?

→ Our Services → Get MX Consultation

Back to Top