An affordance is a perceptible aspect of an object or interface that hints at how it can or should be used. Good affordances make interaction discoverable: people can often tell what to do just by looking, without a label or instruction. section 7.1.1
Doors, switches, and hyperlinks
A switch affords flipping, and a doorknob affords turning. When a door requires a push-or-pull label, its design is doing too little explaining. Interfaces face the same test: make a button look clickable, and avoid underlining ordinary text because users have learned to read underlined text as a hyperlink. section 7.1.1
Use affordances to make interaction clear and recoverable:
- Choose familiar controls such as buttons, check boxes, and toggle switches when they match the intended action. section 7.1.1 section 7.5
- Make links visually distinct from nonlinked text through underlining or clear contrasting color. section 7.1.1
- Pair discoverable controls with timely feedback, helpful nearby error messages, and easy ways to correct mistakes. section 7.5
- Support varied navigation with focusable elements, alt text, and ARIA labels rather than assuming mouse use. section 7.5
