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.
Cards as links
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 /> <h2></h2> <p></p> <ul> <li></li> <li></li> <li></li> </ul> </a>
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.