Controls
Accessible buttons: Examples and Testing
Use a native button for an action performed on the current page, such as saving a draft or opening a dialog.
Accessible patterns
Build the interaction. Test the experience.
Explore 40 accessible interface patterns, from everyday form controls to dialogs, navigation and feedback. Use the working examples, inspect the markup relationships and record your own tests.
Start with native controls
Use the browser’s built-in interaction before choosing a custom widget.
Manage focus deliberately
Open, navigate and close a dialog with a predictable return point.
Make errors recoverable
Help people identify a problem and return to the field that needs attention.
40 resources found
Controls
Accessible toggle buttons: Examples and Testing
A toggle button represents an on/off state for an action or mode.
Navigation
Accessible links: Examples and Testing
Use a real anchor with a destination when the purpose is navigation.
Forms
Accessible checkboxes: Examples and Testing
Use a checkbox for an independently selectable choice.
Forms
Accessible radio groups: Examples and Testing
Radio buttons let users choose one option within a named group.
Controls
Accessible switches: Examples and Testing
A switch represents a setting that is on or off.
Forms
Accessible text inputs: Examples and Testing
Give text inputs visible labels and explain important constraints before entry.
Forms
Accessible text areas: Examples and Testing
Use a labeled textarea for multiline input.
Forms
Accessible select controls: Examples and Testing
For a straightforward choice from a fixed list, a native select supplies familiar keyboard and platform behavior.
Forms
Accessible numeric inputs: Examples and Testing
Use numeric controls when the value is a quantity, and explain units, bounds and valid increments.
Controls
Accessible range sliders: Examples and Testing
A slider selects a value from an ordered range.
Status and feedback
Accessible progress indicators: Examples and Testing
Use a progress indicator for completion of an ongoing task.
Status and feedback
Accessible meters and gauges: Examples and Testing
A meter describes a scalar measurement within a known range, such as storage used.
Status and feedback
Accessible form error summaries: Examples and Testing
An error summary gives users a compact route to all detected problems after submission.
Status and feedback
Accessible inline validation errors: Examples and Testing
Inline errors identify the affected field and explain what must change.
Status and feedback
Accessible status messages: Examples and Testing
Routine status messages should communicate results without taking focus.
Status and feedback
Accessible urgent alerts: Examples and Testing
Use an alert for important, time-sensitive information that needs prompt announcement without requiring focus.
Disclosure and dialogs
Accessible tooltips and help text: Examples and Testing
A tooltip supplies a brief description for a focused or hovered control.
Data and collections
Accessible carousels: Examples and Testing
A carousel needs understandable slide controls and an accessible way to stop automatic rotation when used.
Forms
Accessible autocomplete comboboxes: Examples and Testing
A combobox combines an input or selection control with an associated popup.
Data and collections
Accessible listboxes: Examples and Testing
A listbox presents selectable options with a managed keyboard interaction model.
Data and collections
Accessible tree views: Examples and Testing
A tree represents a hierarchical collection with expandable branches and a full tree keyboard model.
Controls
Accessible toolbars: Examples and Testing
A toolbar groups a related set of controls and, when using the ARIA toolbar pattern, provides efficient keyboard movement within that group.
Forms
Accessible file upload controls: Examples and Testing
Keep a labeled native file input available even when a drag-and-drop area is offered.
Forms
Accessible password fields: Examples and Testing
Password inputs need clear labels, appropriate autocomplete and support for password managers and paste.
Forms
Accessible search forms: Examples and Testing
A search form needs a discoverable search region, a labeled query field, a clear submit action and understandable results.
Page structure
Accessible term and value lists: Examples and Testing
A description list expresses associations between terms and their descriptions or values.
Disclosure and dialogs
Accessible disclosure controls: Examples and Testing
A disclosure reveals or hides a section in place.
Disclosure and dialogs
Accessible accordions: Examples and Testing
An accordion organizes related expandable sections.
Disclosure and dialogs
Accessible modal dialogs: Examples and Testing
A modal dialog temporarily makes the rest of the page unavailable while the user completes a focused task.
Disclosure and dialogs
Accessible confirmation dialogs: Examples and Testing
Use an alert dialog for a brief, important interruption that requires a response, such as confirming a consequential deletion.
Navigation
Accessible tab interfaces: Examples and Testing
Tabs switch among associated panels within a single interface.
Navigation
Accessible dropdown navigation: Examples and Testing
Most website dropdown navigation is a disclosure containing ordinary links, not an application menu.
Navigation
Accessible breadcrumbs: Examples and Testing
Breadcrumbs communicate a page's location within a site hierarchy.
Navigation
Accessible pagination: Examples and Testing
Pagination needs understandable page links, a current-page indication and predictable behavior when results change.
Navigation
Accessible skip links: Examples and Testing
A skip link lets keyboard users bypass repeated navigation and reach the page's main task.
Page structure
Accessible page landmarks: Examples and Testing
Landmarks identify major page regions such as navigation, main content, search and the footer.
Page structure
Accessible heading structures: Examples and Testing
Use heading elements to express the content's hierarchy, and write headings that describe their sections.
Data and collections
Accessible data tables: Examples and Testing
Use a table when cells have meaningful row and column relationships.
Data and collections
Accessible sortable tables: Examples and Testing
A sortable table retains its table structure while exposing sorting as an action in the relevant header.