Making Facebook accessible for people who are deaf-blind and visually impaired
From 2013 to 2014, I led the design work and supported development on a Swedish Post and Telecom Authority project that created an accessible web app for using Facebook. It was designed for people who were deaf-blind or visually impaired.
Summary
“Fejjan För Alla” was a web app launched by the Swedish Post and Telecom Authority (PTS) in February 2014 to make Facebook accessible for people with deaf-blindness and visual impairment.
The web app received national news coverage, for example from SVT and Sveriges Radio. It also got strong praise from its users.
Users told us this web app was by far the best and most accessible way to use Facebook. They could now perform tasks they couldn’t do in Facebook’s apps or website.
I met with users with visual impairment, hearing loss, and deaf-blindness. With them, I designed, built, and usability tested a web-based prototype that later became the foundation of the web app.
Note: The web app was taken offline in December 2015 due to new Facebook API restrictions.
Problem: Facebook wasn’t accessible
After extensive user research with the accessibility community in Sweden, PTS learned that Facebook was largely inaccessible for people with visual impairment and deaf-blindness.
At the time, Facebook’s website and apps didn’t work well with screen readers, Braille displays, or other assistive technologies.
Goal: Accessible communication with loved ones
PTS set out to provide an accessible way for people with visual impairment and deaf-blindness to use Facebook.
The core belief was simple: disabilities like these should not prevent anyone from communicating online with family and friends.
Building a web app was the only feasible option
To reach the widest possible audience, we decided to build a web app rather than native iOS or Android apps. The project’s tight budget also made this the only feasible option.
Because HTML works well with screen readers and Braille displays, we were confident a web app would meet all accessibility needs.
The web app would use the Facebook API to replicate essential Facebook features.
Meeting our first deaf-blind user
Two years earlier, I had taken a course in digital accessibility, but no one else on the team had experience in this field. We knew we had much to learn.
With help from Förbundet Sveriges Dövblinda,, we scheduled meetings with a deaf-blind user to understand the challenges of using Facebook and other websites with assistive technologies.
These meetings were both highly educational and deeply inspiring.
Making a prototype using HTML, CSS, and JS
To conduct usability tests with people using assistive technologies, I designed and developed a prototype using HTML, CSS, and JavaScript.
Screen readers like VoiceOver and JAWS interpret HTML well, but they couldn’t read prototypes created in popular design tools at the time, such as InVision or Axure RP.
I followed WCAG and wrote realistic content, including:
- Friend requests and event invitations
- List of friends with profile pages
- Profile posts with comments
- Various types of groups
- Message threads
- Private events
Writing this content took longer than expected, but it was essential for usability testing. Users needed to feel like they were really using Facebook.
Continuously usability testing and prototype improvement
The entire team collaborated closely during usability testing. Our project lead managed the time-consuming task of planning the sessions, while I prepared the tasks and ran the sessions.
Developers took notes during the sessions and assisted participants whenever needed.
We invited four to five people with varying degrees of visual impairment and deaf-blindness to each usability test. During these sessions, they performed tasks such as:
- Writing posts
- RSVP’ing to events
- Commenting on posts
- Sending messages to friends
- Searching for and joining groups
- Accepting and rejecting friend requests
Feedback from each session was used to improve the prototype for the next one, and users were invited back to test the updates.
The users gave us highly constructive feedback. They were respectful but completely unafraid to bluntly point out mistakes.
It was humbling to see how small changes to HTML markup or copy could make or break parts of the design. We had to be precise to avoid wasting time on mistakes.
I learned that great accessibility takes time to get right – and almost no time to screw up.
In total, we held four testing sessions. I also made two home visits to one participant for additional testing, and two other participants provided feedback by answering questions over email.
Final testing in production using real content
Once the team and I were satisfied with the prototype, we built the final web app, reusing the frontend code from the prototype.
We then held one final usability testing session with our group of users, this time allowing them to sign in with their actual Facebook accounts. The session went very well!
Struggling with the Facebook API
The Facebook API wasn’t designed for building a full Facebook experience outside of Facebook, which posed challenges. For some features, we had to get creative.
For example, the API allowed us to retrieve unread messages, but not mark them as read. To work around this, we simply listed the most recent active message threads in descending order.
It wasn’t perfect, but it tested well with our users.
Result and impact
“Fejjan För Alla” launched in February 2014 and received national news coverage, for example from SVT and Sveriges Radio. It also got strong praise from its users.
Users told us this web app was by far the best and most accessible way to use Facebook. They could now perform tasks they couldn’t do in Facebook’s apps or website.
Note: The web app was taken offline in December 2015 due to new Facebook API restrictions.
How it made me feel
Even though I was already familiar with digital accessibility, working with people with varying degrees of visual impairment and deaf-blindness had a profound impact on me.
“Fejjan För Alla” was the most humbling project I’ve ever worked on. Since then, digital accessibility has been a cornerstone of my daily design work and inspired me to start giving talks on the topic.
I realized just how much digital accessibility can affect someone’s quality of life.
/Alexander