The shadow-UI avoidance gap: what most top SaaS products get wrong for AI agents

AI agents are increasingly expected to operate software on behalf of users, but a systematic audit of the top 100 SaaS products reveals a fundamental obstacle: the interfaces these products present are optimized for human eyes, not machine interpretation. Nowhere is this more evident than in shadow-UI avoidance, where the average score sits at just 17 out of 100.

This finding emerges from a comprehensive evaluation using the Agent Factors Engineering framework, which measures agentability—the degree to which software can be effectively operated by AI agents—across eight core principles. While some principles show moderate adoption, shadow-UI avoidance represents one of the most significant gaps between current product design and the requirements of agent-driven interaction.

Understanding shadow-UI and why it matters

Shadow-UI refers to interface elements that are visually apparent to humans but lack proper semantic structure in the underlying code. These include:

• Clickable divs and spans that masquerade as buttons without using semantic button elements
• Custom dropdown menus built from generic containers instead of native select elements
• Icon-only controls without accessible labels or ARIA attributes
• Interactive elements that rely solely on CSS hover states or JavaScript event listeners without keyboard accessibility
• Form controls that exist visually but lack proper input elements in the DOM

For human users with full vision and motor control, these patterns often work seamlessly. The visual design communicates affordances clearly enough that users intuitively understand what can be clicked, selected, or manipulated. But AI agents operate differently. They parse the document object model (DOM), interpret semantic HTML, and rely on structured accessibility metadata to understand interface capabilities.

When a product uses a div styled to look like a button instead of an actual button element, an agent scanning the page may not recognize it as an interactive control at all. When a custom dropdown is built entirely in JavaScript without proper ARIA roles, an agent cannot reliably determine what options are available or how to select one.

The broader agentability landscape

Shadow-UI avoidance is just one of eight principles measured in the Agent Factors Engineering framework. The audit of 100 top SaaS products reveals an overall average agentability score of 38.3 out of 100, with significant variation across principles:

• Machine readability: 71/100
• Status: 47/100
• Control: 48/100
• Chunking: 45/100
• Clean handoffs: 40/100
• Defaults: 35/100
• Shadow-UI avoidance: 17/100
• Transparency: 5/100

The tier distribution shows that 22 products achieve Agent-Ready status (scoring 45 or above), 54 fall into the Developing category (35-44), 17 are Lagging (20-34), and 7 are classified as Agent-Blind (under 20). These numbers indicate that while the software industry has made some progress on machine readability—likely due to existing accessibility and SEO best practices—most products still have substantial work to do across multiple dimensions of agentability.

Why shadow-UI avoidance lags behind

The low scores on shadow-UI avoidance reflect several converging factors in modern web development. Front-end frameworks and component libraries have made it trivially easy to create rich, interactive interfaces using div soup and JavaScript event handlers. Design systems prioritize visual consistency and brand expression over semantic markup. Performance optimization sometimes favors lightweight custom controls over heavier native elements.

Additionally, many product teams still view accessibility primarily through the lens of human assistive technology compliance rather than as a foundation for machine interaction. A product might pass basic WCAG guidelines while still relying heavily on shadow-UI patterns that confuse AI agents.

The gap is also a measurement problem. Teams track user engagement, conversion rates, and visual design quality, but few have visibility into how well their interfaces support programmatic interaction. Without measurement, the problem remains invisible.

Concrete steps for product teams

Closing the shadow-UI avoidance gap requires deliberate architectural decisions and quality processes. Product teams should consider the following approaches:

Use semantic HTML as the foundation

Prioritize native HTML elements for all interactive controls. Use button elements for buttons, select elements for dropdowns, input elements for form fields, and anchor tags for navigation. When custom styling is required, apply it to semantic elements rather than building interactive behavior on top of divs.

Implement comprehensive ARIA labeling

For components where custom implementation is unavoidable, use ARIA roles, states, and properties to communicate structure and behavior. Ensure every interactive element has an accessible name that describes its purpose. Label form controls explicitly and use aria-describedby for additional context.

Audit component libraries

Many shadow-UI problems originate in shared component libraries. Conduct a systematic review of your design system components to identify reliance on non-semantic markup. Prioritize refactoring the most commonly used controls first.

Test with assistive technology and agent simulators

Screen readers and keyboard navigation testing can reveal many of the same structural issues that block AI agents. Expand testing protocols to include these tools. Consider adding automated checks for semantic markup completeness in your CI/CD pipeline.

Measure and track agentability

Use the Agentability Index as a baseline for understanding where your product stands. Establish internal metrics for shadow-UI patterns and track progress over time. You can run a free audit to get specific feedback on your product's current state.

The path forward

The gap in shadow-UI avoidance is not insurmountable, but it requires product teams to expand their mental model of who—or what—uses their interfaces. As AI agents become more capable and more common, products that remain locked in human-only interface patterns will face increasing friction. The technical solutions are well understood and largely draw on existing accessibility best practices. What's needed now is awareness, measurement, and prioritization.

The data from the top 100 SaaS products makes clear that most teams have not yet made this shift. Those who do will be better positioned for an emerging paradigm where software is operated not just by humans clicking through UIs, but by agents acting on human intent.