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

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
8. <a href="wrestling.html">
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
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
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 events
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
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.
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 focus
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.
56. Find me on the Interwebs: • twitter.com/marcysutton • github.com/marcysutton • axe-core.org Questions?