Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Secondary Buttons

Secondary buttons are used for alternative or less prominent actions. They feature an outlined style that provides visual distinction from primary buttons while remaining clearly interactive.

HTML

<button type="button" class="ads-button-secondary">
    Secondary button
</button>

CSS

/* Secondary button with explicit border */
.ads-button-secondary {
    background-color: transparent;
    color: var(--ads-primary-color);
    border: 2px solid var(--ads-primary-color);
    padding: 0.75rem 1.5rem;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--ads-font-family);
    min-height: 44px;
}

.ads-button-secondary:hover {
    background-color: rgba(0, 102, 204, 0.1);
}

.ads-button-secondary:focus {
    outline: 3px solid var(--ads-focus-outline);
    outline-offset: 2px;
}

Accessibility Guidelines

Key Requirements

  • Type attribute: Always specify type="button" to prevent accidental form submission
  • Descriptive text: Button text should clearly describe the action
  • Visible focus indicator: 3px blue outline ensures keyboard users can see which button has focus
  • Minimum size: 44x44px minimum ensures easy activation on touch devices
  • Border contrast: 2px solid border with 3:1 contrast ensures button boundary is visible
  • Text contrast: Blue text on white background exceeds 4.5:1 contrast requirement

When to Use Secondary Buttons

Use secondary buttons for actions that are important but not the primary focus of the page. Secondary buttons work well for:

  • Alternative actions: "Cancel", "Go back", "Skip"
  • Secondary navigation: "Learn more", "View details"
  • Multiple equal-priority actions where no single action should dominate
  • Paired with a primary button to show a less-preferred option

Custom Implementation Notes

When using secondary buttons alongside primary buttons, ensure adequate spacing between them (at least 8px gap) to prevent accidental activation. The outlined style provides sufficient visual hierarchy without competing with primary buttons for attention.

Hover state: The subtle background color on hover (10% opacity) provides feedback without being distracting. This is especially important for users who navigate by sight and rely on visual cues to confirm their cursor is over the button.

How to Test for Accessibility

  1. Screen Reader Test:
    • Enable NVDA, JAWS, or VoiceOver
    • Navigate to the button with Tab key
    • Verify it announces: "[Button text], button"
    • Verify no distinction between primary and secondary in announcement (visual hierarchy is for sighted users)
  2. Keyboard Navigation:
    • Tab to the button
    • Verify 3px blue focus indicator is clearly visible
    • Verify focus indicator contrasts with both button and background
    • Press Enter or Space key to activate
  3. Visual Test:
    • Verify button meets minimum 44x44px size
    • Check border contrast ratio is at least 3:1 against background
    • Check text contrast ratio is at least 4.5:1
    • Verify button is clearly distinguishable from primary buttons
    • Test hover state provides clear visual feedback
  4. Contrast in Different Contexts:
    • Test on white background
    • Test on light gray background
    • Verify border remains visible in all contexts

References