This is your Computer Talking
A one-page screenreader introductory tutorial for web designers that builds empathy by experiential learning.
Project Summary
This self-initiated web experience was written and designed to introduce other designers to screenreader technology. Created in 2019 as a capstone project, the site is a tutorial on how to use screenreader technology for sight-abled people.
Crucial Audience
Design school curriculums teach little about accessibility in design or technology. I created this project to be my first introduction to the technology and the unique design opportunities offered by screenreaders. My goal was to share this technology with my peers and fellow designers while learning as about it myself. Then, to make other designers aware by exposing them to accessibility technologies.
Self-initiated Exploration
I wrote, designed, and developed this project. It was a one person team, though with feedback and input from the entire class.
A primary limiting factor was that developing this project was highly ambitious for someone who only started to learn to code in the same semester. As a result, there was a substantial knowledge threshold that resulted in some process hangups.
User Experience Research
The first thing I did was open the screenreader already installed on my laptop. Every MacBook comes with VoiceOver pre-installed, all I needed to do was open it from my utilities.
I encourage anyone to open VoiceOver at least once, even if just out of curiosity. It is a very humbling and empathy-building experience.
When opening voiceover for the first time, there is a highly detailed and eloquent tutorial that is easy to follow. By first diving in with this step, I gathered information on what I would be designing for.
New Concepts Learned
The next thing I did was research online the various ways to accomodate for screenreaders while designing for the web. The list of new concepts was stunning: semantic HTML and the importance of headers, linearity of information, alt text on images, and keyboard interactions. The list goes on.
Writing the Experience
When I finally started to write the experience, I identified the primary objective to be empathy-building. So I wrote this experience to only be accessible by screenreader, the exact opposite of the status quo. This way, sighted users could identify inaccessibility from the get go.
Design & Development
In what came to be my usual process, I designed and developed the site at the same time in the browser. The overall design of the site is relative to the initial empathy-building mission. Where there are interesting and varied looping gifs, each one has a blurred layer above it, rendering the visual content inaccessible.
There is little text on the page aside from the initial tutorial on how to turn on VoiceOver. The tutorial closes with the request to turn your screen brightness all the way down, to the point where the screen goes dark.
After this point, all that is left for the sighted user is ghostly layers of blurry images floating by.
In developing this site, I implemented several web design trends for the first time: parallax scrolling, scroll-snap, looping videos or gifs, styled inline elements, and embedded content that can only be viewed by screenreader.
Awkward Reception
Upon the first few rounds of feedback, my peers and instructors were surprised by the lack of visual design on the web page. This was understandable, given the expectations in a graphic design undergraduate program. On a purely visual level, this site was considered aesthetically pleasing, but void of content.
But by following the tutorial and learning to use voiceover for the first time, users found the content of the page to be made accessible only through this technology. This was the real kicker, as a room full of sighted designers and web users had a truly empathy-building experience.
End Results
In the end, the experience created led to a whole room full of designers learning about accessibility technologies — some for the first time ever. This was a huge achievement, and led to many more accessibility-focused design inquiries in the program after I graduated.
Successfully Building Empathy
In many ways, I consider my initial goal of creating an empathy-building experience achieved. There was no way to predict how my graphic design peers and instructors would react to a final project that lacked much graphic design at all, but I was glad to see that it had an impact regardless.
Lessons Learned
Of the many lessons learned, I discovered a whole industry dedicated to making the web more accessible. This was the most encouraging part of this project, and from that point on to today, I make accessibility and essential starting point for every project and a point of advocacy in my everyday professional life.