a11y initiative

The a11y initiative logo

The a11y initiative is a side project currently in development that aims to create a community wide, month long set of challenges to make the web more accessible. Comprising an eventual 30 daily challenges, designers and developers will learn more about how to make their websites and products accessible and inclusive to a wide range of audiences.

Toolset
Webflow, Figma
Expertise
Webflow
Platforms
Web
Timeframe
May 2019—Present

About accessibility

Simply put, accessibility (or, a11y for short since there's 11 letters between the "a" and "y") is the practice of designing and building products so that they can be usable by as many people as possible. Products built with accessibility in mind can be used by people of all walks of life.

Accessibility became a central focus of mine in late 2018 as I identified it as being a core competency that I knew little about. I championed making accessibility a central design tenant at Shoflo and worked hard on making the product team think about accessibility throughout the entire design and development process.

After researching and finding a plethora of great resources on accessibility, I identified the need for a niche. While there are already several existing sites that offer in-depth resources on accessibility, I wasn't able to find one that brought the community together to make the web more accessible. So I took it upon myself to create it.

I am currently working on the project and expect to launch it sometime in the near future.

Homepage

Homepage for the a11y initiative
Homepage of the a11y initiative

From the start, a11y initiative had a goal of being simple and straightforward. The home page features big bold typography (a la San Francisco) and free illustrations from undraw, and enough information to convey the goal of the project without being too overwhelming.

Here is how it is intended to work:
Every day a new challenge is released, each one covering a different aspect of accessibility and/or inclusivity. Each tile links to a separate page containing more in-depth information on that aspect of accessibility, along with links to additional tools and resources.

The challenges (so far)

Challenges section for the a11y initiative
Homepage of the a11y initiative

At the time of writing this case study, there are 23 separate challenges, with the goal to get to at least 30 to cover each day of the month. Some of the challenges are intended to be easy, such as updating line height or checking color contrast, while others are more advanced. More advanced challenges include adding ARIA elements where necessary, or addressing keyboard navigation. The latest challenge is called out in blue.

A sample challenge page

Sample challenge page for a11y initiative
A sample challenge page covering color contrast