Clickable images in the news feeds

[kasprzyk-sz]

We've received multiple suggestions from users to make the images in the news feed clickable, especially in the vf-news-container--featured variant.

I remember that this topic was raised at the very beginning of embl.org but I don't know why this hasn't been implemented. Would there be any 'No' for that?

Thanks!

[nikiforosk]

The main reason not to do that from an accessibility perspective is to avoid "redundant link" alerts which are triggered when adjacent links go to the same URL (in that case the link on the image and the title of the article would be the same).

When adjacent links go to the same location this results in additional navigation and repetition for keyboard and screen reader users.

Also images that act as links need alt text (which is actually redundant because most of these images are decorative).

The best practice in that case is for the image and the title of the article to be combined in one link (which is how vf-cards work).

I attach a screenshot from the w3 guidelines with the relevant example highlighted:

And another one with the summary of the guidelines from a similar example on a page evaluated by WAVE:

I hope this is useful, please get in touch if you'd like to discuss this more.

[nikiforosk]

The news summaries in the BBC news are applying this best practice - the image and the text below it are one link:

[khawkins98]

Hi there! Writing to second @nikiforosk's take that using the vf-card's technique of making the title link cover the clickable area is the better approach.

There will be some gotchas around how to handle other links in the news items, but again you can look to vf-card for an approach.

https://stable.visual-framework.dev/components/vf-card/

[nikiforosk]

@sandykadam to ask Maged to look into this at content hub.

[sandykadam]

@nikiforosk I checked this on my local and doesn't seem to be that easy as it contradicts with VF core principles of implementation. So we should hold this until we have PD and this also requires changes in VF core.

I tried to implement what Ken suggested in previous comment, but code wise it looks mixture of summary & card which I think is not the correct way and also the display looks weird.

In above screenshot if you see first box we are achieving the whole block clickable with mixture of vf-card & vf-summary but at the same time display looks bit different.

This is the code to achieve to make it work:

    <article class="vf-summary vf-summary--news">
      <img src="https://stable.visual-framework.dev/assets/vf-summary/assets/vf-summary--news-has-image.jpg" alt="" class="vf-summary__image" loading="lazy">
      <div class="vf-card__content | vf-stack vf-stack--400">
        <h3 class="vf-card__heading vf-summary__title"><a class="vf-card__link" href="JavaScript:Void(0);">some news heading
        </a></h3>
        <span class="vf-summary__date">4 September 2019</span>
      </div>
    </article>

We might have to introduce new varient in vf-summary and for this we will need proper change in VF core.

[nikiforosk]

I just noticed that the vf-video-teaser shows the desired behaviour, i.e. when I mouse over the image the link underneath it is highlighted:

[Adedoyinebi]

@bhushan-ebi as we discussed during the sprint planning meeting, I have done further investigation as to what the best practice recommendation will be to address the issue of redundant links in the vf-news-container.

Best practice recommendations

• From my investigation it is recommended that both links both elements should be wrapped in the same link. Here’s an example code:

<a href="home.html">
  <img src="house.gif" alt="home page icon">
  Go to the home page
</a>

• In a case where the descriptive text on the image is a repetition of the adjacent text, it is recommended to use a null alternative text on the image:

<a href="products.html">
   <img src="icon.gif" alt="">
   Products page
 </a>

Useful reads

• How redundant links impact accessibility | Bureau of internet accessibility
• Combining adjacent image and text links for the same resource | W3C

Next steps

• Kindly update the vf-news-container to have both the image and the text wrapped in the same link.
• The behaviour on hover should be similar to the vf-video-teaser as shown in Niki’s message above. Where the link gets highlighted on hover.