Designing for Accessibility

The ADA (American Disabilities Act) has led to better inclusion in physical spaces and to the creation of the Web Content Accessibility Guidelines (WCAG), supporting inclusion in the digital world and web accessibility for all.

The World Health Organization states about 15% of the world’s population lives with some form of disability, and 2–4% experience significant difficulties in functioning. While over one billion people experience permanent disability in some form, not all disabilities are permanent. Microsoft’s Inclusive Design Toolkit – PDF download outlines 3 disability types:

1. Permanent disabilities — Lifelong physical or neurological disabilities developed genetically, at birth, or acquired due to an accident or other medical condition. (Ex. Brain injuries, Epilepsy, Cerebral Palsy, Cystic Fibrosis, Multiple Sclerosis, Spina Bifida, Prader-Willi Syndrome, etc.)
2. Temporary disabilities - Short-term disabilities due to injury that eventually heal themselves. (Ex. Broken bones, eye injury, laryngitis, etc.)
3. Situational disabilities - Temporary disabilities caused by environmental circumstances that are immediately resolved by alleviating the situation. (Ex. New baby, loud concerts, bright sunlight, darkness, etc.)

Designing with accessibility in mind creates better experiences for everyone. If you open a restaurant with stairs as the only mode of entry, you’re excluding an entire portion of the population that experiences permanent or temporary disabilities and missing out on a lot of potential customers. Including a ramp not only eliminates the barrier to entry for folks with disabilities, but also accommodates for the aging population who may have limited mobility, parents with young children in strollers, and service workers making deliveries.

By applying this mentality to the web, we can start to think of ways to create inclusive user experiences designed for people with a wide range of abilities. The following inclusive design tips can be applied to any digital format including website, digital ad, email, or app design.

Maximize color contrast

Color contrast is the difference in perceived brightness between two colors, expressed as a ratio ranging from 1:1 (white text on a white background) to 21:1 (black text on a white background). Level AA of the WCAG requires a contrast ratio of 3:1 or higher for large text and 4.5:1 or higher for normal text, while Level AAA requires a contrast ratio of 4.5:1 or higher for large text and 7:1 or higher for normal text.

We know black text on a white background has the highest amount of contrast, just like we know white on white has the lowest. The in-between can be tricky, and is easier to determine using contrast checker apps like Contrast for Mac or WebAIM’s online contrast checker tool. Maximizing color contrast creates better interactions for those who experience color blindness and those viewing your content in extremely bright or low light.

Ensure text is readable

Color contrast is a great way to ensure your content is easily readable. Here are a few other ways to increase readability across various screen sizes:

• Body text size should be at least 16px
• Increase the default line height of body text
• Cap text width at 600–800px
• Establish hierarchy with heading styles
• Add white space between headings and body text
• Choose simple, readable fonts for important body text and headings
• Reserve decorative script fonts for accent text not crucial for users to read

Avoid using images of text

Many big box stores resort to using images of text, since it’s often easier and more affordable than custom development. While it’s best practice to use live text whenever possible, sometimes it’s necessary to superimpose text on an image to get something finished quickly.

If it’s necessary to use images of text, here are a few tips to follow:

• Ensure the text is readable on all screen sizes
• Provide optimal color contrast, using a background color behind the text if necessary
• Provide alt text for screen readers and for when your image does not load in the browser
• Avoid including information crucial to key user interactions such as form directions, contact information, etc.

Provide multiple visual cues

A big part of making the web accessible is making your content easy to understand. It’s important to provide multiple visual cues to help people who experience low visual acuity and/or colorblindness to understand your content. A simple example of this could be a bank that wants their online banking “login” button to appear in a different color than all the others, making it easier for employees to tell their customers where to go. While this will help some customers, those with visual impairments will need additional indicators, such as patterns, icons, shape or size.

Takeaways

1. Accessible design is universal – Designing with accessibility in mind creates better experiences for everyone. Stairs are only accessible to those who are able to climb them, while ramps are accessible to all; the same principle applies to the web.
2. Be an advocate – Don’t depend on agencies, web designers or developers to comply with ADA requirements and best practices by default. Take advantage of all the resources out there and learn as much as you can so you can talk to your team about ADA compliance.
3. Iterate fearlessly – The goal is to make your website more accessible than it was yesterday, it doesn’t need to be perfect before you push anything live. Small, consistent changes can make a huge impact over time.

Interested in receiving monthly iBec Creative updates right in your inbox?

Sign up below and we’ll send you updates once a month. Our newsletters are known to contain: exclusive pictures of the iBec crew having fun, TikTok trends to get your creativity flowing, information on B Corp Certification, and so much more! There’s no limit to what you’ll find in an iBec newsletter.