The Links vs. Buttons Showdown
summary
Clear rule: use real anchors with real URLs for navigation and real <button> elements for toggles/submits; an anchor like href="#" with ng-click is a smell because it hides routing and breaks right-click/bookmark behavior. The audit workflow uses axe-core and browser extensions and recommends keyboard and screen-reader testing, annotating designs with semantics, and incremental fixes (what-input for input-mode styling and a focus-ring polyfill proposal). Plenty of sites still ship click-on-div hacks and nested links that fail for keyboard users.
AI-written summary · about
chapters (21)
- 0:00Welcome
- 1:00Introduction
- 1:32Marcys background
- 3:03What are links
- 6:10What are buttons
- 11:59Links navigate you places
- 14:28Where does the confusion happen
- 15:19Teamwork tip
- 16:01Serverside routing
- 18:02Long live hyperlinks
- 19:15Design and development
- 21:12User experience
- 23:06Tabs
- 25:01Calls to Action
- 26:32What to do
- 28:48Legacy sites
- 30:10Focus and CSS
- 32:00Focus Ring
- 34:03Final Smackdown
- 35:23Who Wins
- 40:29Key Differences
