Hidden elements - focus test

These buttons are hidden in different ways. Let's see if they are focusable!

• Even-numbered buttons are hidden using various CSS techniques.
• Odd-numbered buttons are visible, to help you to keep track of your position in the tab order.
• Each button has a pop up to say which button was pressed.

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.

Button 14 is hidden using a .visuallyhidden class technique, AND it has tabindex="-1" to remove it from the tabbing order. When using the tab key, focus should jump from button 13 to button 15. However, it is still present in the browser's accessibility tree. It can be discovered by screen readers! For example, when using browse mode instead of forms mode, a list-all-buttons tool, or a skip-to-next-button command. Will speech control be able to operate it? For example using the "click 14", "show numbers", or "click button" commands.