BUTTONS
Create Accessible
Goal
Create buttons that are easy to see, understand their purpose, and interact with.
Benefits
Accessible buttons improve the overall user experience, including for those using assistive technology, such as screen readers. Accessible buttons mean people can interact with your content to learn more, book an appointment, and buy from you.
What To Do
Use a 16pt font or larger.
Ensure there is high contrast between your background, the button color, and the button text.
Keep the button style recognizable, do NOT get creative witht the shape of the button.
The label (text) should clearly describe what will happen when someone clicks on it.
The button should be an action you want a visitor to take vs. a link, which references navigation.
Avoid icon only buttons when possible (i.e. an email icon should be followed by the email address).
There should be sufficient space around the button, so they can easily be clicked/tapped without triggering another element.
If you ‘tab’ through your site, every button should recieve focus when you land on it (often with a red box around it).
WCAG Conformance Levels
Level A (Minimum Standard)
Buttons must be defined by more than one sense (i.e. Never say “click the red button” or “choose the circle to proceed”)
Buttons can not only be defined by color
All buttons are keyboard accessible
The purpose of the button is clearly defined by text
Level AA (What’s Really Expected)
Level A criteria PLUS
The minimum contrast between standard size button text and the button color is at least 4.5:1
The minimum contrast between the button color and the website section background is at least 3:1
Buttons should have a minimum of 24x24 CSS pixel spacing around them
Level AAA (Over Achiever)
Level A and AA criteria PLUS
The contrast between standard-size text and button color is at least 7:1
Buttons have a minimum of 44 x 44 CSS pixel spacing around them
WCAG 2.2 Technical Guidelines & Success Criteria (SC)
PERCEIVABLE
SC 1.3.3 Sensory Characteristics
SC 1.4.1 Use of Color
SC 1.4.3 Contrast (Minimum)
SC 1.4.6 Contrast (Enhanced)
SC 1.4.11 Non-text Contrast
Guideline
OPERABLE
Guideline 2.1 Keyboard Accessible
SC 2.1.1 Keyboard
SC 2.4.4 Link Purpose (in Context)
SC 2.4.6 Headings & Labels
SC 2.4.7 Focus Visible
SC 2.4.9 Link Purpose (Link Only)
SC 2.4.11 Focus Not Obscured
SC 2.4.12 Focus Not Obscured Enhanced
SC 2.4.13 Focus Appearance
Guideline 2.5 Input Modalities
SC 2.5.5 Target Size (Enhanced)
SC 2.5.8 Target Size (Minimum)
UNDERSTANDABLE
SC 3.2.4 Consistent Identification
Guideline 3.3 Input Assistance
SC 3.3.2 Labels or Instructions
Recommended Digital Accessibility Resources
Web Accessibility Initiative
To geek out and go deep on the history and technical criteria for WCAG (Web Content Accessibility Guidelines) W3C is the resource for you.
Monthly Content Accessibility Checklist
Easy first steps to track and integrate accessibility into the digital content you create on a regular basis for your business.
Color Contrast Anylyzer
FREE easy to use tool that helps you verify the color contrast throughout your website.
Don’t See What You’re Looking For?
The accuracy of information on this website is subject to change. Implementing these accessibility tips by no means ensures your website is fully compliant with current guidelines or laws. You should consult with a professional to audit and/or remediate your site and obtain an accessibility statement.
© 2024 Access Designs LLC | All Rights ReservedLegal ▸ Privacy Policy ▸ Terms ▸ Accessibility Statement