[Topic] Pattern/component for an accessible card/tile/teaser #388

• I've confirmed that this document is not already in the Docs Project

Title
Accessible cards

Description
Place under Frontend -> Components

Explain what is important to keep a card/tile/teaser accessible
With

• heading structure
• meaningful sequence
• image alt
• how make the whole card clickable in an accessible way
• when to put cards in an unordered list
• How/when to give a group of cards a heading
• use <article> or not ?

Reason for Adding
This is a frequently asked question

Additional context
To do: find good examples in core themes.

Relevant resources
Before adding, check for up-to-date use of html/css and good use of screen-reader-text

• Pseudo-element link overlay.
• For Tenon.io on YouTube: What makes an accessible card?.
• WebAxe Resources for developing accessible cards/tiles.