Accessibility drives aesthetics

Paying homage to OXO, Eames, GOV.UK, and more.

Alex Chen
UX Collective

--

Graphic of 4 accessibility icons in a row gradually increasing in contrast over a purple lilac background.

Image descriptions are in the alt text.

There’s an article circulating that claims accessibility and aesthetics are at odds with each other, creating a paradox that forces us to compromise. Here’s why I find that belief completely and utterly false:

That is a false equivalence

The article claims that if we are “too accessible,” we will meet the needs of the minority but end up hurting those of the majority. This creates a false equivalence between having legitimate access needs and having a preference for a certain aesthetic.

Let’s assume two people are looking at a poster to check for movie times. Person A can read it just fine, but Person B can’t read it at all. The words are too small and the colors are too faint to see. So Person B requests a new poster.

The movie theater takes the feedback into account and releases a new poster. Now, both people can read it. But Person A doesn’t think it looks nice.

These needs are simply not the same.

Human beings are not edge cases

The majority-minority mentality itself is a harmful way to divide people. To provide an example of how this plays out in planning, the 80–20 rule suggests that we should focus development efforts on the majority use case that plays out 80% of the time.

Oftentimes, ableist people use this as an excuse to avoid designing for disabled people. That’s not what this rule is actually about. This rule is intended to focus on the most common user goals and scenarios. Take a pet supply online store, for example. If 80% of people want to buy pet food, we can de-prioritize the case where 20% of people want a treat tasting subscription service. But people should be able to buy pet food whether they are Blind, or Deaf, or have cerebral palsy, or have any kind of disability that requires accessibility.

Edge cases refer to scenarios, not humans.

Normal doesn’t mean anything

The article constantly compares people with visual impairments to people with “normal vision.”

Normal is a lazy word. When people say someone is normal, they usually mean able-bodied. Or white. Or cisgender. Or male. Or heterosexual. Normal is an othering tool because it implies marginalized people are abnormal.

In an age where technology is constantly straining our eyes, breaking our posture, and forcing us into sedentary lifestyles, having access needs is normal. When nearly 13% Americans have a disability and nearly 75% use some sort of vision correction, disability is normal (disability source, vision source).

Rather than use the word normal, I find it’s helpful to use specific terms:

  • Blind vs. sighted
  • Deaf vs. hearing
  • Disabled vs. non-disabled
  • Disabled vs. able-bodied

Accessibility doesn’t sacrifice aesthetics

Instead of acting as an inhibitor, accessibility is often a driving factor in aesthetics. You don’t need to sacrifice aesthetics in order to be accessible (and if you think the two concepts are polar opposites of each other, I don’t think you’re trying hard enough).

To prove it, here are some of my favorite examples of beautiful accessible design:

  • OXO Swivel
  • Eames leg splint
  • RX bar packaging
  • Prime Access Consulting
  • Gov.UK design system
  • Cash App

(None of these were paid product endorsements.)

OXO Swivel

Kitchen tools like potato peelers were notoriously difficult to use. Fashioned purely out of thin metal rods, they often hurt to hold, especially for people with arthritis.

(It’s worth noting that this was a health issue that disproportionately affected women, since they were often expected to carry out household labor without complaining.)

Comparison of the old metal peeler (not accessible, not aesthetic) with the new OXO grip peeler (accessible! aesthetic!)

OXO released their Good Grips line in 1990, with the swivel peeler as their flagship product designed specifically for people with arthritis. It’s significantly easier to grip and has a charming, bold look. I personally love the contrast between the chunky black handle and the thin, metal peeler.

Eames leg splint

Disabled veterans were a major reason why accessibility became a top issue in post WWII America. Specifically, medics found the standard metal leg splint actually made injuries worse and needed a better solution, so they went to the Eames designers.

Comparison of the old metal leg splint (not accessible, not aesthetic) with the bent plywood splint (accessible! aesthetic!)

Charles and Ray Eames, arguably the two most famous industrial designers in history, were commissioned to design a light-weight, easily manufacturable leg splint for veterans. They created the splint using bent plywood (their most well-known medium of choice). I find this object really elegant and impressive to look at, and far more friendly than the metal version.

RX Bar packaging

Most packaged foods list the ingredients on the back in fine print, making it difficult and sometimes impossible to read.

(This poses a real issue to folks with allergies and specific dietary needs.)

Comparison of a Lays chips bag (not accessible, not aesthetic) with bold RX bar packaging (accessible! aesthetic!)

RX Bar values transparency in their design by listing all the ingredients in big bold letters. This benefits people with low vision, and ultimately everyone who wants to take a closer look at the ingredients. I find the simplicity of this package design makes a beautiful, bold impact.

Prime Access Consulting and Purple Rock Scissors

Prime Access Consulting (PAC) is a consultancy that specializes in accessibility and inclusion. They do a lot of impressive work, especially for museums, which are historically inaccessible to Blind folks.

