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) developed an accessible version of Facebook for people with visual impairment and deaf-blindness. I was a member of a multi-disciplinary team and designed, developed and usability tested an HTML prototype 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 website 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 making this happen. Together with a team consisting of a project lead and two full stack developers, we set out to make Facebook as accessible as possible somehow.

Design process

We put together 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 very tight project budget, 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.

Thanks to a collaboration with the volunteer organisation Förbundet Sveriges Dövblinda (FSDB), we were able to 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 an tools.

These meetings were educational and incredibly inspirational, especially for the fullstack developers in our team.

Designing an HTML prototype

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

Based on best practices for website accessibility like WCAG 2.0 , I developed this prototype with lots made-up Facebook content I wrote 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 for real 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 time-consuming task of planning the usability testing sessions, while I put together the questions and was in charge of the testing sessions. Our developers took notes during the session and helped the participants whit whatever was 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
  • Sendings friends messages
  • Searching and joining groups
  • Accepting and 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 humbling 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 detailed 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. Just as expected, it went well.

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 the features we were obligated 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 and feedback

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 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.

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

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.

Technology

I developed the prototype using HTML, Sass for writing CSS and jQuery for writing basic Javascript interactivity like validating a form or posting 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