Accessible Map

After working with Marlene Zentz and Aaron Page at UMOnline for nearly four years, I try to keep accessible design in mind for everything I do. The first project I was assigned after moving the University Center was to redesign the UC website. One of the University Center’s ongoing efforts has been to increase the visibility and understanding of our services and meeting spaces, so I thought an interactive floor plan would make a great addition to the site. It could allow prospective students and customers see what we have to offer, and help them find what they’re looking for once they’re here. It was important that it be created accessibly because I wanted to ensure that absolutely anyone could access, use, and benefit from it.

When it was all said and done, it wasn’t overly difficult to make the floor plan as accessible as I possibly could, thanks to the resources available to me at the University. Having said that, I’m glad I took the time.

For UM techies

The floor plan is based off an open-source project by Codrops (linked below) and while it is useful for wayfinding, it also doubles as a directory of sorts. Each business/office on the map has the hours, room number(s), phone number, URLs (where applicable), and brief description. I worked with Dan Bowling, Nick Shontz, and Eric Seyden to get the hours from the UMontana app pulled into the floor plan to ensure that they’re always as up-to-date as possible.

Codrops provided a good, accessible foundation for me to work off of. For example, they included the option to search for locations in a list instead of having to see the pins on the map to navigate the locations. Aaron Page then provided a number of great suggestions that helped make things even more user friendly; including having more descriptive, less generic alt-tags. Dan Bowling also had some suggestions for making dynamic content like the hours from the app more screen-reader friendly by adding some ARIA tags that announced changes to the content on the page. Some additional accommodations had to be made, but I’ve found universal design ends up making the product better for everyone. For example, in order to embed the floor plan in Cascade I had to use an iFrame (which isn’t ideal), but including a link to a full-screen version made it easier for users with low vision to see map, and easier for screen reader users to navigate it.

When it was all said and done, it wasn’t overly difficult to make the floor plan as accessible as I possibly could, thanks to the resources available to me at the University. Having said that, I’m glad I took the time. Unfortunately, I don’t have the time/resources to develop interactive floor plans for other buildings on campus, but if anyone is interested in trying to create their own, I’m happy to provide all of my source code (attached), links to the original source code from Codrops, explain my process, and answer any questions I can. You will need a good working-knowledge of HTML, CSS, JavaScript, and Adobe Illustrator.

John A. Venters | Marketing & Web Manager | UC Marketing Group | University Center