Not Accessible Design. Universal Design.
When designers talk about “accessible” design, we tend to think of interfaces for users with disabilities. However, this definition is not only narrow, it also misses the point.
by Sam Vitale Kofman
When designers talk about “accessible” design, we tend to think of interfaces for users with disabilities. However, this definition is not only narrow, it also misses the point. Accessibility refers to the process of making a product usable by as many people as possible. Initiatives like a11y and The World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG) have helped spread awareness over the years. Unfortunately, some people still treat accessibility as an afterthought--a bonus--for users dealing with physical or cognitive limitations. Instead, it should be intrinsic to the discovery, design, and development pipeline from the start. For that reason, here at Promptworks, we promote a “universal” approach to design, which expands the definition of “accessibility” and folds it into our entire product process. In this article, I will be exploring some of the design considerations of this process.
Why Universal Design?
Universal design is preferable to “accessible” design for two dominant reasons. First, it expands the meaning of the term “impairment” to encompass everything from physical and cognitive disabilities to technical limitations, like laggy Internet or rudimentary hardware. Focusing on “accessibility” over “universal design” often leads designers to fixate on stereotypical disabilities, rather than to adopt this more inclusive definition. Secondly, by promoting universal design, one is able to create a product that benefits everyone equally. Take, for instance, the curb cut effect. Curb cuts, or the divots that can be seen at many sidewalk intersections, were originally created shortly after WWII to assist people who use wheelchairs, like veterans. However, curb-cuts make sidewalks more accessible for everyone, whether they’re pushing a stroller or riding a bike.
Who Does Universal Design Serve?
As we now recognize, accessibility isn’t just about helping a small subset of users; it is about making products that are inherently usable to as many people as possible. However, below are some of the user groups that require particular consideration.
Users with Visual Impairments
These users may include people with farsightedness for whom reading may be difficult. It also includes users with color blindness, who may have difficulty distinguishing between red and green hues. The group affected most severely are users who are fully blind and rely on screen readers to use digital products.
Users with Hearing Impairments
Special consideration should be given to users with hearing loss when designing products that include audio, like video libraries. However, this user group should also be viewed more broadly, so as to include users who are working in loud (or quiet) environments and can’t rely on device audio for their information.
Users with Motor Impairments
Some users suffer from physical impairments that prevent them from using a mouse or keyboard; they may instead rely on other input devices that allow them to “tab” through the interactive elements of an interface. In other cases, a user may experience a temporary motor impairment--when holding a baby, for instance, or after breaking an arm.
Users with Cognitive Impairments
This segment includes users suffering from a wide range of conditions: ADHD (Attention Deficit/Hyperactivity Disorder), Autism, Dyslexia, Alzheimer’s, and others. However, it can also include users who do not suffer from a particular condition, but who are experiencing temporary memory loss, fatigue, or difficulty concentrating.
The Internet is called the “world wide web” for a reason; it is accessible all over the globe. For this reason, writers and designers must understand that their users may not all speak the same language. Auto-translate tools can be inaccurate and certain alphabets may not be supported. In rare cases, reading direction may also differ across languages. However, at the end of the day, straight-forward, easy-to-read copy makes for a better overall user experience--not only for non-native speakers, but also for native users of varying reading levels.
Users with Technical Limitations
Finally, when thinking about accessibility, it’s crucial to remember that not everyone has lightning-fast broadband and the latest Macbook Pro. Internet speed, viewport size, browser compatibility, and device hardware are all things that we should consider when designing interfaces and digital experiences.
Starting to think like a Universal Designer
Below, you will find a collection of best practices for incorporating accessibility into your product process from the outset. These are far from exhaustive and more intended to help you start thinking about accessibility more broadly. Notice how these suggestions are not “add-ons,” but foundational design suggestions that improve the user experience for most--if not all--users.
Digital navigation should have three main functions. Most obviously, it should allow users to easily access different parts of a website or application. Primary navigation should bring users to the most important sections, while secondary navigation should link to less-frequented pages or screens. Navigation should also give the user a preview of what the product has to offer. To ensure that this preview is useful, make links descriptive instead of creative. For instance, rather than naming a page that describes your company’s team “The Gang,” name it “Meet Our Team.”
Finally, effective navigation design should remind the user of their location within the site or app. You can accomplish this by highlighting the user’s current location in the primary navigation, using color, font-weight, or underlines. Note that a combination of these techniques may be preferable to accommodate users with different kinds of visual impairments, like color blindness.
On larger sites, breadcrumbs can be used to orient users within the site’s content architecture. They are particularly helpful for users with memory issues, but can benefit everyone, especially on e-commerce sites with hundreds of sub-pages. The example below is taken from electronic retailer, Newegg.
A note about hyperlinks: they should stand out from the body text without relying on a hover state. (Imagine having to hunt through a wall of text just to unearth a link!) The default styling of blue, underlined text remains one of the most recognized design patterns today--and for good reason. It uses two visual cues (also known as “affordances”) to indicate that the text is clickable: a color and an underline.
Additionally, designers should be mindful of the hyperlink copy. Users who rely on screen readers won’t derive much information about the link’s destination from “click here.” Instead, use more descriptive text, like “read the full article.”
Who these help:
- Users with cognitive limitations, like memory loss.
- Users relying on screen readers to determine page structure.
- Users who may be tired, distracted, or stressed and want to find information easily.
No one wants to read an infinitely scrolling page of 12-point Times New Roman, but well-structured copy is particularly important for users with cognitive disabilities. Use headings and indented lists to segment your copy into digestible sections. Not only does this make for a more enticing reading experience, it also makes the content easier to scan for users short on time. Additionally, use white space generously, as it alleviates eye strain. Finally, with the advent of 4k monitors, it can be tempting to let that paragraph run the full width of the screen, but this makes it difficult to retain your reading location. Instead, opt for strings no longer than 66 characters.
Who these help:
- Users with cognitive limitations, like learning disabilities (e.g dyslexia).
- Users relying on screen readers to determine page structure.
- Users who are intimidated by huge walls of text (i.e. everyone).
It’s easy for designers to get enchanted by the diverse selection of beautiful fonts available on the web today, but before you go and import that elegant script, consider your user’s visual abilities--and even their screen resolution. Thin-weighed fonts look sharp and chic on retina displays, but can be blurry and almost invisible on older displays. Contrastingly, fonts with larger counters (the white spaces inside of letters) tend to be the most legible, which is why some have claimed that Heinemann is one of the most readable options on the market today.
Aim for a minimum of 16px for body copy, though 18px is becoming more popular. If you design for this level of legibility from the outset, you can avoid adding easy-to-miss font customization controls. Instead, you’ve managed to create a better experience for all of your users.
Who these help:
- Users with vision impairments.
- Users with low-resolution displays.
- Anyone who doesn’t want to strain their eyes to read digital text.
The most important factor to consider when selecting a color palette is contrast, which describes how much two colors differ from each other. It is relevant not only for users with vision impairments, but also for users viewing your interface on older displays. According to the World Wide Web Consortium, designers should aim to adhere to their AA-level guidelines (at minimum); these suggest a contrast ratio of 4.5:1. Tools like ColorSafe can help designers ensure their color selections meet such requirements.
There are hundreds of websites, books, podcasts, and blogs dedicated to teaching designers how to create accessible products (Accessibility for Everyone by Laura Calbag is a great place to start.) I, by no means, have covered everything about universal design here. This is intended more as a catalyst for reframing how we think about accessibility--not as a bonus feature, but as a critical component of the holistic design process.