affordance-false-and-anti

To audit UI elements for false affordance, review screens for button-like cards, inert hover states, and hyperlink styling that misleads users. Check that enabled, disabled, and read-only states are visually distinct to prevent interaction confusion.

Disabled and read-only states differ in interaction design semantics: disabled controls are entirely inactive, while read-only fields display data without allowing edits. Both require clear visual differentiation and appropriate accessibility semantics like aria-disabled.

Users click non-interactive elements because of false affordance, where decorative elements, mis-styled cards, or hover-only cues mimic controls. Correcting visual treatments and cursor behaviors ensures controls are obvious or clearly not interactive.

To apply accessibility semantics for disabled button states, use the disabled attribute and aria-disabled to convey inactivity to assistive technologies. Pair these with distinct visual treatments and optional explanatory context so users understand the unavailable action.

Yes, you can fix hover-only cues by applying UI heuristics that identify interaction signals absent on touch devices. Redesign these elements with persistent visual indicators and appropriate cursor behaviors to eliminate misleading affordance patterns.