Creating an accessible card interface

These are the demo files for the video tutorial on the same subject.

I explain in detail what's happening here in this ~15 minute video tutorial on YouTube.

I also tested an earlier version of the card interface in the browser and with Voiceover on Mac.

Developer tools used:

Unstyled Version – the bare bones HTML without any styles or scripts – works only as a list.
Clickable Card – you can click the whole card to go to the link destination
Adding Button and Links – adding the HTML for inline links and closing buttons. This doesn’t do anything as they are still covered.
fixing Button and Links – setting the inline links to relative and upping the z-index
Adding Hover Effects – making it look nicer and more obvious which card you are on
Hiding on Click – adding the click handler
Hiding Smoothly on Click – adding the transition
Final – all together working in harmony
Debug – debugging version showing what happens when you click on elements rather than leaving the page