Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Buttons Overview

Accessible button components with proper focus states, keyboard support, and touch targets. All button components follow WCAG 2.2 guidelines to ensure accessibility for all users.

Key Accessibility Features

  • Keyboard Accessible: All buttons can be activated with Enter or Space keys
  • Visible Focus Indicators: 3px blue outline with 2px offset for clear keyboard navigation
  • Minimum Touch Target: 44x44px minimum size for easy activation on touch devices
  • High Contrast Mode Support: Explicit borders ensure buttons remain visible in Windows High Contrast Mode
  • Descriptive Labels: Clear, action-oriented text that describes what the button does

Available Button Components

Primary Buttons

Main call-to-action buttons with solid background for primary actions

Secondary Buttons

Outlined buttons for secondary or less prominent actions

Buttons with Icons

Buttons that combine text labels with icons for enhanced visual communication

Disabled Buttons

Properly disabled buttons with clear visual indicators of inactive state

Icon-Only Buttons

Buttons with only icons and visually hidden text for screen readers

General Button Guidelines

When to Use Buttons vs Links

Use buttons for actions that perform operations on the current page (submit forms, open dialogs, trigger interactions). Use links for navigation to different pages or sections. This distinction helps screen reader users understand the purpose of each interactive element.

Button Text Best Practices

  • Use action verbs that clearly describe what will happen (e.g., "Save changes" not "OK")
  • Keep text concise but descriptive (e.g., "Delete account" not "Delete")
  • Avoid generic labels like "Click here" or "Learn more" without context
  • Front-load important words for screen reader users who navigate by button

Color and Contrast

All button states (default, hover, focus, disabled) must maintain a contrast ratio of at least 4.5:1 for text and 3:1 for the button boundary against the background. Disabled buttons are exempt from these requirements but should still aim for 3:1 minimum.

High Contrast Mode Support

Critical: Always use explicit borders (e.g., border: 2px solid) instead of border: none. For buttons with solid backgrounds, set the border color to match the background color. This ensures buttons remain visible in Windows High Contrast Mode themes.

References