Wrong sequence in Link Card

[solhell]

Description of the bug

The setup for Link Card as described at https://storybook.designsystemet.no/?path=/story/komponenter-card--link-card has an accessibility issue, as the code sequence is image, heading, content and footer, all inside a link. Hence the link text will be the total of alt-text + heading + content + footer, and as the alt-text should convey the content of the image, the first words of the link text will not be descriptive of the link target.

There are CSS-tricks that can be used to have different sequence visually than structurally, and this is a use case where you should consider doing so, so that the link contains heading + image + content + footer, alternatively that only the heading is inside the link, while the entire card is still focusable/hoverable.

Steps To Reproduce

Current code:

<a href="https://designsystemet.no" target="_blank" rel="noopener noreferrer" class="fds-card fds-card--neutral fds-card--link fds-focus">
<div class="fds-card__media"><img src="https://storybook.designsystemet.no/assets/Cat%206-DEXHIEDE.jpg" alt="katt 2"></div>
<div class="fds-card__header"><h1 class="fds-heading fds-heading--sm">Link Card</h1></div>
<div class="fds-card__content">Most provide as with carried business are much better more the perfected designer. Writing slightly explain desk unable at supposedly about this</div>
<div class="fds-card__footer"><p class="fds-paragraph fds-paragraph--sm">Footer text</p></div>
</a>

Additional Information

No response

[mrosvik]

Thanks for reporting this, we will look into it.

[Febakke]

@solhell Thanks for reporting this 🙌

In most cases images in link cards will be decorative and should be handled with alt="" . In those cases the title will be the first element read by the screen reader.

But there are cases where you want to use an alt text for images in cards. And as you sugges you can change the visual order using CSS. The problem is that our card is flexible. If you want you can put the images in the bottom as shown here:

If we implement order this will break the component as it will override the order you build the card, the more flexible solution is for the developer consuming the component setting this up themselv when implementing it.

(I used inclusive components: cards as source when looking into this)

I think the solution will be to create better examples and documentation describing how users of the card component should implement this when they use the component.

[mimarz]

We will update Storybook stories and add a note about correct usage with Link Card.

[Barsnes]

I have removed the alt text on our card in the next branch, as well as added a sentence about link cards and images: https://next.storybook.designsystemet.no/?path=/docs/komponenter-card--docs