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.
Using these posters, we created two personas to help guide our feature decisions and UI design.
Addison Earl
College Student
Blind
Emily Scott
High School Student
Dyslexic
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
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.
