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.
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.
Collection
[
|
...
]