The card component is used to provide a brief summary of content or a task, often with a link to more detail. Cards are frequently displayed alongside other cards to group related content or tasks.


View changes
npm i
  • Raj Ghuman avatar picture
  • Gary Broadbent avatar picture
  • Alex Page avatar picture
  • Dominik Wilkowski avatar picture
  • Petr Illek avatar picture
  • Trevor Brennan avatar picture

A common pattern is to wrap the entire contents of a card inside an anchor tag. For example, a card that is a preview to an article or blog post often contains an image, title of the article and some preview text. E.g.

<a class="au-card" href="/article-1">
    <img />

Having an anchor tag wrapping these contents has the benefit of having a large click area. A user is able to click anywhere in this card and view the full article or blog post.

However this can cause difficulties for screen readers. When a screen reader user focuses on this anchor tag, the entire contents of the card are read out. This can be a frustrating experience, particularly when there is a lot of content inside the cards. Furthermore when there is a large amount of cards (wrapped by anchors) on a single page, the links landmark menu of screen readers can get extremely convoluted.

Given this, the alternative is to have a single anchor tag inside the card, and have the hit area of this anchor tag wrap the card. This approach yields the benefits of having a large click area, but avoids issues for screen readers.