To content

Alexander Skogberg

UX, Web & Writing

Close up of two hands on a Braille keyboard

Facebook for people with deaf-blindness

In 2013, the Swedish Post and Telecom Authority (PTS) decided to make an accessible version of Facebook for people with varying degrees of visual impairment and deaf-blindness. I worked in a small multi-disciplinary team and designed, developed and usability tested an HTML prototype used for the final website Fejjan För Alla.

Background

After extensive user research and talks with the accessibility community in Sweden, PTS had learnt that Facebook didn’t provide any accessible solutions for people with varying degrees of visual impairment and deaf-blindness.

Specifically, neither Facebook’s websites or apps for Android and iOS at the time worked well with screen readers, Braille keyboards and other types of assistive technologies.

Goals

PTS set out to create an accessible version of Facebook for people with these types of disabilities. Their core belief was that poor eyesight or hearing shouldn’t stop someone from communicating with their friends, family and loved ones online.

My former employer HiQ got the assignment to help PTS. Together with a team consisting of a project lead and two full stack developers, we set out to make Facebook as accessible as possible.

Design process

We constructed our design process like this.

Choosing technology

For reaching as many users as possible, we made the decision to develop a responsive website instead of native apps for iOS and Android. With the tight project budget in mind, this was also the only realistic option.

The website would use Facebook’s APIs to replicate the Facebook features and experience outside of Facebook. Since HTML works well with assistive technologies and tools such as screen readers and Braille keyboards, we felt confident providing a great and accessible solution with this choice of technology.

Meeting users with deaf-blindness

Apart from an introductory course in website accessibility I had taken, the rest of the team had no major experience in accessibility. We knew we needed to adress this issue right away.

Therefore, we set up meetings with a user with deaf-blindness. The goal was to learn and understand the challenges of using Facebook and websites in general using different assistive technologies and tools. These meetings were educational and incredibly inspirational.

Developing an HTML prototype

For usability testing with people using assistive technologies and tools, the only option was to develop an HTML prototype since these technologies and tools read HTML well.

Based on best practises for website accessibility, I developed this prototype with made-up Facebook content such as:

  • Wall posts with comments
  • Friends with their own profile pages
  • Different kinds of groups
  • Friend requests and event invitations
  • Message threads with rich history
  • Private events

Writing this realistic and detailed content took more time than expected, but proved to be necessary for the usability testing sessions. We wanted to create the illusion that they were using Facebook through someone else’s account.

Usability testing the HTML prototype

Together with the entire team we usability tested the HTML prototype over several sessions. Our project lead did most of the organising and planning, while I put together the questions and was in charge of the actual testing sessions. Our developers took notes during the session and helped the participants when needed.

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 posts
  • Commenting on posts
  • Sending a friend a message
  • Searching and joining groups
  • Accepting or rejecting friend requests
  • RSVPing to events

The feedback from each testing session was used to improve the prototype for the next round of testing, to which the same participants were invited back. The participants gave fantastic feedback. They were polite, but didn’t hold back at all. If we had screwed up, we got to hear it loud and clear!

It was remarkable (and frightening) to see how even the slightest adjustments to the HTML markup and UX copy could greatly improve (or completely break) the usability and accessibility of the prototype. We learnt the hard way that we needed to be thorough with these details for not wasting valuable time during the testing sessions.

Great accessibility is something that takes a lot of time to get right and almost no time at all to screw up. This is something I learned while working on this project.

In total four group sessions were held, but some testing was also done during two home visits to one participant. Two other participants did more testing at home and answered questions over email.

A user browsing Fejjan För Alla on a laptop using a Braille keyboard.
A user browsing Fejjan För Alla using a Braille keyboard.

More testing before launch

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

Solving the challenge: Working with the Facebook API
The Facebook API wasn't made to create Facebook outside of Facebook. As expected, this became a huge struggle for the developers. For some of features we were obligatred to implement we had to get clever. For example: The API did allow us to retrieve unread messages, but not marking them as read. Hence, we simply listed the latest active message threads. It wasn't perfect, but it was good enough and it tested well. Lots of clever solutions like this were implemented.

Result

Fejjan För Alla was released in February, 2014 and was met 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 even do before.

In December, 2015 it was sadly taken offline due to new API restrictions from Facebook. The needed features would no longer work and couldn’t be done any other way. It was a sad day.

Article on svt.se about the website
Fejjan För Alla made national news in Sweden when it was released. Article in Swedish on svt.se.

How it made me feel

I had taken accessibility seriously before, but working so closely with people with these type of visual and hearing impairments had a profound effect on me. I realised what a huge effect good (and especially bad) design can have on someone’s everyday life.

After this project, great accessibility is always a top priority for me in every project I’m working on. It also made me start giving talks on this topic.

Fejjan För Alla was the most humbling project I’ve ever been apart of.

Technology

I developed the prototype using HTML, Sass for writing CSS and jQuery for writing basic Javascript interactivity like validating a form or posting a comment. Much of the code I wrote was reused by our developers for the final website.

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