[ACCESSIBILITY] Is it safe to remove img tag on CTA?


#1

Hello all,

i am actually facing question about HubSpot CTA. Following code is showing how actual CTA looks like :

	<!--HubSpot Call-to-Action Code -->
<span class="hs-cta-wrapper" id="hs-cta-wrapper-<someRandomIdHere>">
	<span class="hs-cta-node hs-cta-<someRandomIdHere>" id="hs-cta-<someRandomIdHere>">
		<a href="https://cta-redirect.hubspot.com/cta/redirect/4784372/<someRandomIdHere>" target="_blank" >
			<!-- our expectation is to replace this image to plain text -->
			<img class="hs-cta-img" id="hs-cta-img-<someRandomIdHere>" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/4784372/<someRandomIdHere>.png"  alt="Un projet ? Parlons-en"/>
		</a>
	</span>
</span>
<!-- end HubSpot Call-to-Action Code -->
<script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script>
<script type="text/javascript">
hbspt.cta.load(4784372, '<someRandomIdHere>', {
	// Is maybe option who have to be provide here.
});
</script>

As you can notice, CTA is compose by double span structure and link tag who wrap image tag. For accessibility reason and W3C standard, is always better to use plain text to provide information to your user.

Is why i would like to avoid image and replace it by original plain text. Does this will have negative impact about tracking ? If yes, could we play around by extra javascript code ?

i have assume you have 2 major reasons to use image here :

  • Easier to manage design requirement by image instead of HTML/CSS
  • you can easily count how many time CTA are printed on browser, and compare it by how many time CTA are clicked.

Actual goal is to have HTML who looks like bellow :

<p>
	<a href="https://cta-redirect.hubspot.com/cta/redirect/4784372/<someRandomIdHere>" class="my-awesome-btn" target="_blank" >
		Un projet ? Parlons-en
	</a>
</p> 

Let me know if i can be in any help.


#2

Hey Yanis,

We don't currently support any customisation of the CTA embed code and this usually causes issues with CTA tracking. However, the img tag itself is actually a fallback image which only ends up displaying should the scripts fail to load correctly.

If you look at a live, non image CTA on the page you'll see when the scripts load we actually replace this img with a full styled tag which includes a title in here and the image is removed. The only time an img tag would load when all scripts fire correctly is if the CTA is setup as an image cta within the editor.