$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Marcy Sutton

Other Decks in Programming

Transcript

  1. View Slide

  2. The
    LinkS vs. Buttons
    Showdown
    by @marcysutton

    View Slide

  3. Photo by Matthew Bergman, Cascadia JS

    View Slide

  4. Axe-core

    View Slide

  5. Axe chrome

    View Slide

  6. The Rub
    Link or Button?

    http://bit.ly/links-buttons

    View Slide

  7. View Slide


  8. View Slide

  9. View Slide

  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

    View Slide

  11. Get the most out of your links

    View Slide

  12. Links in screen readers

    View Slide

  13. View Slide

  14. Search

    View Slide

  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

    View Slide

  16. Buttons in screen readers

    View Slide

  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

    View Slide

  18. •Dropdown menu triggers
    •Modal dialog triggers*
    •Close buttons
    •Media player controls
    Common Button Uses

    View Slide

  19. “But divs are easier to style”

    View Slide

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

    View Slide

  21. Whatever you do, In CSS:
    •Avoid * { outline: none; }
    •Discover outline-offset
    •Apply custom focus styles with :focus

    View Slide

  22. View Slide

  23. Links: Routing & navigation

    View Slide

  24. What is navigation?

    View Slide

  25. What is routing?

    View Slide

  26. Where confusion happens

    View Slide

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

    View Slide

  28. But
    more
    importantly…

    View Slide

  29. Links & server-side routing
    are
    Progressive
    enhancement

    View Slide

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

    View Slide

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

    View Slide

  32. Choosing the best element for the job

    View Slide

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

    View Slide

  34. This happens sometimes. Just…No.

    View Slide

  35. The role of
    User Experience
    in web accessibility

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. How about these Edge cases?

    View Slide

  41. Calls to action?

    View Slide

  42. Should you bind the space key?

    View Slide

  43. “The expected result of `Space`
    on a link element is to scroll
    the page”
    -Scott Vinkle

    View Slide

  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.

    View Slide

  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.

    View Slide

  46. View Slide

  47. focus "bugs"
    a.k.a.Button Focus Hell http://marcysutton.com/button-focus-hell

    View Slide

  48. npm install what-input

    View Slide

  49. :focusring

    View Slide

  50. :focusring

    View Slide

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

    View Slide

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

    View Slide

  53. View Slide

  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.

    View Slide

  55. View Slide

  56. Find me on the Interwebs:
    • twitter.com/marcysutton
    • github.com/marcysutton
    • axe-core.org
    Questions?

    View Slide