Skip to main content

Accessibility UI Guidelines: Buttons

Buttons

2.6 Buttons

Buttons are interactive elements that trigger actions or submit forms on a webpage. Ensuring that buttons are accessible is crucial for providing an inclusive experience for all users, including those using assistive technologies.

2.6.1 <button> Element

Use clear and descriptive labels for buttons that convey their purpose without requiring additional context. Avoid vague labels like "Click" or "Submit" when more specific information can be provided.


<!-- Descriptive Button Label -->
<button type="button">Download Report</button>

<!-- Non-Descriptive Button Label -->
<button type="button">Click</button>

2.6.2 Button Size and Click Area

Ensure that buttons are large enough and have sufficient spacing to be easily clickable, especially for users with motor impairments or those using touch devices.


/* Example CSS for Accessible Button Size */
button {
    padding: 1.2rem 2.4rem;
    font-size: 1.6rem;
}

2.6.3 Keyboard Accessibility

All buttons should be operable using keyboard controls. Users should be able to navigate to buttons using the Tab key and activate them with the Enter or Space keys.


// Example of a button accessible via keyboard
<button type="submit">Submit Form</button>

2.6.4 Visible Focus Indicators

Ensure that buttons have visible focus indicators when navigated using a keyboard. This helps users understand which button is currently focused.


/* Custom Focus Style for Buttons */
button:focus {
    outline: 0.3rem solid #005fcc;
    background-color: #e0f0ff;
}

2.6.5 ARIA Attributes for Buttons

Use ARIA (Accessible Rich Internet Applications) attributes to provide additional context for buttons when necessary. This is especially useful for buttons that perform complex actions or have non-standard behaviours.


// Button with ARIA Label for Additional Context
<button type="button" aria-label="Close Modal Window">
    <i class="icon-close" aria-hidden="true"></i>
</button>
2.6.6 Accessible Button States Ensure that buttons clearly indicate their states (e.g., disabled, active) through both visual cues and ARIA attributes. This helps users understand the current status of a button and its interactivity.

2.6.7 Consistent Styling

Maintain consistent styling for buttons across the website to aid recognition and usability. Consistent design helps users identify buttons quickly and understand their functionality.


/* Consistent Button Styling */
button {
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

2.6.8 Button Types and Roles

Use appropriate button types and roles to ensure correct semantics and functionality. For example, use <button> elements for actions and <input type="button"> only when necessary.


<!-- Preferred: Using <button> for actions -->
<button type="button">Add to Cart</button>

    <!-- Alternative: Using <input> when needed -->
<input type="button" value="Add to Cart">

2.6.9 Testing Buttons for Accessibility

Regularly test buttons using various assistive technologies and accessibility testing tools to ensure they are announced correctly and function as intended. This includes verifying that ARIA attributes are correctly implemented and that button states are properly conveyed.


// Example: Using a screen reader to verify button accessibility
// Ensure that buttons are announced with their labels and states

Best Practices for Buttons

  • Use Clear and Descriptive Labels: Button text should clearly indicate the action it performs, providing immediate understanding to all users.
  • Ensure Sufficient Size and Click Area: Buttons should be large enough to be easily clickable, with adequate spacing to prevent accidental clicks.
  • Maintain Consistent Styling: Use uniform styles for buttons across the website to aid recognition and usability.
  • Provide Visible Focus Indicators: Ensure that buttons have clear focus states to indicate when they are selected during keyboard navigation.
  • Implement Keyboard Accessibility: All buttons should be operable using keyboard controls, ensuring inclusivity for users who rely on keyboards.
  • Use ARIA Attributes When Necessary: Enhance button accessibility with ARIA attributes to provide additional context or indicate states.
  • Indicate Button States Clearly: Visually and programmatically indicate states such as active, disabled, or loading to inform users of the button's status.
  • Choose Appropriate Button Elements: Use <button> elements for actions and <a> elements for navigation to maintain semantic correctness.
  • Regularly Test for Accessibility: Continuously evaluate buttons with assistive technologies and automated tools to identify and resolve accessibility issues.