Components
16 components are in Accessible first. Each one is here for a reason, and every reason traces back to the answers further down.
How the decisions cascade into them ↓The inventory
Action · 1
Buttons and toggles that start or switch something.
- ButtonEvery action, with a large target.
Form · 7
Fields, choices and pickers that take input.
- InputText answers.
- TextareaLonger answers.
- LabelNames every control.
- FieldLabel, hint and error in the same place on every question.
- CheckboxMany choices, each with a large target.
- Radio groupOne choice from a short, visible list.
- Native selectA browser select that every assistive technology understands.
Navigation · 1
Menus, tabs, breadcrumbs and bars that move between places.
- BreadcrumbShows where a person is in the service.
Feedback · 3
Alerts, toasts, loading and empty states that report what happened.
- AlertErrors and important notes that stay on the page.
- ProgressShows how far through the steps a person is.
- SpinnerSays that the page is working.
Overlay · 1
Dialogs, sheets, popovers and tooltips that sit above the page.
- DialogOnly to confirm leaving with unsaved answers.
Layout · 3
Cards, separators and containers that group and arrange content.
- CardGroups a summary before submitting.
- SeparatorBreaks between groups of questions.
- CollapsibleOptional help a person can open.
How the decisions cascade into them
The reasons come first. Five answers follow from them, and each answer shapes the inventory.
1 · The reasons
- R1Content and dataForms and tasks, one idea at a time
- R2People and work contextEveryone, including people with disabilities, AAA
- R3Team and deliveryA platform team, rarely
- R4BrandCalm and clear, quiet
- R5Tasks and flowsComplete a form, rarely
2 · Five answers, and what each does to the inventory
- Which component families does it need?becauseR1R2
- Actions, forms, feedback, overlays, layout and navigation (chosen)
- Core, plus data
- Core, plus content and media
- Core, plus media
Forms, steps and feedback are all a public service needs.
Admits 6 families: action, form, feedback, overlay, layout, navigation.
- How far does the inventory reach?becauseR2R3
- Only what today's screens use (chosen)A component joins when a screen in use needs it, not before.
- What today's screens use, plus what the next ones will likely needCovers the screens in use and the ones the team can see coming, so they find the parts ready.
- Everything its families offer, ready before it's asked forEvery component the admitted families hold is there from the start, so teams never wait for one.
Only the parts in use, each tested with assistive technology.
Only what today's screens use: Accessible first carries 16, as many as its needs.
- How does a component earn its place?becauseR2R2
- A use scenario needs it
- Its family is in the roles, so product teams find it ready
- It works for everyone, with any device and assistive technology (chosen)
- It gives the brand a moment
A component joins only when it works with any device and assistive technology.
Every component in the list above names the need it meets.
- When does a component get another look?becauseR2R4
- Only when the meaning changes (chosen)A new variant only for a different meaning, such as the main action or a danger.
- Also for emphasis and sizeVariants also set how loud a component is and how much room it takes.
- Also so each brand or page can look its own wayVariants also let a brand or a page carry its own look on the same component.
One clear way to do each thing.
Only when the meaning changes variants per component: the components above keep to them.
- Where do components do the most work?becauseR1R5
- Tables and forms
- Articles
- Forms and steps (chosen)
- Sign-up and account pages
- Campaign sections
Components do their work in forms and steps.
Most components above serve forms and steps.
3 · The inventory
16 components, listed above, each with the reason it passed. Back to the list
Accessible first carries 16 components: actions, forms, feedback, overlays, layout and navigation, each admitted because it works for everyone, with any device and assistive technology.