Crazy Cats Coffee Web Accessibility Project

Crazy Cats Coffee Web Accessibility Project facilitates developers learning and incorporating web accessibility (A11y) best practices into their daily workflow. The core of the project is a set of articles with clearly outlined accessibility concepts. Each article is accompanied by an example code block and an example from the fictitious "Crazy Cats Coffee Shop".

The project started as a single article with a codepen in 2023. It's now grown to a series of articles and tech talks with a set of example codebases and websites for the fictional "Crazy Cats Coffee Shop". As of April 2024, the vanilla example site is deployed. The links for that are below.

Subdomain Site Links

The project is developing mirror sites for the fictious "Crazy Cats Coffee" shop using different tech stacks so developers can see examples of accessible code in different libraries and frameworks. Links to the sites and their GitHub repos are below.

Vanilla HTML and CSS

Quick Accessibility Tips for Devs Talk at #A11yTO Camp 2024.

I'm doing a talk at A11yTO Camp on Saturday, April 5th, 2024. : "Quick Accessibility Tips for Developers - With Cats and Coffee Themed Code Examples". The event is at Microsoft, Toronto. Resources and links for the talk are below.

"#a11yTO Camp is about making friends, sharing ideas, and growing our community. #a11yTO Camp encourages fresh voices to join in conversation with industry leaders."

Links to Handouts

Several handouts and documents were produced for this talk. They are available for download below.

Google Doc link to the slides PDF exported from Figma - images only
PowerPoint file on OneDrive with alt text for slides and speakers notes (handout)
PDF Handouts of the PowerPoint with speakers notes (handout)

Links to Code

About half the talk is sharing code. Links to GitHub repos, CodePen, and a GitHub CodeSpaces are below.

Crazy Cat Coffee Web A11y Project GitHub
Site: https://vanilla.crazycatscoffee.com
Vanilla site index.html on GitHub
Vanilla site styles.css on GitHub for prefers-reduced-motion
Animated Cat on events.html for prefers-reduced-motion
Animated Cat styles-animation.css for prefers-reduced-motion
Animated Cat CodePen for prefers-reduced-motion

Links to Resources

To learn more and dive deeper into the topics covered in the talk, check out the resources below. They are a mix of articles and documentation. I've also included the article from Deque that I used as an example page in skip to main content. While Deque definately has a skip to main link, if it didn't the amount of content in the header would be extremely annoying if you just wanted to read the article.

The WebAIM Million: The 2024 report on the accessibility of the top 1,000,000 home pages WebAIM, Updated 7 March 2024. First published July 2005.
WCAG 2 Overview W3C, April 4, 2023
"aria-label, aria-labelledby, and aria-describedby: What's the Difference?" by Ben Myers, Dec 7, 2020
What is Semantic HTML? by David A. Kennedy, The A11y Project, April 4, 2023
Page Titles WebAIM
A Guide To Keyboard Accessibility: HTML And CSS (Part 1) by Cristian Díaz, Smashing Magazine, Nov 14, 2022
CSS In Action - Invisible Content Just for Screen Reader User" WebAIM
"Respecting Users’ Motion Preferences" by Michelle Barker, Smashing Magazine: Oct 21, 2021
Skip Navigation Links WebAIM
Used in the skip to main content section Accessible Speaking Best Practices By Laura Nandakumar: Deque blog, March 20, 2024
prefers-reduced-motion MDN - Mozilla Developer Network docs

Resources to Dive Deeper into Web Accessibility

The most comprenhesive resource on coding accessible forms is "Structuring accessible forms" by Rachele DiTullio, Talk, videos (with closed captions and ASL), GitHub repo, CodePen. It's cat themed, and covers all the common form elements, and error handling.

My Web Accessibility Study Group has a running Google Doc of Accessibility Links. It's focused on covering the topics in the International Association of Accessibility Professionals (IAAP) Web Accessibility Specialist (WAS) certification exam.