Thisis-landing

This is your Com­put­er Talking

A one-page screen­read­er intro­duc­to­ry tuto­r­i­al for web design­ers that builds empa­thy by expe­ri­en­tial learning.





Project Sum­ma­ry

This self-ini­ti­at­ed web expe­ri­ence was writ­ten and designed to intro­duce oth­er design­ers to screen­read­er tech­nol­o­gy. Cre­at­ed in 2019 as a cap­stone project, the site is a tuto­r­i­al on how to use screen­read­er tech­nol­o­gy for sight-abled people.

This is your computer talking Slide 2

Cru­cial Audience

Design school cur­ricu­lums teach lit­tle about acces­si­bil­i­ty in design or tech­nol­o­gy. I cre­at­ed this project to be my first intro­duc­tion to the tech­nol­o­gy and the unique design oppor­tu­ni­ties offered by screen­read­ers. My goal was to share this tech­nol­o­gy with my peers and fel­low design­ers while learn­ing as about it myself. Then, to make oth­er design­ers aware by expos­ing them to acces­si­bil­i­ty technologies.

Self-ini­ti­at­ed Exploration

I wrote, designed, and devel­oped this project. It was a one per­son team, though with feed­back and input from the entire class.

A pri­ma­ry lim­it­ing fac­tor was that devel­op­ing this project was high­ly ambi­tious for some­one who only start­ed to learn to code in the same semes­ter. As a result, there was a sub­stan­tial knowl­edge thresh­old that result­ed in some process hangups.

This is your computer talking slide 3

User Expe­ri­ence Research

The first thing I did was open the screen­read­er already installed on my lap­top. Every Mac­Book comes with VoiceOver pre-installed, all I need­ed to do was open it from my utilities. 

I encour­age any­one to open VoiceOver at least once, even if just out of curios­i­ty. It is a very hum­bling and empa­thy-build­ing experience. 

When open­ing voiceover for the first time, there is a high­ly detailed and elo­quent tuto­r­i­al that is easy to fol­low. By first div­ing in with this step, I gath­ered infor­ma­tion on what I would be design­ing for.

New Con­cepts Learned

The next thing I did was research online the var­i­ous ways to acco­mo­date for screen­read­ers while design­ing for the web. The list of new con­cepts was stun­ning: seman­tic HTML and the impor­tance of head­ers, lin­ear­i­ty of infor­ma­tion, alt text on images, and key­board inter­ac­tions. The list goes on. 

Writ­ing the Experience

When I final­ly start­ed to write the expe­ri­ence, I iden­ti­fied the pri­ma­ry objec­tive to be empa­thy-build­ing. So I wrote this expe­ri­ence to only be acces­si­ble by screen­read­er, the exact oppo­site of the sta­tus quo. This way, sight­ed users could iden­ti­fy inac­ces­si­bil­i­ty from the get go.

This is your computer talking slide 5

Design & Development

In what came to be my usu­al process, I designed and devel­oped the site at the same time in the brows­er. The over­all design of the site is rel­a­tive to the ini­tial empa­thy-build­ing mis­sion. Where there are inter­est­ing and var­ied loop­ing gifs, each one has a blurred lay­er above it, ren­der­ing the visu­al con­tent inaccessible. 

There is lit­tle text on the page aside from the ini­tial tuto­r­i­al on how to turn on VoiceOver. The tuto­r­i­al clos­es with the request to turn your screen bright­ness all the way down, to the point where the screen goes dark. 

After this point, all that is left for the sight­ed user is ghost­ly lay­ers of blur­ry images float­ing by. 

In devel­op­ing this site, I imple­ment­ed sev­er­al web design trends for the first time: par­al­lax scrolling, scroll-snap, loop­ing videos or gifs, styled inline ele­ments, and embed­ded con­tent that can only be viewed by screenreader.

Awk­ward Reception

Upon the first few rounds of feed­back, my peers and instruc­tors were sur­prised by the lack of visu­al design on the web page. This was under­stand­able, giv­en the expec­ta­tions in a graph­ic design under­grad­u­ate pro­gram. On a pure­ly visu­al lev­el, this site was con­sid­ered aes­thet­i­cal­ly pleas­ing, but void of content. 

But by fol­low­ing the tuto­r­i­al and learn­ing to use voiceover for the first time, users found the con­tent of the page to be made acces­si­ble only through this tech­nol­o­gy. This was the real kick­er, as a room full of sight­ed design­ers and web users had a tru­ly empa­thy-build­ing experience.

End Results

In the end, the expe­ri­ence cre­at­ed led to a whole room full of design­ers learn­ing about acces­si­bil­i­ty tech­nolo­gies — some for the first time ever. This was a huge achieve­ment, and led to many more acces­si­bil­i­ty-focused design inquiries in the pro­gram after I graduated.

Suc­cess­ful­ly Build­ing Empathy

In many ways, I con­sid­er my ini­tial goal of cre­at­ing an empa­thy-build­ing expe­ri­ence achieved. There was no way to pre­dict how my graph­ic design peers and instruc­tors would react to a final project that lacked much graph­ic design at all, but I was glad to see that it had an impact regardless. 

Lessons Learned

Of the many lessons learned, I dis­cov­ered a whole indus­try ded­i­cat­ed to mak­ing the web more acces­si­ble. This was the most encour­ag­ing part of this project, and from that point on to today, I make acces­si­bil­i­ty and essen­tial start­ing point for every project and a point of advo­ca­cy in my every­day pro­fes­sion­al life.