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

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