Case study

💛 Access Guide

Making accessibility more fun and understandable

📋 Project summary

Access Guide helps people build more accessible products and websites. It’s a simplified, illustrated version of *WCAG 2.1 for people who are passionate about accessibility and want to learn more.

*WCAG: Web Content Accessibility Guidelines


Project details

  • Company: this is my side project 😁

  • Timeframe: February 2018 - ongoing

  • Platform: Gatsby

Design tools

  • Wireframes: Figma

  • Print design: previously Adobe Illustrator & Indesign, now Figma

  • Research: Google forms, Google slides

Collaborators and their roles

  • Illustrators and artists: create visual assets and illustrations

  • Developers: implement website and write code snippets

My roles and responsibilities

  • Project management: organized and scheduled tasks for myself and collaborators

  • Styles: created visual design and writing styles

  • Web design: created high-fidelity wireframes to communicate vision

📚 Understanding WCAG

WCAG is incredibly dense and reads like a law textbook. This makes it intimidating to people who are just getting started in accessibility. My goal was to highlight all the essential information and make it more fun and approachable.

Round 1

To start off, I used the original content structure and took notes on each *success criterion, paraphrasing content as I went. WCAG is comprised of 4 sections:

  1. Perceivable

  2. Operable

  3. Understandable

  4. Robust

I decided to create 4 *zines, 1 zine for each WCAG section. I worked with a friend to design a zine for the first section, Perceivable, with fun illustrations and sent it out for feedback.

The biggest takeaway was that the paraphrased content still felt very robotic and confusing to people. Section titles like “Perceivable” felt arbitrary and vague. While the content was definitely shorter and people liked the illustrations, it was not any more understandable than the original WCAG.

*Success criterion: an actionable item you must implement to be accessible

*Zine: an independently published book or magazine

Screenshot of google doc showing my original notes for the “Perceivable” section. Included are color-coded highlights for WCAG conformance levels (A, AA, AAA) and photographs of hand sketches intended to communicate the idea of drawings. To access the full text in a non-image format, go to this  google doc .

Screenshot of google doc showing my original notes for the “Perceivable” section. Included are color-coded highlights for WCAG conformance levels (A, AA, AAA) and photographs of hand sketches intended to communicate the idea of drawings. To access the full text in a non-image format, go to this google doc.

An example of a design spread in the “Perceivable” zine. This one says, “1.2 Time Based Media. Provide text descriptions of visual information in video content.” It has an illustration of a video player with adorable baby pandas with a video description underneath, and descriptions for specific requirements for levels A and AAA. To access the full text in a non-image format, go to this  PDF google drive link .

An example of a design spread in the “Perceivable” zine. This one says, “1.2 Time Based Media. Provide text descriptions of visual information in video content.” It has an illustration of a video player with adorable baby pandas with a video description underneath, and descriptions for specific requirements for levels A and AAA. To access the full text in a non-image format, go to this PDF google drive link.

Round 2

Card sorting

Based on the feedback, it was clear that I should organize content in a more intuitive way. I wrote down each success criterion on an index card and did a card sorting exercise that led to 3 major categories:

  1. Content

  2. Design

  3. Programming

Photo of card sorting exercise laid out on hardwood floors. The pink post-it notes represent grouping themes and the white cards represent individual success criteria. Text that is visible to sighted people include: focus order, hover/focus behavior, focus does not change context, focus visible, correct sequence is p.d., purpose of input field is programmatically d.

Photo of card sorting exercise laid out on hardwood floors. The pink post-it notes represent grouping themes and the white cards represent individual success criteria. Text that is visible to sighted people include: focus order, hover/focus behavior, focus does not change context, focus visible, correct sequence is p.d., purpose of input field is programmatically d.

Labels and categories

I wanted to take a more systematic and modular approach, so I completely re-wrote the notes. I created “modules” that each had the following info:

  1. Title

  2. User quote

  3. Description

  4. Category label: Content, Design, or Programming

  5. Disability label: Cognitive, Hearing, Physical, and/or Visual

  6. WCAG and conformance label: the number(s) to the original WCAG section and conformance level (A, AA, and/or AAA)

  7. Illustration or code snippet

