Accessibility Checklist: Buttons
Bobby Bailey
How to Ensure Buttons Are Usable for Everyone
Buttons are essential interactive elements, but if not designed correctly, they can become barriers for people using assistive technologies. Use this checklist to ensure buttons are fully accessible.
10-Point Accessible Buttons Checklist
Number one: Buttons have clear, descriptive text
Button text should explain what will happen when clicked (e.g., "Submit Form" instead of "Click Here"). Avoid using only icons without accessible labels.
Number two: Buttons are focusable and keyboard accessible
People can navigate to buttons using the Tab key and activate them with Enter or Space. Ensure buttons are not inside non-focusable <div> elements.
Number three: Buttons are properly labeled for screen readers
If a button contains only an icon, use aria-label to provide a text alternative. Example: <button aria-label="Search">🔍</button>.
Number four: Ensure button styles look interactive
Buttons should be visually distinct from static content. Use consistent colors, borders, or shadows to indicate interactivity.
Number five: Do not use <div> or <span> as buttons
Use the native <button> element instead of styling <div> or <span> to look like a button. If non-button elements are unavoidable, ensure they have role="button" and keyboard functionality.
Number six: Buttons provide clear visual feedback
When clicked, buttons should change appearance to confirm the action. Use aria-pressed="true" for toggle buttons.
Number seven: Ensure buttons have sufficient color contrast
Button text should have a 4.5:1 contrast ratio against its background. The button itself should stand out from surrounding content.
Number eight: Disabled buttons are clearly indicated
Visually disabled buttons should look different (e.g., grayed out) and not be focusable. Do not remove buttons entirely if they are temporarily disabled.
Number nine: Buttons should be large enough to activate easily
Ensure buttons have a minimum target size of 44x44 pixels. Avoid making clickable areas too small, especially on mobile devices.
Number ten: Test buttons with assistive technologies
Use screen readers to confirm button labels are announced correctly. Navigate using only a keyboard to ensure full functionality.