No Seriously, Are You Actually Designing for Your Grandmother?
A Few Ways to Empower Yourself as an Accessibility-Conscious Designer
You’ve likely heard the phrase, “Design for your grandmother”(or mother). While attempting to encourage empathy, it actually reinforces condescension designers tend to have towards users — viewing them as poor, incompetent souls who need the obvious spelled out to them. This can result in designing with pity to outright annoyance, rather than empathy.
With that in mind, I encourage you to think about the “grandmother” figure a little deeper. Does she have any physical or cognitive impairments that make certain tasks functionally difficult?
This isn’t to assume that only older users encounter these types of challenges. We develop impairments at all ages and over a period of time. So, it’s important to design in a way that meets people where they are at all stages of their life.
Think beyond “Does this button make sense here?”. Consider all the challenges a user might encounter while navigating to that button. What if the color contrast makes it impossible for colorblind users see important information on the screen? What if they’re completely blind and need robust alt-text throughout the site? Do they have motor impairments that make using a mouse difficult or impossible?
If you’re lucky, your company has an accessibility department or person who can guide and instruct designers. I recently had a conversation with a UX Engineer at Google who told me about the requirements they have to ensure accessibility across international standards and they’re lucky enough to have an army of engineers who know how to meet those standards.
Luckily for the rest of us, there is a huge collection of online resources that can empower designers, video editors, and creators of all kinds to make fully accessible content. I’ve done my best to pare down to the sites I’ve found most useful.
All my suggestions are based on the Web Content Accessibility Guidelines (WCAG) put forth by the World Wide Web Consortium (W3C). Here’s an easy checklist of their guidelines: WCAG 2.0. The W3C rates web content using Level A, AA, and AAA — with A being the minimum level of conformance and AAA being the most compliant.
Got it? Let’s start with text.
Christian Miller wrote a great piece breaking down why we tend to use small body text and the benefits of making text bigger. It’s a great rundown on why you shouldn’t be afraid to make your text heavier and bigger than it is now.
- Quick Tip: Default to a size of 12–14 points/pixels for body text on traditional computer monitors and make sure text can be zoomed to 200% without loss of content or function.
Do this by adding a feature that enables users to resize text (by CSS) based on three or four predetermined options, including 200%.
Beyond size, pay special attention to the style of your text. Having a clear delineation between headlines and body text is crucial for screen readers.
Instead of only increasing the font size of headers, always use the H2 tag so that screen readers will include your headings in the list of headers.
Next up, color.
Statistically speaking about 8% of your users will have some form of colorblindness. It’s important to ensure color isn’t the only indicator of an action. You may have your own aesthetic preferences, but the old standard of underlining hyperlinks is still your best bet.
- Quick Tip: The color contrast between text and background should be at least 4.5:1 to pass Level AA standards and 7:1(super high contrast) to pass Level AAA standards.
Check your color accessibility with the Accessible Colors website. This site gives a simple yes or no if your text and background colors offer a high enough contrast ratio by Level AA standards. ColorSafe takes that one step further and offers text color suggestions for your preferred background color.
Videos and Animation
Keep the previous suggestions in mind and also factor in the timing and appearance of alt-text and captions.
- Quick Tip: Provide captions for videos and alternative text for video-only content. Don’t forget to observe WCA Guidelines for all these texts.
Additionally, consider the intensity of any flash effects. Or better yet, just avoid flashing lights altogether. Flashing effects people differently — whether they have photosensitive epilepsy or not an even a brief amount of flashing can cause a seizure. So if you must use flashing effects, just give fair warning to your audience, regardless of the level of intensity.
Here’s a detailed break-down on how to approach flashing courtesy of GameAccesibilityGuidelines.com.
Perform self-checks
Test your products using the same accessibility tools as your users.
- Quick Tip: Mac computers have the VoiceOver tool that acts as a screen reader and allows users to control the computer with a keyboard. There is also a version of this with Microsoft called Narrator.
Use this tool to test/confirm that your page headings are properly formatted and easy to navigate. During this process, you may notice that your site has an infographic with important information but doesn’t have any alt text. Performing site audits and putting yourself in the position of your users is vital to crafting a fully accessible product.
I used VoiceOver to signup for more information on Nasdaq Product Design’s Mosaiq. I was able to read all the content on the page and successfully navigate to the landing page. Granted, the page is fairly simple with very few links. Someone with more experience with VoiceOver could very well have more insight.
There you have it, a few quick and dirty tips for creating with web accessibility in mind. I’ll leave you with this valuable quote from Elise Roy, lawyer and human rights advocate:
“When we design for disability first, we’ll often stumble upon solutions that are not only inclusive, but are often better than those when we design for the norm.” — Elise Roy
