Buttons
Buttons are used as triggers for actions. Buttons can contain a label and/or an icon and come in a variety of styles and sizes.
Use Cases
The user should be able to:
- Take an action for example deleting an item, opening a modal, or submitting a form
- Have enough contrast on light and dark backgrounds to see the button
- Navigate to and interact with buttons with keyboard
Interaction and Style
Links vs Buttons
A link takes you somewhere, a button performs an action. To make sure you’re accessible remember to use the semantically correct component. To find out more about the difference read our blog post on links vs buttons.
- Use buttons for actions
- Use buttons to submit forms
- Use buttons to open and close menus, modals, or expandable panels
- Use Links for navigation
- Style links as buttons
- Style buttons as links
- Use links for actions
Relevant WCAG Requirements
Non-text Content
Provide text alternatives for all non-text content. This includes images, buttons, form inputs, maps, etc. Text alternatives allow screen readers to describe these elements to visually impaired users.
WCAG 2.1 Understanding 1.1.1Info and Relationships
Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.
WCAG 2.1 Understanding 1.3.1Meaningful Sequence
Present content in a meaningful order. This ensures that the content makes sense when read by a screen reader or other assistive technology, even when styles are turned off.
WCAG 2.1 Understanding 1.3.2Sensory Characteristics
Instructions do not rely solely on sensory characteristics such as shape, size, visual location, orientation, or sound. This means that users with sensory disabilities can still understand the content.
WCAG 2.1 Understanding 1.3.3Use of Color
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
WCAG 2.1 Understanding 1.4.1Audio Control
If any audio on a page plays automatically for more than 3 seconds...
WCAG 2.1 Understanding 1.4.2Contrast (Minimum)
Text and images of text must have a contrast ratio of at least 4.5:1...
WCAG 2.1 Understanding 1.4.3Keyboard
Ensure all functionality of the content is operable through a keyboard interface. This allows users who can't use a mouse or touchscreen to navigate and use your content.
WCAG 2.1 Understanding 2.1.1No Keyboard Trap
Ensure that keyboard navigation can always move focus forward and backward. This means no part of the site should 'trap' keyboard focus.
WCAG 2.1 Understanding 2.1.2Pause, Stop, Hide
For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it.
WCAG 2.1 Understanding 2.2.2Focus Order
If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
WCAG 2.1 Understanding 2.4.3Focus Visible
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
WCAG 2.1 Understanding 2.4.7Label in Name
For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
WCAG 2.1 Understanding 2.5.3Target Size
The size of the target for pointer inputs is at least 44 by 44px.
WCAG 2.1 Understanding 2.5.5Concurrent Input Mechanisms
Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings.
WCAG 2.1 Understanding 2.5.6On Input
Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.
WCAG 2.1 Understanding 3.2.2Name, Role, Value
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
WCAG 2.1 Understanding 4.1.2
Keyboard Navigation
| Key | Action |
|---|---|
| Tab | Focuses the button. |
| Enter/Spacebar | Activates the button. |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.