Switch-based input

Expandables (sometimes called “collapsible” or “disclosure widgets”) are simple interface patterns that allow you to expand and collapse content.

Interactive elements should, under most circumstances, be focusable in the order that they appear in the source code. This helps people who are using the keyboard or alternative input devices to follow focus in a logical order.

All interactive elements should indicate when they’re focused so that users know which element they are currently interacting with. This is where focus styles come into play.

Sometimes, design requirements mean that you need to create a custom interactive element rather than using a native HTML element.

Your element will not be accessible by keyboard unless it is included in focus order and it can be activated using keys.

If an active element is intended to be unavailable in a particular state and it’s hidden from view, it should not be able to receive focus.

Links ( elements) are focusable by default, so it should normally be possible to activate them using the keyboard. However, under certain circumstances, they are not focusable.

When positioning elements using CSS, it's possible to place them in a position that does not reflect their location in the source order. This can have unexpected side effects for keyboard-navigation users.