How to design CTAs for accessibility and screen readers?

Still have a question, spotted an error, or have a better explanation or a source we should cite?

You're designing a button for your email and you think about how it looks on your screen. But someone using a screen reader needs different information. They can't see your colors or your button shape. They hear words. That's why accessible CTAs matter for everyone, not just people with disabilities. Clear link text, strong contrast, and decent tap targets make your CTA work in every context.

Start with your link text. Say what it does. "Download the 2024 guide" tells your reader what happens next. "Click here" doesn't. The button text is your first accessibility layer. Next, contrast. Your button text and background need at least a 3 to 1 contrast ratio to meet WCAG standards. Most colors fail this without a tweak. On mobile, you need that 44x44 pixel minimum tap target we talked about. If your button's text doesn't explain the action clearly, add an aria-label. That's the thing screen readers actually announce. And never, ever rely on color alone to say "this is a button." Use shape, text, or position too.

Check your colors and contrast with the Review My Emails Accessibility Checker. Learn WCAG contrast standards and how they apply to email. Get details on how aria-labels help screen readers, and explore why tap targets matter for all users.

Contributors

Who worked on this answer

Every name links to their profile. Every company links to their site. Real people, real accountability.

Ask an AI · tailored to your setup

Make my button accessible

I'm not sure if my button design is accessible. How do screen readers see my CTA? What do I need to fix?

Edit the yellow boxes, then send to the AI of your choice.