Explicit Over Implicit - Declare Intent Clearly
Humans excel at inference. Machines do not.
A grayed-out button signals “unavailable” to humans. An AI agent sees a fully clickable button unless you explicitly mark it disabled.
A red asterisk next to a form field means “required” to humans. An agent sees decoration unless you add the required attribute.
MX principle: If something matters, declare it explicitly in markup.
State Must Be Declared
Disabled Elements
<!-- Visual only -->
<button class="btn-disabled" style="opacity: 0.5">Submit</button>
<!-- Explicit -->
<button disabled aria-disabled="true">Submit</button>
Loading States
<!-- Visual only -->
<div class="spinner"></div>
<!-- Explicit -->
<div role="status" aria-busy="true" aria-live="polite">
<span aria-hidden="true" class="spinner"></span>
<span class="sr-only">Loading, please wait</span>
</div>
Current Page/Selection
<!-- Ambiguous -->
<a href="/" class="active">Home</a>
<!-- Explicit -->
<a href="/" aria-current="page">Home</a>
Required vs Optional
Form Fields
<!-- Visual only -->
<label>Email <span class="red">*</span></label>
<input type="email" name="email">
<!-- Explicit -->
<label for="email">Email <abbr title="required">*</abbr></label>
<input type="email" id="email" required aria-required="true">
Optional Fields
<label for="phone">Phone <span class="optional">(optional)</span></label>
<input type="tel" id="phone" aria-required="false">
Navigation Structure
Clear Hierarchy
<!-- Ambiguous -->
<div class="menu">
<a href="/">Home</a>
<a href="/about">About</a>
</div>
<!-- Explicit -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
Error States
Validation Feedback
<!-- Visual only -->
<input type="email" class="error">
<span class="error-text">Invalid email</span>
<!-- Explicit -->
<input type="email" aria-invalid="true" aria-describedby="email-error">
<span id="email-error" role="alert">Please enter a valid email address</span>
The Pattern
Ask: “If I removed all CSS, would the state/intent/meaning still be clear?”
If no, make it explicit through:
- Semantic HTML elements
- ARIA attributes
- Required/disabled/invalid attributes
- Proper form labels
- Clear text descriptions
Humans can infer from visual design. Agents cannot. Declare explicitly.