Saving the world from bad design is one of our passions, and in recent years, we’ve focused on making websites more accessible for everyone. We believe those two pursuits aren’t mutually exclusive.
In fact, we believe we’ve proven it by building one of the most accessible websites in the restaurant industry for Boston’s Pizza. We’re proud that their new site is functional for every user while maintaining its distinct design and playful brand as a go-to sports bar and dining experience.
“We were able to take an established brand with a specific look and feel and not have to create a separate experience for those who might be disabled,” solution designer J.D. Busch said. “We took their brand and interpreted it to make it the same for all.”
As more organizations face lawsuits over web compliance, accessibility is becoming a bigger issue. We’ve viewed it as a responsibility for years; so much so that we don’t just focus on accessibility, we focus on inclusion.
And we do so while creating beautifully designed sites.
“People assume that an extremely accessible site can’t be interesting, but we didn’t accept that,” front-end developer Nicole Oakes said. “To us, it was a challenge.”
So, we did our own research. We used as many accessibility tools as we could find and relentlessly tested Boston’s website during the process. We wanted to ensure it was easy to navigate and enjoyable for any type of user.
“If you don’t think about it from the beginning, it’s an uphill battle,” said Jonny Pacheco, a front-end developer who served as project manager on the site. “Accessibility spans all crafts.”
The groundwork
While redesigning the Boston’s Pizza website, we regularly checked all the ways different people might interact with it – whether they had a long-term disability, such as blindness, or a short-term impairment, like holding a child in one arm while they checked the mobile site.
“A lot of times, people run through an accessibility checklist and say, ‘OK we did it,’ but we actually use the devices that people are going to use to access our website to verify that we’re making the best choices for everyone,” front-end developer Travis Self said.
That started with creating designs for Boston’s Pizza that were extremely clear on any device. We even developed a new color palette with greater contrast to meet the highest level of accessibility. This made it clearer for all users and particularly beneficial for those with certain visual limitations.
The biggest change we made was taking the red from a bright tomato color to a deeper hue. A hue more like marinara sauce.
“Initially, we were under the impression that we might have to live in a drab color space, but we were able to take Boston’s brand colors and make them a little darker,” said Brian Kowalczyk, interactive art director. “We also looked at font size, proportion and scale to make this a more interesting experience.”
Now, all of the style guides we develop for clients include options that are the best for accessibility.
The process
As we built the site for Boston’s Pizza, the front-end team continuously used a slew of auditing tools. One in particular, Siteimprove, flags accessibility issues, points out code discrepancies, and links to accessibility guidelines for additional context.
There was nothing better than testing it ourselves, though.
Every day, we’d use the accessibility features already built into our phones and computers to check how our code worked with them. Primarily, we’d use VoiceOver, Mac’s screen reader. It provides audio descriptions of websites, so people with visual impairments can interact with them.
“It’s usually pretty jarring once you hear the screen reader. It makes you realize really quickly whether a site is a good experience,” Self said. “If you’re trying to build an accessible website and you don’t use a screen reader during your process, then you really don’t have any way of saying you did a good job.”
While using VoiceOver, we navigated through the site using only the tab key. We saw what it’s like for someone using only a keyboard, not a mouse.
If we tried navigating based on audio cues alone and couldn’t tell where we were on the site; we knew we needed to go back to the code and add in more descriptive text specifically for screen readers.
Now, we use this baseline code as a starting place for every project. Now, every website we make is just as accessible as it is beautiful.
“Accessibility has always been a priority at Lifeblue, but the site for Boston’s Pizza was our first test,” Pacheco said. “It served as a catalyst, pushing us to integrate inclusive thinking throughout our entire development process, so we can serve all users no matter how they interact with the web.”
