The broken buttons/elements
Good and bad: This button is focusable, but other elements have broken tab order. This element alone would be good if the rest of the elements were fixed.
Bad: Div styled as button but not focusable
Bad: breaks tab order with tabindex="2" (which makes it the first thing that's focusable), and link goes nowhere
Element 3: BadBad: hidden/removed from tab order with tabindex="-1", so not focusable
Bad: span styled as an interactive element, but is not focusable/keyboard accessible.
Element 5: BadElement 6: Bad. inputs should have a "label" attached to them, but it is keyboard accessible.
Bad: custom button made with a div that's not keyboard accessible.
Good buttons/elements
Element 9: Good, focusable link that's not brokenKey take-away
Stick to standard buttons/elements/inputs as much as possible.
If you make something custom with a div or a span, ensure you make it keyboard navigable.