Websites are not a designer’s “personal art space”

My local pizzeria website is an accessibility nightmare!

Note: this article is also published on Bootcamp, a UX Collective publication on Medium, please click here to view it on Medium.

The question that started it all …

In a recent virtual roundtable on Accessibility in Design, an attendee asked the panel of experts a question:

How do you design for accessibility without compromising the overall design, for example, finding that to meet those contrast standards, it might be a more limited color palette?

Inherent in this question was the assumption that “accessible design” is not “good visual design”, which the panelists were quick to call out and to list several examples of “good design” that was also accessible.

The quote that stuck out to me the most from the panelists’ response was when Shalyn Oswald said:

Websites aren’t your personal art space … websites are meant to be accessible to people to use for a function.

Upon hearing this reminder from Shalyn, my mind immediately thought of a website for a local restaurant in Kingston, NY. To me, the website appears to be created as the designer’s “personal art space” at the detriment of being useful and accessible for customers, as well as, potentially being an impediment for the business to make online sales. This second point should be of interest to the restaurant because at a time when many independent restaurants are having to shut down, the website designer for this restaurant is designing in a way that is a disservice to both the restaurant staying afloat as well as to potential customers wanting to order food.

The website in question, and the one I will be focusing on for this case study, is Lola.Pizza .

What is Designing for Accessibility?

The World Health Organization (WHO) defines disability as context dependent.

“Disability is not just a health problem. It is a complex phenomenon, reflecting the interaction between features of a person’s body and features of the society in which he or she lives.”

When designing for accessibility, one must account for the following types of accessibility issues:

  • Visual (e.g., color blindness)
  • Motor/mobility (e.g., wheelchair-user concerns)
  • Auditory (hearing difficulties)
  • Seizures (especially photosensitive epilepsy)
  • Learning/cognitive (e.g., dyslexia)

Furthermore, there are also ability barriers that a designer should also keep in mind:

  • Incidental (e.g., sleep-deprivation)
  • Environmental (e.g., using a mobile device underground)

Checking for Accessibility

Based on the Web Content Accessibility Guidelines (WCAG), I will briefly evaluate some of the most egregious examples of how Lola Pizza’s website violates the current WCAG standards.

Lola Pizza's Home Page covered with issue icons after running it through WAVE tool
What happened when I ran the pizzeria’s homepage through the Web Accessibility Evaluation Tool

Hierarchy & Order

What stands out the most when I arrive at lola.pizza is the fact that there are no page regions or ARIA landmarks. Regions and ARIA landmarks identify significant page areas. Most web pages should have regions defined, particularly for the main content area. When you visit their website’s homepage, there is no header, no footer, no clear navigation, it looks like someone took a bunch of text and images and threw them at the wall to see what sticks.

As a customer coming to this website, I have no idea how to navigate it. There is no clear indication that anything is clickable, there isn’t any visual hierarchy, and there is no clear order in which to navigate the page.

Color & Contrast

The other most obvious issue with the site is the color contrast. According to the World Health Organization (WHO)’s Global Stats on Disability 1.3 billion people are affected by blindness and visual impairment. That works out to be 17% of the world population. 17% of Kingston, NY’s population works out to be about 4000 people — that’s 4000 potential customers that Lola Pizza could be missing out on because of their poorly designed website.

When I ran the home page through a color contrast checker, it identified at least 10 contrast errors, and they were all related to the text that the business would want customers to click on, including:

  • the link to order food
  • the link to view the restaurant menu
  • the restaurant’s contact details: phone number and physical address
Lola Pizza's home page as viewed on the author's cell phone
Three screenshots of the Lola Pizza homepage as it looks on my phone

Scalable Layout

After viewing the website on my computer, I checked it on my phone because more often then not, if I’m going to order food or check out my restaurant options nearby, I’m likely going to be doing so on my phone. The customer experience on lola.pizza’s website was even worse on mobile. Images and text overlapped in such a way that the text was even more unreadable and confusing to look at. Furthermore, because of the screen size of my phone, the name of the restaurant got cut off, and the text wrapped in such a way that it was difficult to understand. Because Lola’s UI does not scale correctly on mobile, it makes it nearly impossible for a customer to use their website as a tool to order food or figure out how to contact the restaurant.

The Bottom Line: Who does this serve?

When it comes down to it, I have to ask the questions: Who does this website serve? What is the function of this website?

Microsoft’s inclusive design team defines accessibility as: the qualities that make an experience open to all.

When taking this into consideration, I find myself grasping for answers. Who does the website serve is unclear to me because when I tested the site on 3 other people I’m currently living with, they all experienced difficulties and confusion using the site. When I try to answer what the function of the website is, my assumption is that the restaurant would want the website to serve as a way for customers to place online orders for pick-up or delivery. If that’s the case, it serves as more of a barrier than a tool to its customers.

While the team at Lola may have had fun designing their website in this way, I encourage them to reconsider the purpose websites serve and use a different canvas for their personal art space that are not their website.

Let’s Skyrocket Your Next Project Together

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Turpis scelerisque purus eu quis lacus, nibh pharetra.