Route Map Accessibility

Front End Javascript Accessibility

I worked closely with the UX and accessibility team at one of the major US carriers to build a route map that could be used by both keyboard and sighted users. We conducted two week sprints to ideate, improve, and build new features. I was the main developer on this project and built the majority of the code from inception to production.

Problem

At the time, if a customer wanted to look at a route map they were required to download a set of PDF documents. This method was not interactive or accessible for our users. To comply with DOT regulations and to provide a better experience, it was decided that a new way of displaying our routes was needed.

United route Map

Considerations

Accessibility

The number one priority for this project was to make the map so all users were able to use it. It was extremely important to us that the functionality be the same no matter how you were using your computer.

Interactive

We wanted to give new life to the PDF's that were currently on the site. Having a page that people can discover new destinations with was needed in order to showcase the network of the airline.

Design

The design needed to meet both accessibility standards and be easy for users to navigate

United list

Navigation

Maps are historically difficult to navigate with a keyboard. Our team came up with the idea for overlaying a dock that could be hidden or displayed where all users could quickly navigate through a list of all possible destinations from their origin city.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

- Tim Berners Lee

Outcome

After working hard with our team, we were able to push the new product into production in team of our tight deadline. On the first day, the page received thousands of users and continues to be utilized by thousands of people across the globe daily.