Interactive elements that work.
USE REAL BUTTONS
A button element is keyboard accessible, announces itself correctly, and responds to Enter and Space automatically.
A styled container pretending to be a button does none of that unless deliberately implemented.
The most common cause of a control that cannot be used by keyboard.
ACCESSIBLE NAMES
Every control needs a name announced by assistive technology.
An icon-only button with no label is announced as "button" and nothing more.
Add a label, visible or otherwise.
TOUCH TARGET SIZE
Large enough to tap, with space around them.
Small, closely spaced controls are difficult for people with motor impairments and for everyone on a phone.
STATE
If a control toggles something, its state must be announced.
An expand button should indicate whether the section is open.
DISABLED CONTROLS
Frequently have poor contrast by default. If a disabled state must be readable, style it.
CUSTOM COMPONENTS
Sliders, tabs, accordions and dropdowns built from scratch need deliberate keyboard and screen reader support.
Using established patterns or a tested component library is safer than building from nothing.
