How to elevate your accessible design
Accessibility — these days it sounds like a buzz word.
That may be true, but it also has become an obligation for designers to think of their designs in the hands of everyone. Because the reality of design is, everyone is our potential audience. We may start our projects with target audiences in mind, but to truly make design accessible, we must make design universal.
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
— Tim Berners-Lee, W3C Director and inventor of the World Wide Web.
Looking up the definition of the word accessibility, it means “easily used or accessed by people with disabilities : adapted for use by people with disabilities.”
But universal design, coined by Ronald Mace, is “the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.”
Designing with universal design in mind does not mean that you have to sacrifice any content/strategies for your product. It means that you adapt your thinking to be inclusive for all users.
Universal design is different from accessible design in that there are not two different solutions; which could create two lesser experiences. There is instead one solution that is ideal for all.
A disability is a “physical, mental, cognitive, or developmental condition that impairs, interferes with, or limits a person’s ability to engage in certain tasks or actions or participate in typical daily activities and interactions.”
Society usually thinks of disabilities as physical, such as wheelchairs and blindness. However, there are other disabilities that don’t “show.” It’s important to be mindful while designing for the wide gamut of disabilities that exist and your users can have.
Below I will go over how to approach design for specific types of disabilities that exist and what inclusive solutions to aim for.
The first visual (I like puns) that people usually have when describing accessible color design is “muddy” or a “less than beautiful” experience. That just isn’t the case at all.
With some simple things to keep in mind, you can create a beautiful experience that is both pleasing visually and accessible.
Color Contrast
The number one culprit for a failed accessible design is color contrast. It can be a really easy thing to forget about or mess up, but with a little practice and mindfulness, it can easily lead your experience towards a more universal path.
The W3C states that the contrast ratio between text and its background should be at least 4.5 to 1 or level AA at minimum.
1 out of 12 men and 1 out of 200 women in the world are color blind. Tritanopia (red/green) is the most common color blindness. Color blindness is important to the issue of color contrast because users that are color blind will have trouble viewing content that is similar in tone. Color blind users will also have a hard time viewing elements that rely on color alone as a way to indicate meaning.
This doesn’t mean that all colors should be contrasting colors only, or colors that are at opposite sides of the color wheel. It simply means to take that care that all pieces of content have sufficient contrast in their respective areas.
How to make color contrast universal:
- Choose high contrast font colors and backgrounds
- Do not rely on color alone to show meaning
- Limit your color choices to help reduce issues
One tool that I really love to help build compliant palettes is Cloudfare’s Color tool. It allows you to mess around with different colors as various elements to give you an insight into how your color palette would perform onsite.
There are also several other online tools and apps out there for checking color contrast. Some that I recommend are:
- WebAIM Contrast Checker — the OG checker that never fails
- Colorable — a minimal checker that fills your screen with color
- Sim Daltonism — a Mac app that allows you to visualize color blindness
Alt (Alternative) Text
Users who are blind or have limited vision may use screen readers to navigate the web. Screen readers convert elements on the pages to speech so that the person can hear the words.
How do users “hear” images?
By utilizing alt text. A not-so magical HTML element that appears in an image box so that when screen readers scan over the image, they will read the text inside to describe to the user what it contains.
When choosing alt text, it’s important that it tells users as much as possible about the image, using as few words as possible. The amount of description you can use is limited by the size of the image area, so be sure to keep that in mind as well.
But I’m a designer, why would I care about alt text?
Performing a usability check with your devs before launch to make sure images are being described in a useful way is part of your job as a designer.
Cognitive disabilities relate to the ease of processing information. Problem solving, attention, math, and memory are just some examples of issues .
Learning Disabilities
According to the Dyslexia Center of Utah, one in five people, or 15–20% of the population, has a language based learning disability. Dyslexia is the most common of the language based learning disabilities.
This is important to note because those who have dyslexia can have trouble with some color combinations (similar to color blindness). Given this, users may opt to use a screen reader to digest content and navigate through your site.
Avoid “Click Here” and Have Clear Communication
Cognitive load is the limit of human brain processing. When users are coming to your experience to perform a task, they need to be able to perform those tasks easily.
If your links or buttons say, “click here,” then users need to establish the context around the link/button and figure out what that link might do. If several links on a page say, “click here,” users have to remember the context of each one. For users with visual impairments, relying on screen readers to navigate a page, it’s important to note that they will not understand the context visually like sighted users would.
As you are writing, also think about the literacy level of your target audience. Avoid using jargon and abbreviations and instead choose to use plain language. There are great tools that can help you determine the reading level of your content if you’re unsure.
Motor disabilities can include paralysis, muscular conditions, and even severe pain associated with movement. Conditions like these make it hard or impossible in some cases for a user to easily use standard inputs like a mouse or a keyboard to navigate.
Focusing on the Keyboard
In the most simple sense keyboard focus is where the browser interprets the users “viewing” location. While I think keyboard focus blends across several use cases, I think it’s most important for users with limited mobility.
When keyboard users are tabbing through the site, it’s important that the content the browser is “focused” on is obvious. This could mean altering the default focus state of the browser to make sense for the given context of the information, i.e. a blue focus outline on a blue background.
Hierarchy Matters
Hierarchy is much more important than just aesthetics. Making sure key information is discernible at a glance and designing with intent allows users to get as much info as quickly as possible.
Users should be able to tab through interactive items in a logical order, usually from left to right and top to bottom. Sometimes a logical order will be obvious to your front dev team, but in more complicated layouts you may need to identify the tab order in your wireframes.
Thumb Zone
While not what we normally think of as a disability, one-handed operation of a mobile device needs to be considered for universal design. Users who are most comfortable with one-hand may have difficulty performing tasks and navigating websites that have actions in difficult-to-reach spots.
Enter the thumb zone.
Steven Hoober, author of Designing for Touch, coined the term for a magical area where user gravitate towards given their holding position of mobile devices. Guess what, user prefer the center of the screen!
That’s not too much of a shock. But it does empower you to audit your mobile experience and take note of experiences that are not universal and respect the thumb zone.
Some other important facts that Hoober points out about touchscreens related to universibility:
- People prefer to view the center of the screen
- Fingers get in the way
- Touch is imprecise
- Touch is inconsistent
Ok, so you’ve designed the most universal design ever known, we designers are done now, right? Wrong.
As designers, we own the product beyond just the visual design portion. We own the whole experience. So it’s the duty of the designer to work together with devs to make sure the structure/design that you’ve built is being replicated in code. Otherwise, it won’t be interacted with the way you intended.
Perhaps there’s educational moments where you can enroll the development team into the goal of the project and why unversibility is so important. It makes it a lot easier to work towards completing the goal if the whole team can get behind it.
Visual
- Choose high contrast font colors and backgrounds
- Do not rely on color alone to show meaning
- Limit your color choices to help reduce issues
- Alt text should tell users as much as possible about the image, using as few words as possible
Cognitive
- Avoid using “Click Here” in links/buttons
- Avoid using jargon and abbreviations and instead choose to use plain language
Motor
- Pay attention to your focus state and see if it makes sense for the given context of the information
- Users should be able to tab through interactive items in a logical order, usually from left to right and top to bottom
- Audit your mobile experience and take note of experiences that are not respecting the thumb zone
Universal design is not a standard rule. It can be hard to implement fully into your current procedures wherever you may be. I get that.
As makers of the internet, we are also the caretakers. The same comfort we give someone entering our home should also be present in our experiences. Making the world more universal will start to show how similar we all really are.
All that I ask is we (myself included) continue to try and reach ideal universibility. It may take some time and a lot of rallying together, but I believe we can get there.
One experience for all, and all for one.