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.