Review design and implementation of cards and info cards for improved accessibility

[jhung]

Describe the bug
The cards and info-cards are accessible, but not the best accessibility experience. For example, in many cases when a card is focused or read aloud, non-critical information is presented first (like the category or a close button), then the title of the card.

Also each hard has a lot of semantics, some of which may not be critical for a non-visual user. There is an opportunity to simplify and tighten up the semantic information.

To Reproduce
Steps to reproduce the behavior:

1. Launch a screen reader
2. Have the screen reader read through resource cards and info-cards.
3. Notice the complexity of cards (headers, lists, etc.)
4. Notice the order in which non-critical information is presented to the user first.

Expected behavior
The feedback to the user can be simplified to make it easier to cognitively understand the content. Critical information to the user should be presented first, then non-critical information.

[cherylhjli]

Revised designs:

Format with all possible metadata

• Title
• Author
• Format [mid dot]. followed by:
  - Publisher, if any resource in the spreadsheet that should show publisher
  - School, if curriculum
  - Conference, if presentation
  - Interviewees, if interview
  (note that I ended up putting these on the same line because I tried it out on separate lines on mobile and the cards can take up an entire screen length or more on a small mobile device)
• Location
• Language [mid dot] year published
• Tags

[dayotte]

@cherylhjli these look good. For the case study example I see that the format comes before the author, was that intentional?