Kseniia (Balaenkova) Daniels
Art Director
Experiencing Accessibility:
A Guide to the Web
Thesis, NYU
Overview
My thesis project was a website that aimed at increasing people's awareness around the topic of the web still not being accessible when used with assistive tech. By simulating the barriers that people with disabilities experience when encountering inaccessible websites, I hoped to trigger different thinking patterns amongst web designers and developers.
One of the goals of this project was to be able to funnel the guideline into a game-like environment in order for users to learn. Most importantly this would allow embodying why these guidelines are important and should be a standard to uphold.
Presentation video
This is a midterm presentation video. It will be updated with a final thesis presentation video as soon as it is available.
Timeline: Research - 2 months, Implementation & User Testing - 4 months
Tools: Figma, Miro board, Canva, HTML, CSS, Javascript, VS Code, Procreate
Deliverables: Two presentations, Research paper, a Prototype, & a Final Website
Supervisors: Sharon Lee De La Cruz & Amy Hurst
Problem Intro
Web Content Accessibility Guidelines (WCAG) were released by the World Wide Web Consortium (W3C) more than 20 years ago. Despite the fact that WCAG 2.0 is required by law, companies still disregard these accessibility standards. Recently, companies started to become more interested in making their websites accessible. From January 2019 to December 2019, there was a 400% increase in Google searches for ADA and WCAG compliant solutions. One potential reason for this could be the rise of lawsuits; there were 2,200 lawsuits in the US filed in 2018 compared to 816 ones filed in 2017.
I’ve become interested in why there was such a problem in following accessibility standards. While investing in complying with WCAG costs time and money, it seemed better than getting a lawsuit. When I looked at WCAG requirements, I realized that they are comprehensive and dry. Most, if not all of the resources, provided plain text with a lot of information, demonstrating that it can be difficult to follow these standards. Discovering how WCAG requirements were relayed inspired me to make the learning process more interactive and enjoyable.
I made a context map that fit nicely into my research process. It showed the gap that my project can fill - interactive learning of web accessibility guidelines:
Research
Process
My research started with exploring online courses and resources on web accessibility; my goal was to scrutinize all the learning resources that already exist and learn the guidelines myself. Soon enough, the information became confusing and overwhelming, so I decided to talk with people who know more about this topic than I did. I’ve talked to many people, including six experts in different fields. All of them pointed me in different directions that my thesis could take that signifies how many problems exist in the accessibility field.
People I've talked to:
-
Regine Gilbert, UX Professor at Tandon
-
John Schimmel, VP of Engineering at the Wall Street Journal
-
Lauren Race, a11y Designer at Twitter
-
Anton Kiselev, Javascript developer
-
Marshall Sunnes, Senior A11y Specialist at NYU
-
Luisa Pereira, ITP Professor, Artist & Engineer
Findings
1) The way people navigate through the websites is really diverse in terms of assistive tech they use to do that. Thus, the website has to be adapted to be controlled by a switch, voice, keyboard, joystick, etc. I was advised on the different ways that I could simulate that experience for people who don’t use assistive tech. One example method was to turn off the user's mouse when they enter the website and give them a task to open a particular link using the keyboard.
2) The common theme through all the conversation no matter who I talked to was that not every website needs all accessibility material. When a developer wants to make their site accessible and googles the guidelines, they have to read through all of the accessibility guidelines, even if some of the requirements aren’t applicable to their website (e.g. they don’t use videos). This is because they might be not familiar enough with the guidelines and/or don’t understand them, so they don’t want to miss out on important information. Not applicable to all the developers of course, but it was true for those I’ve talked to.
3) Using assistive tech is confusing when you’ve never had experience with it and/or need to use it. When one codes a website and wants to test out how it sounds when using VoiceOver, for example, they might abandon it very quickly. This tech isn’t familiar or intuitive to the point that some people I talked to have to google how to turn it on every time.
4) I was repeatedly advised to narrow down the problem I want to tackle to either a particular interaction/assistive tech (e.g. voice control) or a really small target group and their need.
Most of these points were following the same idea:
“The guidelines are verbose and there isn’t any explanation about why the guidelines are the way they are”.
Final thesis question
How might gamification improve the understanding of web accessibility and create a more empathetic web designer/developer?
Target audience
I imagined web developers and designers as target users, especially those who were confused about the reasoning behind web accessibility guidelines, thought about them as optional, and/or have always surfed the web with the traditional mouse.
An example of my end-user was the following:
Alex, 28 years old, is a web developer who rents a house with his friend in Sarasota, Florida. Alex has been a web developer for several years and decided to become certified in web accessibility. He prepares for the Certified Professional in Accessibility Core Competencies (CPACC) exam and tries to find courses that use visual learning techniques. He is also used to learning through practice and struggles with purely theoretical information. Alex is worried he won’t feel confident applying the accessibility guidelines in his future projects.
Similar solutions
1) A maze game that was built to simulate the experience and learn some guidelines.
2) A tutorial website by Teach Access that explains guidelines and has coding exercises.
3) A11yphant, a student project that provides playful coding exercises and explanations.
However, each of the existing solutions either allowed to practice code, gave theoretical knowledge, or simulated the barriers that people with disabilities experience online. I aimed to combine all three of these components to encompass learning through experience and practice.
Implementation
My thesis project will be a website that aims to teach developers about accessibility through an interactive course.
The user flow is as follows:
1) At first, people will be given a task to click on a button using the keyboard navigation. They will be provided with concise instructions on what buttons to hit, so they can learn this form of navigation easily in order to get comfortable with it quickly. In the following video user was given a task to click on the card using the keyboard by using Tab key to move and Enter key to choose.
2) Then, once they are comfortable with using the keyboard control, they will be moved to a different site. They will be given the same task - reach the button.
3) However, they wouldn’t be able to do that or it might be extremely difficult for them. This is because the first website would be made with accessibility in mind, while the second one - wouldn’t be. In the following video I failed the task, as I couldn't see where the focus is.
4) After this uncomfortable experience, they hopefully would have this question in mind - “Why doesn't the keyboard work here, but it did before?”. And that’s gonna be explained from the guidelines’ perspective. E.g. “You couldn’t see the keyboard focus because its outline was set to 0 or none. Try adding it now in code, and see if that helps!”. In the following video, I'm changing the outline in code and successfully accomplish the task.