(When we think about visually accessible design it’s important to consider that Black and Indigenous people have higher rates of visual impairment, so this is as much a race issue as a disability issue. source)

PAC has created braille labels and audio recordings for Cooper Hewitt, a bold new website for the Field Museum and MCA Chicago with high contrast and large touch targets, and an image description management system called the Coyote Project.

Purple Rock Scissors is an independent strategic creative agency. They specialize in a holistic approach including UX design, content, business strategy, and agile tech.

Compare the Louvre’s site with that of the Field Museum’s, which Purple Rock Scissors redesigned while also consulting Sina, the founder of PAC.

Comparison of the Louvre website (not accessible, not aesthetic) with the Field Museum website (accessible! aesthetic!)
Louvre museum website screenshot
Field museum website screenshot

The visual clutter on the Louvre’s site is distracting and makes it difficult to look for and focus on what you want to do. In comparison, the clean aesthetic of the Field Museum’s site — with big bold text, helpful visuals, and clear call to actions — is more accessible and better looking. Purple Rock Scissors has an awesome case study about this project.

GOV.UK Design System

Government agencies are required to meet rigorous accessibility standards (as they should, they serve the people). But I think anyone who has used a government institution’s website can relate to these sites being difficult to use. Often stuck in the 90’s, they typically have small font sizes, overly dense text, and are not responsive on mobile.

Compare, for example, the San Francisco Department of Public Health’s website with that of GOV.UK.

Comparison of the SF Public Health site (not accessible, not aesthetic) with the Gov.UK site (accessible! aesthetic!)
San Francisco Department of Public Health website screenshot
Gov.UK website screenshot

What a big difference. Not only was the SF website full of clutter but I swear it took about 10 seconds to fully load all the images (on my Google chrome browser). In comparison the GOV.UK site places all the essential information front and center and took about 1 second to load. I find their high contrast, simple writing, and clear status messages really supportive and highly aesthetic.

Related to the UK design system is Adam Silver’s website. Adam is currently a designer for the UK ministry and also writes a blog about creating accessible UI. His site is intentionally very clean, with large font sizes and clever use of white space. I think it creates a really pleasant look overall.

Adam Silver website screenshot

Cash App

I use Venmo, Paypal, Chase Pay, and Cash App to send money to people. In my experience, most of these apps have several distracting elements on the screen. Especially on Venmo and Chase Pay, I have to navigate through several options before I find what I need. (And Venmo keeps showing me other people’s transactions? Why?)

Comparison of the Venmo app(not accessible, not aesthetic) with the Cash app (aesthetic! sort of accessible)

In my opinion, Cash App is the most intuitive. When you open it, you can immediately request or pay money without having to navigate to another page. Its simple interface creates a playful and minimalist look.

Update: Cash App is definitely aesthetic and almost accessible! The color contrast runs just shy of passing WCAG compliance. Here’s a comparison chart showing what the app would look like at AA large, AA, and AAA. Thanks to the very observant reader for that catch.

Comparison chart of Cash App: 1) original at 2.71, fail, 2) AA large pass at 3.05, 3) AA pass at 4.55, 4) AAA pass at 7.08

And many more

I shared some of the most notable examples of beautiful accessible design that come to mind, though I want to point out that there are many more examples out there that I didn’t mention.

If any come to mind that you want to share, comment or tweet at me @thetuttingtutor.

Accessibility is an opportunity, not a burden

Of course disability rights is about disabled people.

It’s also about women. And race. And class. Every social issue is also a disability issue. This means accessibility is not just a matter of compliance, it’s a means of working toward restorative justice.

When we talk about accessibility, we have to talk about systemic barriers as well. It is completely legal for employers to pay disabled people below minimum wage (source). The state can take away benefits when they get married (source). The healthcare industry charges them exorbitant prices for medical care (see the price of insulin) and mobility aids (see the price of wheelchairs).

When we pit aesthetics and accessibility against each other, we are complacent in the systems that create barriers for disabled people. When we prioritize aesthetics over accessibility — as subjective as that judgment may be — we actively oppress disabled people further.

However…

When we declutter our designs to focus on the essentials, we create minimalist interfaces that are accessible for people with cognitive disabilities. And aesthetic.

When we design objects to be ergonomic and naturally form with our bodies, we create products that are accessible to physically disabled people. And aesthetic.

When we up the contrast, increase the font size, and choose a clear typeface, we become accessible to people with low vision. And aesthetic.

Accessibility drives aesthetics because the ability to use something is beautiful.

12–02–2019: Made correction that Purple Rock Scissors redesigned the Field Museum website, not PAC. Apologies for the misinformation.

If you like my work, you can support me on ko-fi.

--

--

UX designer and writer with a focus on usability and accessibility. 🌈♿🕺 My pronouns are they/them.