This month we will be exploring the skeuomorphic "Card" user interface components and how to accessibly implement them. We look forward to seeing how others have implemented cards and to discussing best practices, especially since cards do not yet have one best way to be implemented.
Hadi has written up some preliminary observations from reviewing the use of cards across a number of popular websites. I’ve included those in a collaborative Card UI Component Google doc, which I encourage you to contribute to as well with your own examples, observations, and feedback!
Here are some helpful resources to brush up on Cards:
- Cards: UI-Component Definition (Nielsen Norman Group)
- Material Design Resources: Cards (Google)
- Cards Design Pattern (UI Patterns)
- Cards (Inclusive Components)
We’re always looking for websites and topics to discuss! Email us any time and we’ll add your site/topic to the agenda for an upcoming meeting.
Meeting Notes
- How to group cards?
- Lists? [Keith’s preference]
- Pros: easy to navigate, jump from card to card
- Cons: may be semantically incorrect -- lists are for grouped similar items
- Regions? (i.e. HTML sectioning elements, ARIA landmark regions) [Hadi’s preference]
- Pros: region has defined start/end unlike headings, which only signify start of a group of content, can navigate using screen reader landmarks list
- Cons: no count of number of cards like a list would provide, no grouping of related cards like a list would provide
- Lists? [Keith’s preference]
- Card pattern libraries don’t know how cards will be implemented - e.g. no guarantee they’ll use headings. Need to provide some sort of structure.
- ARIA role=“group”? Different from lists, sectioning elements. Not supported everywhere, not intended to be included in a page summary or table of contents by assistive technologies, meant to be used within a widget. Keith recommends list instead.
- Eli: What about cards with content inside the card but before the heading?
- Michael: CSS grid with heading as first element but positioned after other content? Is it a problem that the visual order (top-to-bottom, left-to-right) doesn’t match the underlying structure?
- Matt: Sectioning element w/aria-label pointing to heading?
- Keith: inconsistent results across browsers/screen readers
- <a> tags for large blocks of card content (up to all of it) so most or all of the card is clickable/tappable - how to implement so link text is not too long?
- <a> positioned over card content rather than actually encapsulating it? Downside: breaks functionality when tapping on item using iPhone (discover mode??)