Image as link with no alt text in widgets

LiveWhale
1

In some embedded widgets, we have an issue where thumbnail images that do not have alt text are the only content of a link. We’re using the {image} placeholder which includes the linked image. The result is a link with no discernible text. Is there a way for us to control what is in the {image} placeholder to provide the event title as alt text when the image does not have any alt text set?

Or, has anyone else solved this problem a different way?

Demo on page: LiveWhale Widget Test | PMACS Web Team | Perelman School of Medicine at the University of Pennsylvania

HTML format for each item in widget:

<li class="card-feed__item">
    <span class="card-feed__image-wrapper">{image}</span>
    <div class="text-component">
      <p class="card-feed__item-title">
        <a href="{href}">{title_clean}</a>
      </p>
      <p class="card-feed__date">
        <span class="date">{date}</span>
      </p>
      <p class="card-feed__time">
        <span class="time">{time}</span>
      </p>
      <p>
        {summary_clean}
      </p>
    </div>
  </li>
2

Hi Ann,

Great question, this is a really good example of how we’ve worked to build the LiveWhale widget and image tools for both flexibility and accessibility, and sometimes one can end up stepping on the other a bit.

In brief, you can always use {image_clean} instead of {image} if you want the un-linked version of the image. (more on _clean in the docs)

At the same time, often what we’ve seen is that folks still want the image to link, but they don’t want it to show up as a double-link for keyboard or screen-reader users. Sometimes in design projects, we’ve made the decision that “this event/news image is decorative in this context, so it’s OK for screen readers to skip it” and figure they can get more info about the image on the actual event page.

Here’s some widget code we’ve used to that end, which uses {image_clean} but then reconstructs a link that gets skipped by screen-readers (aria-hidden="true" and role="presentation") and keyboards (tabindex="-1"). It’s a little dense, but if that’s what you’re after hopefully it may help!

<!-- LW: We define this image as decorative, skip for screen readers -->
<!-- LW: Users can go into the headline and find more about the image there -->
<div class="widget-image" role="presentation" aria-hidden="true">
  <!-- LW: Skip this link in the tab order, tab straight to headline instead -->
  <a href="{href}" tabindex="-1">
    {image_clean}
    <!-- LW: Fix WAVE false positive for empty link -->
    <span class="lw_sr_only">Featured Event: {title_clean}</span>
  </a>
</div>

We’ve considered alternative options and discussions like this in the past which include suggestions like styling one link to go over the whole “card” design; but often times we have folks who want to include separate links in their {summary} field, so we don’t necessarily end up advocating for it in build-outs.

If anyone else has their own approaches to this problem, I’m curious too!

1 Like
3

Thanks for your help, Karl!

I think that will solve our problem well.