I wanted to get more feedback on this new format, but did not want to send my giant google doc out because it might overwhelm people. Instead, I created google slides so that people could focus on one slide at a time.

The main takeaway was people found the slides informative and helpful, but didn’t think the format was visually appealing. They wanted a resource that they actually enjoyed looking at.

Screenshot of google doc depicting the new version of Access Guide with the modular labels and categories mentioned above. The google doc includes highlighted sections for where I call out ideas for illustrations, and comments from me on the side based on discussions with collaborators. To access the full text in a non-image format, go to this  google doc .

Screenshot of google doc depicting the new version of Access Guide with the modular labels and categories mentioned above. The google doc includes highlighted sections for where I call out ideas for illustrations, and comments from me on the side based on discussions with collaborators. To access the full text in a non-image format, go to this google doc.

Screenshot of google slides depicting the content category of the new Access Guide. The current slide says, “Provide specific pronunciation for ambiguous words” with the description on the left and a text example on the right. There are no images on these slides. The access the full text in a non-image format, go to these  google slides .

Screenshot of google slides depicting the content category of the new Access Guide. The current slide says, “Provide specific pronunciation for ambiguous words” with the description on the left and a text example on the right. There are no images on these slides. The access the full text in a non-image format, go to these google slides.

Round 3

Style guide

My original intent was to be fun and approachable, and getting buried in the technical information led me astray from that goal. I created a fun style guide based on the core concept of the “card” as a guiding piece of information.

Screenshot of color palette (left) and card thumbnails (right). The color palette includes category, disability, WCAG, and web accent colors. Each color includes the color contrast number and WCAG conformance level (AAA for all except accents). The thumbnails show how all the colors combined. To access this information in a non-image format, go to this  figma file ’s styles & assets page.

Screenshot of color palette (left) and card thumbnails (right). The color palette includes category, disability, WCAG, and web accent colors. Each color includes the color contrast number and WCAG conformance level (AAA for all except accents). The thumbnails show how all the colors combined. To access this information in a non-image format, go to this figma file’s styles & assets page.

Screenshot of 11 different iterations of the card format, with the first design on the left and the final one on the right. These iterations show different options for format, amount of color, what section to emphasize, and options for portrait and landscape. To access this information in a non-image format, go to this  figma file ’s cards & illustrations page.

Screenshot of 11 different iterations of the card format, with the first design on the left and the final one on the right. These iterations show different options for format, amount of color, what section to emphasize, and options for portrait and landscape. To access this information in a non-image format, go to this figma file’s cards & illustrations page.

Image of final design for Content (blue with diagonal lines), Design (red with dots), and Programming (dark purple with downward spikes). Each card has a title, description, quote, and tags.To access this information in a non-image format, go to this  figma file ’s cards & illustrations page.

Image of final design for Content (blue with diagonal lines), Design (red with dots), and Programming (dark purple with downward spikes). Each card has a title, description, quote, and tags.To access this information in a non-image format, go to this figma file’s cards & illustrations page.

As I developed these materials, I continuously got feedback from people and made a series of small adjustments, including:

  • Ensure color contrast at least level AAA compliant

  • Focus the user quotes on the tech problem instead of the individual

  • Add a glossary to explain terms like *screen reader

*Screen reader: an assistive tech device that allows users to interact with software through audio or braille

Illustrations and code snippets

I worked with an accessibility-focused developer to write code snippets to provide tangible examples of accessible code. We discussed our goals over video call and collaborated over Github - I learned how to review pull requests!

I also worked with artists to create illustrations

Screen Shot 2019-10-06 at 9.12.31 PM.png

Challenges

Lack of industry knowledge

Prior to working on this project, I had experience in usability but did not have robust experience in front-end development or accessibility. Access Guide is actually the resource I wish I had when I first got interested. I did as much research as possible throughout the process to ensure that I was building an accurate resource.

Side projects are on the side

🖥 Website design

It became clear that Access Guide needed to be accessible to blind people via screen readers, so having zines and cards alone would not cut it. I designed the website to be the digital version of Access Guide.

Sketches

I created sketches to

Low-fidelity wireframes

Without focusing on style, I created lo-fi wireframes that I reviewed with designers.

High-fidelity wireframes

Challenges

👯‍♀️ Community outreach

Workshops and trainings

Shared research