Is the button focusable? - Manuel Matuzovic

"Is the button focusable with a visually-hidden class? Yup. It's not visible in the viewport but still focusable."

"When using content-visibility: hidden;, the button is not focusable, behaving like display: none;."

"Using [aria-hidden="true"] does not prevent the button from being focusable via keyboard, meaning it can still be accessed by screen reader users."

"Using [disabled] on a button element makes it non-interactive, meaning it cannot be focused or activated."

The article explores various methods of hiding HTML buttons using CSS and HTML attributes while analyzing their effect on focusability. Techniques like using 'display: none;' or 'content-visibility: hidden;' effectively prevent focus, while others like 'visibility: hidden;' and 'opacity: 0;' maintain focusability. Moreover, HTML attributes such as '[hidden]' and '[aria-hidden="true"]' provide different accessibility behaviors. Notably, a button with the 'visually-hidden' class remains focusable, while '[disabled]' makes it non-interactive. The article emphasizes understanding these differences for better accessibility implementation.

Read at Manuel Matuzovic