Live CortexUI Surface

This block renders live CortexUI contract metadata in the docs DOM so AI View can inspect real machine-readable elements instead of only code examples.

AI View can now inspect a live status region, form fields, actions, and table entities on every docs page.

AI-addressable docs entities
Item	State
Search docs	Ready
Inspect metadata	Visible in AI View

ARIA Usage

Overview

CortexUI components use ARIA attributes correctly out of the box. Understanding the relationship between ARIA and data-ai-* attributes is important: they are complementary, not redundant.

ARIA is for assistive technology (screen readers, switch access)
data-ai-* is for AI agents

Both layers operate simultaneously on every CortexUI component.

ARIA by Component

ActionButton

<button
  aria-busy="true"        <!-- loading state -->
  aria-disabled="false"
  data-ai-role="action"
  data-ai-state="loading"
>
  <span aria-live="polite">Saving...</span>
</button>

Input / FormField

<div role="group" aria-labelledby="name-label">
  <label id="name-label">Full name</label>
  <input
    aria-required="true"
    aria-invalid="false"
    aria-describedby="name-error"
    data-ai-role="field"
    data-ai-field-type="text"
    data-ai-required="true"
  />
  <div id="name-error" aria-live="assertive"></div>
</div>

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  data-ai-role="modal"
  data-ai-state="expanded"
>
  <h2 id="dialog-title">Confirm deletion</h2>
  ...
</div>

<nav aria-label="Main navigation">
  <a aria-current="page" data-ai-role="nav-item" data-ai-state="selected">Users</a>
</nav>

★

Important

Never use data-ai-* instead of ARIA. A button needs both aria-busy="true" (for screen readers) AND data-ai-state="loading" (for AI agents). These serve different audiences.

The Parallel

Screen readers and AI agents face the same fundamental problem: they can't see the visual UI. CortexUI solves it for both simultaneously.