Creating Accessible Websites for Everyone

Dates:

Role:

Description:

October 2017

UX Designer, Visual Designer

A google chrome extension that modifies websites to improve accessibility for folks with various disabilities. Built for Dubhacks, a 24 hour hackathon at the University of Washington.

 

The Problem

Folks with disabilities often download multiple web extensions to make websites usable for them. This can include extensions that add alt text to images, change the text (font, size, or color) or enable the use of a screen reader. Having multiple web extensions can be time consuming to set up and become hard to manage.

Research

While looking for a problem to tackle for the hackathon, our team asked a friend who worked with disabled students at the University of Washington (UW) what issues they saw. They brought up that students were downloading multiple google chrome extensions to make websites accessible.

When trying to determine what makes websites accessible, the other designer found simple posters developed by the UK Home Office that highlight different web design dos and donts for specific disabilities.

Using these posters, we created two personas to help guide our feature decisions and UI design.

"Reading online history articles is dumb because the big blocks of text are overwhelming."

Emily Scott
Highschool Student

Dyslexic

Addison Earl

College Student

Blind

Research

While looking for a problem to tackle for the hackathon, our team asked a friend who worked with disabled students at the University of Washington (UW) what issues they saw. They brought up that students were downloading multiple google chrome extensions to make websites accessible.

When trying to determine what makes websites accessible, the other designer found simple posters developed by the UK Home Office that highlight different web design dos and donts for specific disabilities.

poster - designing for users with deafness or who are hard of hearing
poster - designing for users of screen readers
poster - designing for users with low vision
poster - designing for users with dyslexia
poster - designing for users with physical or motor disabilities
poster - designing for users on the autistic spectrum

Using these posters, we created two personas to help guide our feature decisions and UI design.

Ideation

Because our target users already utilize web extensions, we decided to create a google chrome extension. The other designer and I started listing out aspects of websites that we could change and what disability they related to. Our idea was to create different profiles that users could easily select that would align with their general needs. Additional customization would be possible in the settings. The developers then got to work creating an API that utilizes Microsoft Vision and summarized long paragraphs of text.

Simple, non-bright colors

Simple sentences and bullets

Simple, consistent layouts

Alt text

Linear layout

Good contrast and readable fonts

Linear Layout

Large clickable actions

Space around form fields

Subtitles and/or transcripts

Linear, logical layout

Left aligned text and good contrast

Short and simple content

settings high fidelity prototype

High Fidelity

The UI design was limited to the settings page of the extension. We struggled with following all design suggestions to make the page as accessible as possible but also visually appealing.

Visual Design

The color used on the settings page took a long time to settle on. One of our initial ideas was a periwinkle but we decided it didn’t look quite right. Ultimately we settled on an orange. We muted it a bit so it was less bright and we limited the page to three colors.

I created the logo while the other designer focused on front end development. The visual icons for different disability profiles were recreated from the UK Home Office posters using adobe illustrator.

 

The Solution

Users download the app and are able to choose a profile that best fits their needs. Further down the page, they can customize their profile by toggling on and off different changes. We designed this page to be very simple and straightforward.

Changes the google chrome extension implements:

  • Changing the background to white

  • Changing the text to black

  • Changing the text to Verdana

  • Adding more space between lines of text

  • If a paragraph is too long, summarizing it

  • Adding alt text to images without alt text

The API takes large bodies of text and summarizes them by using the first, last, and another important sentence from a paragraph. The API also takes images without alt text and provides alt text for them using the Microsoft Vision API.

 

Currently, the google chrome extension automatically implements all website changes as the settings page is not linked to the extension.

Reflection

I enjoyed the topic of this project, and it was interesting working with developers, as I haven't had much experience working with other disciplines. At the beginning of the project, the other UX designer and I had to convince the rest of our team to start with research and the user, rather than starting with what technology was interesting. This took awhile, but when we showed them the research from the UK Home Office we had found, they started to get excited.

If we had more time, we would have linked the setting page to the extension, so users could pick and choose which changes they need and don't need.

More Projects

  • Instagram
  • LinkedIn
Email Icon
nmc.png