Hidden elements - focus test

A series of buttons, hidden in different ways. We'll see if they are focusable.
Each has a simple onClick handler which makes an alert() pop up to say which buton was pressed.
Even-numbered buttons will be visually hidden using various CSS techniques.
Odd-numbered buttons will remain unstyled, so they will help you to keep track of your position in the tab order.

Button Two is hidden using CSS display:none. It isn't expected to be focusable. Focus will jump from Button 1 to Button 3.

Button Four is hidden using CSS visibility:hidden. It has space reserved, so this paragraph is indented. It isn't expected to be focusable. Focus will jump from Button 3 to Button 5

Button 6 is hidden "off-viewport" with negative positioning. Even though we can't see it, we can focus on it.

Button 8 is hidden using a .visuallyhidden class technique, similar to HTML5 boilerplate or Drupal8. Even though we can't see it, we can focus on it.

Button 10 is hidden using CSS opacity:0; Even though we can't see it, we can focus on it.

Button 12 is hidden using the HTML hidden attribute. This usually gets treated the same as using CSS display:none. Focus should jump from Button 11 to Button 13.