Why CTA Accessibility Matters for Broker Websites
A call to action button that works perfectly on a desktop mouse but fails for someone using a keyboard or screen reader is losing you leads. Accessibility isn't just about compliance, it's about making sure every potential client who lands on your site can actually contact you.
Most mortgage broker websites include multiple CTAs across their homepage, service pages, and blog articles. The common assumption is that if the button looks good and the link works, the job is done. But a CTA that lacks proper semantic structure, colour contrast, or keyboard navigation support creates a barrier for visitors with vision impairment, motor disabilities, or anyone navigating without a mouse.
When building websites for brokers, we regularly see situations where a visually appealing CTA fails basic accessibility tests. Consider a broker who invested in a custom-designed homepage with a prominent "Book a Call" button styled in light grey text on a white background. The button looked clean and modern, but the contrast ratio was 2.1:1, well below the minimum 4.5:1 required for readability. Visitors with low vision or colour blindness couldn't distinguish the text from the background. After adjusting the button to navy text on a light background, the contrast ratio improved to 7:1, and form submissions from that page increased noticeably over the following month.
Colour Contrast and Text Readability
Your CTA text must have a contrast ratio of at least 4.5:1 against its background for standard text, or 3:1 for large text (18pt and above). This ensures visitors with low vision, colour blindness, or anyone viewing your site on a mobile device in bright sunlight can read your call to action.
Many website builders default to light text on pastel backgrounds or coloured text on photo overlays, both of which frequently fail contrast requirements. A teal button with white text might look appealing in your brand palette, but if the teal is too light, the white text becomes unreadable for a significant portion of visitors. Testing contrast is straightforward using free tools like WebAIM's Contrast Checker, which takes seconds and prevents you from publishing a CTA that excludes a portion of your audience.
If your CTA sits on top of a background image, the contrast becomes even harder to control because the image colours vary. The safest approach is to place a semi-transparent dark overlay between the image and the button, ensuring consistent contrast regardless of the photo underneath.
Not sure how your website compares?
Get a free Website Report and find out in seconds where you can improve
Keyboard Navigation and Focus States
Every interactive element on your site, including CTA buttons and links, must be accessible via keyboard. Visitors who cannot use a mouse rely on the Tab key to move through your page, and if your CTA isn't in the tab order or lacks a visible focus indicator, they won't be able to activate it.
A focus state is the visual indicator that appears when a user tabs to a button or link. By default, browsers display a blue or black outline, but many designers remove this outline because they find it unattractive. Removing the focus indicator without replacing it with an alternative (such as a background colour change or border) leaves keyboard users unable to see where they are on the page.
When designing CTAs for broker sites, we ensure every button has a clear focus state that matches the site's branding. A simple approach is to add a slightly darker background colour or a border when the button receives focus, making it immediately obvious to anyone tabbing through the page. This takes minimal effort during development but dramatically improves usability for keyboard-only visitors.
Descriptive Link Text and ARIA Labels
Screen readers announce the text inside your CTA, so generic phrases like "Click Here" or "Learn More" provide no context about where the link leads. A visitor using a screen reader who encounters a button labelled "Click Here" has no idea whether it opens a contact form, downloads a document, or navigates to another page.
Descriptive link text solves this problem. Instead of "Click Here", use "Book a Free Discovery Call" or "Get Your Website Pricing". The action and outcome are immediately clear, both to screen reader users and to anyone skimming your page.
In cases where design constraints require short button text, you can add an ARIA label to provide additional context for screen readers without changing the visible text. For example, a button that displays "Book Now" visually could include an ARIA label that reads "Book a Free Website Discovery Call", giving screen reader users the full context while keeping the button concise for sighted visitors. Understanding how to structure your call to action strategy means thinking beyond what the button looks like and considering how it functions for every visitor.
Button Size and Touch Targets
A CTA button that's too small creates problems for anyone with motor control difficulties or anyone using a mobile device. The recommended minimum touch target size is 44x44 pixels, which gives users enough space to tap accurately without accidentally hitting adjacent elements.
Many broker websites include multiple CTAs in close proximity, such as "Call Us" and "Book Online" buttons sitting side by side in a header. If these buttons are small and tightly spaced, visitors on mobile devices often tap the wrong one or miss both entirely. Increasing the button size and adding spacing between elements reduces frustration and improves conversion rates.
This applies equally to text links within blog content. A line of text that includes multiple inline links with minimal spacing becomes difficult to navigate on a touchscreen. Ensuring adequate padding around each link makes it easier for visitors to tap the one they actually want.
Semantic HTML and Proper Markup
Using the correct HTML element for your CTA ensures assistive technology interprets it correctly. A button element (
Many websites use div or span elements styled to look like buttons, but these elements carry no semantic meaning. Screen readers won't announce them as interactive, and they won't respond to keyboard navigation without additional JavaScript. Using proper semantic HTML from the start avoids these issues entirely and ensures your CTA works as expected for all users.
When building or upgrading a broker website, this level of detail matters. A website upgrade that focuses only on visual design without addressing accessibility leaves functional gaps that cost you leads. The additional development time required to implement accessible CTAs is minimal compared to the impact of a site that works properly for everyone.
Testing Your CTA Accessibility
Running your site through an automated accessibility checker like WAVE or Axe DevTools will flag common issues such as missing alt text, insufficient contrast, and missing form labels. These tools won't catch everything, but they're a useful first step.
Manual testing is equally important. Navigate your entire site using only the Tab and Enter keys to confirm every CTA is reachable and functional without a mouse. Test your site with a screen reader like NVDA (Windows) or VoiceOver (Mac) to hear how your CTAs are announced. If the experience feels confusing or incomplete, it needs adjustment.
Accessibility isn't a one-time fix. Every time you add new content, update a page, or adjust your site design, those changes need to maintain accessibility standards. If you're working with a developer or website management provider, confirm they test for accessibility as part of their standard process rather than treating it as an optional extra.
Call one of our team or book an appointment at a time that works for you. We'll review your current site, identify accessibility gaps, and show you how a properly structured CTA improves both usability and lead conversion.
Frequently Asked Questions
What is the minimum colour contrast ratio for CTA buttons?
Your CTA text must have a contrast ratio of at least 4.5:1 against its background for standard text, or 3:1 for large text (18pt and above). This ensures visitors with low vision or colour blindness can read your call to action.
Why should I avoid using 'Click Here' as button text?
Generic phrases like 'Click Here' provide no context for screen reader users about where the link leads. Descriptive text like 'Book a Free Discovery Call' makes the action and outcome immediately clear to everyone.
What is a focus state and why does it matter?
A focus state is the visual indicator that appears when a user tabs to a button or link using their keyboard. Without a visible focus state, keyboard users cannot see where they are on the page or which element they're about to activate.
What is the recommended minimum touch target size for mobile CTAs?
The recommended minimum touch target size is 44x44 pixels. This gives mobile users enough space to tap accurately without accidentally hitting adjacent elements or missing the button entirely.
Should I use a button or link element for my CTA?
Use a button element for actions that trigger behaviour on the same page, such as opening a modal or submitting a form. Use an anchor element for links that navigate to a different page or section.
