Digital Accessibility Index: Learn where the world’s leading brands fall short on accessibility.

See Report

A Call-to-Action to Make Your Calls-to-Action Accessible

Mar 11, 2021

A clear and effective call-to-action (CTA) can help drive conversions. Knowing this, most marketing teams put a lot of thought into the smallest details, trying to find the best ways to connect with their prospects. They'll often obsess over hard data and the results of user studies if they have that information available — if not, they might make educated guesses and make adjustments over time. There are best practices for different industry and media types, but it's usually an experimental exercise, hoping that over time they'll find the right combination of wording, placement, and even colors. If you want a way to guarantee that your CTAs are easier to find and use, make them accessible.

All applicable digital accessibility guidance should be incorporated when crafting the perfect CTA, although you'll definitely want to make sure:

  • Color contrast is strong.
  • It can be used with a keyboard.
  • Labels are clear and consistent.

Color contrast

Color contrast refers to how well one color stands out from another color. In web accessibility, this is measured using a color contrast ratio, a numerical value assigned to the difference in light between foreground and background.

For a digital CTA, the foreground is usually text or an image of text. In order for most people to be able to read the message, there are minimum color contrast ratios that should be met. Usually, an acceptable minimum ratio is 4.5:1, but it can vary based on the size of the text or target WCAG conformance level.

Choosing colors with enough contrast is one of the simplest ways marketers and designers can create CTAs that more of their customers can easily see and read.

You can get a free instant color contrast analysis with the a11y® Color Contrast Accessibility Validator.

Keyboard accessibility

It doesn't matter how compelling a CTA's message or design is if people can't get to it or click it, but that's precisely what happens if it isn't keyboard accessible.

Many web users don't use a mouse. Instead, they use a keyboard, keyboard emulator, or other input device. It's up to developers and content creators to make sure that everything is accessible using only a keyboard.

So often, the most important action marketers want a customer to take can't be completed without a mouse, rendering the materials useless for that person. If they wanted to click that button or link and they can't, you might never know the reason why, only that an opportunity was lost. Keyboard accessibility is one of the main reasons accessibility improves bounce rates, too.

Are your CTAs keyboard accessible? Give yourself an accessibility test: don't use a mouse.

Links and labels

Any link or button that takes the user somewhere or helps them do something needs to be clearly labeled so that people can act on it confidently. This is true for all interactive elements, but it can be especially important the main CTA.

Accessible hyperlinks that are clear are more usable for everybody. People who sighted should see a CTA with visible text that makes its purpose clear. Someone who uses a screen reader should get the same information — not a vague "click here" link or a hyperlinked image that doesn't have alt text associated with it. People who use speech input expect that the accessible name includes the text that is shown visually, so they can activate it confidently and intentionally.

Everyone requires an indicator that lets them know what a CTA is going to do and how to choose it. Making sure the intended message is the same message that's available to everyone usually isn't hard to test and can have a big impact.

Marketers and developers can be assured that the carefully-selected prompt is presented to everyone, instantly expanding effectiveness and reach.

Was this content helpful?

Subscribe to our blog and newsletter.

Use our free Website Accessibility Checker to scan your site for ADA and WCAG compliance.

Powered By

Recent posts

Accessibility Tips: Don’t Use Subheadings Because of How They Look

Sep 5, 2024

Writing Alt Text for Hyperlinked Images

Sep 4, 2024

Why No ARIA Is Better Than Bad ARIA

Aug 28, 2024

Not sure where to start?

Start with a free analysis of your website's accessibility.

GET STARTED