Improve accessibility of card interface

[djplaner]

Potential issues

• card types have varying accessibility requirements
• lists
  • screen readers manage lists well (Card Interace isn't doing this)
• providing keyboard access
  • tabbing focus indicators
• Whole cards wrapped in links throwing out screen readers
• Headings
  • Card headings appearing after images
  • correct semantic mark for heading
• Other element placement for screen readers
  • date block
  • card label sub-heading
• Images
  • file size
  • alt tags - basic level indicating a card image may not be linked to understanding the page

Resources

How to build accessible cards-block links

codePen example

Identifies two problems

• Wrapping the whole card in a link - causes issues with screen readers issue with Card Interface
• Marking the image and call-to-action separate links
• Points out issues with the header not appearing before the image

Solves the first problem by

1. Adding link to a header associated with the card
2. Adding an event handler on load that
   1. Wraps each card with an on-click event - but which has to deal with the same issue of allowing links in the description
   2. And does some aria-hidden stuff on the 2nd issue

Resources for developing accessible cards/tiles

Starts with a list of issues with cards (good) and then a list of links to resources (including the above)

Inclusive web design: an approach

Outlines one approach. More a proposal, no working code

A11Y style guide Cards

Collection of examples and suggestions a couple of useful points

Cards by inclusive components

More detailed insights.

• problem with link around the whole thing
• Basic approach
  • sound document structure
  • css to solve visual layout
  • Javascript to enhance behaviour (if beneficial)
• pseudo-content trick - and other CSS to make the whole card clickable
• change the cursor style to get the change affordance

Tailwind accessibility

• tailwind page - limited value

[djplaner]

To do

Checking

• Set up separate repo to test cards
  • collection of folders with different current cards
  • Create inclusive versions of them using inclusive components
• set up accessibility analysis of card interface (each WAVE)
  • vscode plugin