MX Implementation Examples - See It In Practice

Theory is valuable. Examples are essential.

Here are real patterns from MX implementations showing how the three pillars work in practice.

E-Commerce Product Page

Before MX

<div class="product">
  <img src="headphones.jpg">
  <div class="name">Pro Headphones</div>
  <div class="price">$299</div>
  <div class="rating">★★★★★ 4.8/5</div>
  <button class="buy">Buy Now</button>
</div>

Problems:

• No structured data (agents guess product details)
• Missing alt text (vision-impaired users and agents)
• No explicit availability or currency
• Button lacks accessible label

After MX

<article itemscope itemtype="https://schema.org/Product">
  <img src="headphones.jpg" itemprop="image"
       alt="Professional over-ear headphones with active noise cancellation">

  <h2 itemprop="name">Pro Headphones</h2>

  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <data itemprop="price" value="299.00">$299</data>
    <meta itemprop="priceCurrency" content="USD">
    <link itemprop="availability" href="https://schema.org/InStock">
  </div>

  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    <span class="stars" aria-label="4.8 out of 5 stars">★★★★★</span>
    <data itemprop="ratingValue">4.8</data>/<data itemprop="bestRating">5</data>
  </div>

  <button type="button" aria-label="Add Pro Headphones to cart">
    Buy Now
  </button>
</article>

Improvements:

• Schema.org Product/Offer markup
• Descriptive alt text
• Explicit price, currency, availability
• Semantic article element
• Accessible button label
• Screen reader friendly rating

Contact Form

Before MX

<form>
  <div>
    Name <span class="req">*</span>
    <input type="text" name="name">
  </div>
  <div>
    Email <span class="req">*</span>
    <input type="text" name="email">
  </div>
  <div>
    <input type="submit" value="Send">
  </div>
</form>

Problems:

• No label association
• Required not declared in markup
• No error handling
• Generic input types

After MX

<form aria-label="Contact form">
  <div>
    <label for="name">Name <abbr title="required">*</abbr></label>
    <input type="text" id="name" name="name" 
           required aria-required="true"
           aria-invalid="false"
           aria-describedby="name-error">
    <span id="name-error" role="alert" aria-live="polite"></span>
  </div>

  <div>
    <label for="email">Email <abbr title="required">*</abbr></label>
    <input type="email" id="email" name="email"
           required aria-required="true"
           aria-invalid="false"
           aria-describedby="email-error"
           autocomplete="email">
    <span id="email-error" role="alert" aria-live="polite"></span>
  </div>

  <div>
    <button type="submit">Send Message</button>
  </div>
</form>

Improvements:

• Explicit label association (for/id)
• Required declared in markup
• Error containers with ARIA live regions
• Proper input types (email)
• Autocomplete hints
• Form purpose declared

Navigation Menu

Before MX

<div class="nav">
  <a href="/" class="current">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
</div>

After MX

<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="/about">About Us</a></li>
  </ul>
</nav>

Improvements:

• Semantic nav element
• List structure (screen reader navigation)
• Current page explicitly marked
• Navigation purpose labeled

Loading State

Before MX

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

After MX

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

Improvements:

• Role declares this is status information
• aria-live announces to screen readers
• aria-busy indicates temporary state
• Screen reader text explains what’s happening
• Visual spinner hidden from assistive tech

The Pattern

Each example shows all three MX pillars:

1. Structured Data - Schema.org markup where applicable
2. Accessibility - Semantic HTML, ARIA, labels
3. Explicit Intent - States, requirements, purposes declared

Result: Works for humans, screen readers, AND AI agents.

→ Common Mistakes to Avoid → See the Benefits → Get Implementation Help