Making elements keyboard focusable and clickable – demo page

This is a demo document related to the article Making elements keyboard focusable and clickable. Please see the article for context and information.

Note that since making elements that aren’t natively keyboard focusable and clickable accessible requires JavaScript, this demo will not work without JavaScript enabled (there won’t be any buttons after the list below, fake or real).

Button 1 is a span element with a click handler
Button 2 is a span element with a click handler plus tabindex and role attributes
Button 3 is a span element with a click handler, tabindex and role attributes, and a keydown handler
Button 4 is a button element with a click handler