Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Links vs. Buttons Showdown

The Links vs. Buttons Showdown

Tonight! In a battle as old as the Internet, we’ll pit two HTML elements against each other in a crusade of better and worse, right and possibly wrong. One element is triggered with the Space bar; the other, with the Enter key. Who will win in this all-out free-for-all between LINKS vs BUTTONS?

Updated 11/16/17


Marcy Sutton

April 05, 2017

More Decks by Marcy Sutton

Other Decks in Programming


  1. None
  2. The LinkS vs. Buttons Showdown by @marcysutton

  3. Photo by Matthew Bergman, Cascadia JS

  4. Axe-core

  5. Axe chrome

  6. The Rub Link or Button? http://bit.ly/links-buttons

  7. None
  8. <a href="wrestling.html">

  9. None
  10. •Navigate to a page or fragment with href •Cause a

    browser refresh •Deep-link client-rendered applications •Open in new windows with target •Activate with TAB and the Enter key •Show the URL in the status bar Characteristics of Links
  11. Get the most out of your links

  12. Links in screen readers

  13. None
  14. <button>Search</button>

  15. •Submit and reset forms • button, input[type=button] flavors •Trigger UI

    changes with JavaScript •Operable with TAB and the Space key Characteristics of Buttons
  16. Buttons in screen readers

  17. •Focusability •Built-in semantics •Keyboard support for click() event listeners •Support

    for disabled •Submitting of forms Button elements Here’s what you get for free
  18. •Dropdown menu triggers •Modal dialog triggers* •Close buttons •Media player

    controls Common Button Uses
  19. “But divs are easier to style”

  20. Start here: http://bit.ly/button-CSS

  21. Whatever you do, In CSS: •Avoid * { outline: none;

    } •Discover outline-offset •Apply custom focus styles with :focus
  22. None
  23. Links: Routing & navigation

  24. What is navigation?

  25. What is routing?

  26. Where confusion happens

  27. Teamwork tip: It’s confusing to debug when LinksRely On click

  28. But more importantly…

  29. Links & server-side routing are Progressive enhancement

  30. React Router https://github.com/ReactTraining/react-router

  31. Flatiron isomorphic router https://github.com/flatiron/director

  32. Choosing the best element for the job

  33. craftsmanship Source: http://purpose2play.com/sartonk/

  34. This happens sometimes. Just…No.

  35. The role of User Experience in web accessibility

  36. None
  37. None
  38. None
  39. None
  40. How about these Edge cases?

  41. Calls to action?

  42. Should you bind the space key?

  43. “The expected result of `Space` on a link element is

    to scroll the page” -Scott Vinkle
  44. What to do? •Research expected interactions. •Discuss URL changes in

    design reviews. •Weigh design vs. utility of HTML elements. •Match form to function. •Annotate semantics in wireframes. •Annotate interaction modes, i.e. focus.
  45. what about Legacy Sites? •Designs get entrenched–you may not have

    the luxury of going back to fix old patterns. •Use refreshes and agile stories as opportunities to make changes. •Use CSS classes to ease the transition.
  46. None
  47. focus "bugs" a.k.a.Button Focus Hell http://marcysutton.com/button-focus-hell

  48. npm install what-input

  49. :focusring

  50. :focusring

  51. Using focus-ring http://github.com/wicg/focus-ring

  52. Ideally: Let our userS decide Like this, but for handling

  53. None
  54. The Final Smackdown •Use links for navigation •Utilize buttons for

    toggling, submitting things •Echo function with visual style •Preserve focus styles for keyboard users •Make the most informed choices you can! •There might not always be a clear answer.
  55. None
  56. Find me on the Interwebs: • twitter.com/marcysutton • github.com/marcysutton •

    axe-core.org Questions?