"If it goes to a URL, it should be a link. If it performs an action, it should be a button."
This is the rule and for good reason-- the keyboard interactions are different, the visual affordances are different, and browsers and assistive tech treat these things differently.
We do what we can to educate both designers and developers about this, since over the years it has gotten a little fuzzy and maybe even ignored entirely. But lately, things are good. Folks understand that we need these things to be different for more inclusive design. It's great!
Except...the CTA.
The CTA is intended to be a design element that has the following features:
- draws the user's attention (stand out from the things around it)
- placed prominently on the page
- usually a link (to fill out a form, or sign-in, etc)
So immediately we see the paradox here- it is most likely that the underlying element is a link, but the need for prominence means...it will likely need to be styled like a button.
So, do we just accept the a11y fail here then?
Maybe, but we can probably mitigate in a few ways by making a custom CTA component with these features:
- make the component correct underneath- if the developer invokes the component with a URL/Route defined, then a link renders; if they invoke the component with an action defined, a button is rendered instead.
- set restrictions for the number of CTAs that can be on a single page. If the point that the CTA stands out, this should align conceptually, since nothing will stand out if there are multiple important things.
- provide education for both designers and developers, to ensure that everyone is aware of links, buttons and CTAs and how to consistently use each.
The consistency would be both a design concern and an application concern, so alignment across the board is important here!