Accessibility Decision Flow
Pick the right semantic element / pattern for a UI need.
Rendering…
Make it your own.
flowchart TD
Q[What does this control do?] --> Nav{Navigates to a URL?}
Nav -- yes --> A[Use a<a href>]
Nav -- no --> Act{Triggers an action?}
Act -- yes --> B[Use a<button>]
Act -- no --> Inp{Captures input?}
Inp -- yes --> Form{Single value or list?}
Form -- single --> Single{Type of value?}
Single -- text --> C[input type=text]
Single -- yes/no --> D[input type=checkbox / Switch]
Single -- one-of-many --> E[input type=radio / Listbox]
Form -- list --> F[ul + role=list]
Inp -- no --> Disp{Static content?}
Disp -- heading --> G[h1-h6]
Disp -- paragraph --> H[p / div + role only if needed]