Transfort – City of Fort Collins

The City of Fort Collins partnered with CodeGeek to design a new accessible website for their bus transportation system.

The Transfort system consists of over 20 fixed bus routes serving tens of thousands of riders every month, and their website gets approximately 171,000 visitors and 1M page views per year.

The challenge

Transfort needed to rebuild their website to be compliant with the new Colorado accessibility law that went into effect July 1, 2024.

By nature, transportation routes are complex. Marking up all the tabular data to be accessible by a screen reader and navigable via keyboard, while also making route tables highly usable on mobile devices, was a unique challenge.

With that in mind, the City of Fort Collins partnered with CodeGeek to build them a site that (we hope) is the best and most accessible transportation site in the country.

Front view of Transfort Max bus with overlay text that says, "Eco-friendly. Cost-effective. City-wide transportation."

How do you turn data as complex as a city’s bus routes into a website that’s accessible to an entire community?

Transfort website screenshots showing bus and route accessibility information and the Dial-A-Ride Address lookup functionality.

The solution

Our team began by gathering a ton of information from the Transfort team and soliciting outside reviews so we could understand common pain points when using a transportation website.

Then we applied our expertise in web accessibility, user experience, visual design and web development to thoroughly think through website functionality and implementation approaches.

We tested. We iterated. And then we tested some more.

Tablet and phone screenshots of the Transfort website Max bus route schedule and route map.

The results

The result is one of the most usable transportation websites in the country.

To make sure route content remains fully accessible, we built carefully crafted route pages with HTML structure that meets the WCAG 2.2 AA standards required by the ADA.

The tables also feature “earlier,” ” now” and “later” buttons — and depending on the width of a user’s browser, the selected table will automatically scroll to exactly what they want to see.

Visit client site

Let's find your web solution together.

-> Contact us to discuss how we can help with your project.