Alexander Skogberg

UX, Web & Design

To content

Facebook for people with deaf-blindness

In 2013, the Swedish Post and Telecom Authority (PTS) set out to make an accessible interpretation of Facebook for people varying degrees of visual impairment and deaf-blindness. I was a member of a small multidisciplinary team in which I designed, developed and usability tested an HTML prototype that was later turned into the final website.

Background

By late 2013, PTS had learnt that Facebook wasn’t accessible for people with varying degrees of visual impairment and deaf-blindness. Neither the company’s websites or apps worked well with screen readers, braille keyboards and other types of accessibility tools.

Goals

PTS set out to create an accessible interpretation of Facebook for people with these types of disabilities. Poor eyesight or hearing shouldn’t stop someone from communicating with their loved ones online.

Design process

Choosing technology
For reaching as many users as possible, the decision was made to develop a website instead of native apps.

This website would use Facebook’s APIs to replicate the Facebook experience on a separate website, where having full control over the design was possible.

Meeting users with deaf-blindness


Apart from me having taken a course in accessibility, the rest of the team had no major experience in accessibility.

Therefore, we set up meetings with a user who had deaf-blindness. The goal was to learn and understand the challenges of using Facebook and browsing the web in general using a screen reader and a braille keyboard.

Developing the HTML prototype


When doing usability testing with people using screen readers and braille keyboard, you must use an HTML prototype. Screen readers read HTML well (as long as it’s well written).

Based on best practises for website accessibility, I developed an HTML prototype with made up Facebook content such as wall posts, friends, groups, events and so on.

Usability testing the HTML prototype

The HTML prototype was then usability tested over several sessions. To each session we invited four to five people with varying degrees of visual impairment and deaf-blindness. They got to perform basic Facebook tasks like writing a post, searching for a group and replying to an event.

The feedback from each session was used to improve the prototype for the next, to which the same participants were invited back.

In total four group sessions were held, but some testing was also done during home visits to one participant and over email conversations with two others.

More testing and launch


Once we were satisfied with the HTML prototype, its code was reused for the final website. With actual Facebook content in place, we conducted one more usability testing session with the participants before launching the website.

Result

Fejjan För Alla was released in February, 2014 and was me with fantastic feedback.

Users we talked to said Fejjan För Alla was the easiest way to use Facebook, by far. Some of them could now do things they couldn’t do before.

In December, 2015 Fejjan För Alla was sadly taken offline due to new API restrictions from Facebook.

Technology

I developed the prototype using HTML, SASS for writing lean and maintainable CSS and jQuery for some simple Javascript interactivity. Much of the code I wrote was reused for the final website.

Much responsive Many CSS Very breakpoint So media query Such HTML Wow