Design for all » Inclusive usability » Cards
“Cards”, areas of multiple elements wrapped as a clickable link area, are a standard component in most website designs. To ensure them to be usable for all actually requires careful implementation.
Adrian Roselli thoroughly covers all the aspects — starting from why just packing everything in an anchor tag is a bad idea to the intrinsic details of implementing the best possible experience for assistive technology users:
Block Links, Cards, Clickable Regions, Etc. | Adrian Roselli
adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html
My personal go-to implementation is that of Heydon Pickering:
A key issue with “cards” and similar UI elements: they sometimes have more than one link target (e.g. for meta data or category pages). This is addressed in implementations like that by Heydon Pickering; also discussed more specifically elsewhere:
Teaser with multiple links
justmarkup.com/articles/2020-02-21-teaser-with-multiple-links/
Last edited: Sep 2022