Alt Text Issue with Blog Image

[JPieters]

Good day, 

This year we recently had a company rebranded and had our HubSpot templates changed by HubSpot to suit the new look.

However, we have recently had an issue with the image alt text bringing up an error message with our blog posts. I spoke with HubSpot support, and they confirmed that the alt text is being applied. The error is coming from the img tag in the template: 

https://app-eu1.hubspot.com/design-manager/24975028/code/69259238850#L25 

So it looks to be an issue because the featured image is also listed as a background image. See below where featured_image is listed twice:

<div class="post-featured-image" style="background-image:url('{{content.featured_image}}');" aria-label="{% if content.featured_image_alt_text %}Featured image: {{ content.featured_image_alt_text }} - {% endif %}Read full post: {{ content.name|striptags }}" alt="{{ content.featured_image_alt_text }}"><img src="{{content.featured_image}}" style="visibility: hidden; max-width: 100%;" aria-label="{% if content.featured_image_alt_text %}Featured image: {{ content.featured_image_alt_text }} - {% endif %}Read full post: {{ content.name|striptags }}">

The first listing "style="background-image:url('{{content.featured_image}}');" is where it is being flagged for not having alt text.

They recommend I consult with a developer to see if the first listing is cause for concern or if the error can be ignored. Additionally, I was told to reach out on this forum. Has anyone else had the same roadblock before? 

Thanks, 
Kind regards
Jenine

[Stephanie-OG · Accepted solution]

Hi @JPieters 

I can't open the template since I don't have access to your portal, but looking at the code (and assuming the div element is closed somwhere) I notice that: 

1. The alt attribute is being used on the div element instead of the img. It should be moved to the img element instead. This should solve the error you're seeing.
2. For the div with the background image, I think the aria-label attribute should be enough (*). But you can also do things like add a title attribute or have a hidden element inside (e.g. on the HubSpot boilerplate they use a "show-for-sr" CSS class). 

(*) I'm going to add a little legal disclaimer here to point out that I'm not a web accesibility compliance expert

I hope that helps!

[JPieters]

Hi Stephanie, 

Thank you so much for your feedback, I will give it a go and see if that works. 😁

[Jaycee_Lewis]

Hi, @JPieters 👋 Thanks for your question! I'd like to invite some of our community members to the conversation — hey @Jnix284 @Stephanie-OG @alyssamwilie, can you suggest a next step or troubleshooting tip for @JPieters?

Thank you for taking a look! —Jaycee

[JPieters]

Hi Jaycee, 

Thank you for including others to help, I'm going to try the suggestion by Stephanie. 😊