Button
Interactive elements that help users take actions within an interface.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
- Ensure icon-only buttons have an
for screen readers. - Don’t put block level elements such as divs inside buttons. Only use spans, images, svgs, and text inside buttons.
- Ensure all buttons meet touch target requirements, especially on mobile devices.
- Use attributes
or when appropriate for buttons used inside forms.
Keyboard controls
Key | Behavior |
---|---|
Enter or Space | Prompts the action associated with the <button>. If you’re using |
VGAR (internal only)
Find links to the Visa Global Accessibility Requirements (VGAR) for this component.- Name, Role, Value (INT-5-7)
- Don't Use onFocus or onInput Events (INT-2-1)
- Use “Go” Buttons (INT-2-2)
- Links vs. Buttons (INT-5-1)
- Keyboard Support (NAV-1-1)
- Mouse Hover and Keyboard Focus are Equivalent (NAV-1-2)
- Content on Hover or Focus (NAV-1-4)
- No Keyboard Trap (NAV-1-3)
- Support Screen Readers (GEN-3-1)
- Code Order = Logical Content Order (TXT-3-1)