Button

Use Cases

• When you want to submit a form. (type="submit")
• When you want to reset all inputs in a form (type="reset")
• When you want to run JavaScript (popup dialog, onclick="[function name]")
• When you want to apply button behaviors to non-interactive content (image thumbnails, icons)
• When you want to open, close or cancel a window, dialog, or modal
• When you want to entice the user to click on something (CTAs)
• When you want to toggle between two states, off and on (user preferences)
• When you want to add button behavior to other components, (accordions, media players)
• When you want to create a context change (adding or removing a table row, sorting, applying filters)
• When you want to provide visual feedback to indicate a change in the button’s state (active, press, hover, focus, etc.)

Notes on usage

• The button element must have both opening and closing tags.
• Can contain other non-interactive content, such as an image.
• Any text contained inside its tags will appear in the label.
• The type attribute indicates the button’s expected behavior.
• Make buttons easily distinguishable from other elements.

Accessibility Requirements

Accessible Labels

Text contained within the button’s opening and closing tags becomes the visible text label on the button. Ensure that the button’s label is both meaningful and distinctive and describes the specific action that happens when the button is clicked.

Buttons labels that say “Click Here” or “Read More” are not distinctive enough to make sense when taken out of context. Screen reader users often pull up lists of element labels grouped by type as a navigation aid, such as lists of links, headings, form controls, and buttons. Lists that contain identical names, like six “Click Here” labels, offer no distinctive information that would be of any help to the user.

Having distinct labels for buttons also benefits users who navigate the web with voice recognition software. They activate buttons by giving vocal commands that reference the button’s label, like, “Click Send” and “Click Play.” If two buttons on the page have identical labels, the software will not be able to identify which one the user wants clicked without the user providing additional information or invoking a grid-screen to map its location. Grid-screen mapping is a multi-step process requiring a series of successive commands to pinpoint the exact area where the button appears on screen. Buttons with distinct labels make vocal selection quicker and easier.

For buttons without visible text labels, such as images and icons, use the aria-label attribute to assign a name to make it available to assistive technology. While adding an aria-label will help screen reader users in identifying the purpose of the icon or image, users with cognitive disabilities, who have difficulty associating meaning to symbols, and users who are simply unfamiliar with icon’s logo, would benefit from having text available, like a tooltip, as a backup.

Size

The size of the button must be large enough that it can be easily activated by users with motor control disabilities and those who use less precise input devices, such as fingers, wands, styluses, and eye-gaze systems. The minimum target size for interactive buttons on mobile devices should be no less than 44x44 pixels, including the margin. Setting the margin to 44 pixels provides some leeway for reducing the size of visual portion of the button. However, it still must be large enough to be perceivable by low vison users.

Spacing

If the button is placed next to other interactive elements, there must be ample spacing between them to prevent accidental activation of a neighboring element. The recommended spacing between interactive elements is 60 pixels.

Two-State Buttons

Two-state buttons toggle between two values, off and on. They are commonly used for setting user preferences by turning on and of features in an application or a device like a cell phone. To indicate to screen readers which state the button is in, use the attribute aria-pressed="true|false."

Focus Indication

It’s critical sighted keyboard users know where they are on the page at all times. This is achieved by focus indication, which visually distinguishes the active element the user is currently on from all other active elements on the page. By calling out the element that has focus, the user can easily track their location.

The style applied to create a button’s focus can vary considerably depending on the site is designed. The most important criterion when styling focus is to ensure it’s clearly perceivable to all users. Subtle, light-handed, pastel, or wispy styles may look cool and trendy, but they will not serve the essential purpose of indicating the user’s location if they go unnoticed by the user.

Focus Management

When a keyboard user navigates a page by tabbing through it, each successive tab shifts the focus to the next active element in the natural tab order of the page. In most cases, tab order should follow reading order, which moves in a predictable linear pattern, left to right and top to bottom. However, if a user activates a button, the tab order is diverted depending on what type of action occurs. It important to maintain a logical movement of focus in all situations so the user doesn’t get disoriented or lost. This may require assigning focus to a button programmatically.

Keyboard Interaction

If button activation opens dialog, focus shifts to the dialog. When the user exits the dialog, focus should return the user to the button that opened the dialog.