These buttons are hidden in different ways. Let's see if they are focusable!
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.