Aria Label for CTA Fields

Search
1

Hi @roser

My client has the same CTA (Learn More) for all of their specialties and they want the Aria label / alt text to say “Learn more about [INSERT XYZ specialty]” so that screen readers can understand which specialty the link is for.

I don’t believe this is something we have today – can you clarify? Do we have a workaround for this and/or is it something coming in a new version?

Thanks,
Alyssa

2

Hi Alyssa,

You can add aria-labels to your CTAs in Jambo by updating the handlebars. However, it will require forking the card.

Here are the steps necessary:

  1. Fork the card (using the add card command).

  2. In the component.hbs file for the card, update the HTML to include the aria-label attribute on the CTA (see the last attribute here):

<a class="HitchhikerCTA js-HitchhikerCTA{{#if modifiers}} {{modifiers}}{{/if}}" href="{{url}}"
    data-eventtype="{{eventType}}" data-eventoptions='{{json eventOptions}}'
    target="{{#if target}}{{target}}{{else}}_top{{/if}}"
    aria-label="{{ariaLabel}}">

More information on how to use aria-labels are outlined in W3C’s guidelines.

  1. In the component.js file for the card, add the ariaLabel in your CTAs under dataForRender and set it to the appropriate text / field, for example:
CTA1: {
   label: "My CTA Label", 
   iconName: 'chevron', 
   url: "#",
   target: '_top', 
   eventType: 'CTA_CLICK', 
   eventOptions: this.addDefaultEventOptions(),
   ariaLabel: "Learn more about this product" //newly added label, can pull from the profile or be hardcoded 
},

This ariaLabel in dataForRender will be passed into the handlebars template for the card that you edited in step 2.

Generally this attribute makes sense to build in by default, I’ll make a request to do so (so you won’t need to edit the component.hbs file to configure the label).

Thanks,
Rose