Accessibility: 5 Lessons for a Better Nonprofit Website

Hear this, friends. Almost 5% of Americans are color blind and another 9% have trouble seeing even while wearing glasses. If you’re designing for the web or email, even the smallest understanding of web accessibility can help you raise more money and will definitely make you a better designer.

Now, this is not where I spring a dusty and intimidating list of accessibility guidelines upon you. I’ve got something better.

In early 2014, designer Darin Cavanaugh and myself conducted a study to discover the most serious accessibility problems facing nonprofit websites. How? We ran a series of “Please visit this website and make a gift” usability tests on nine different nonprofit websites. The difference was that all of our participants were visually impaired.

Our six participants ranged from Blackbaud’s own Grace Strother who surfs the web with a screen reader/magnifier to individuals with difficulty seeing blues, reds, and greens (e.g., color blindness).

The results were surprising. We captured a lot of great data. Here are our top five must-know tips to help make your website more accessible for everyone.

#1: Use color for good and not evil

If you’ve done design for any length of time, you’ve heard, “Always use  high contrast colors  for text and background colors.” Whoa, was this true in our testing! Color palettes alone often made entire websites difficult to use for donors with even the slightest of visual impairments. Here are a couple of specific “gotchas” you should know.

Italicized or grey text: The readability of emails, blogs, and forms sank quickly with too much grey text or text in italics. Be careful!

Disappearing hyperlinks: Our color blind participants could often not find hyperlinks without underlines and would literally say, “Are there any hyperlinks on this page?” Ouch!

#2 Page layout matters

A crisp and clear separation of headers, footers, content, navigation, and other visual elements is more than just good design. Page layout can make or break the usability and accessibility of your website. We were taken aback by donation forms which could not be found because:

1. The “Donate now” call to action was buried on the home page or inside navigation
2. The donation page was multiple clicks deep inside nested menus
3. The donation form appeared beneath-the-fold when proceeded by extensive verbiage or other promotional content

Don’t know if your website is in trouble here? Try moving back from your monitor and use the squint test. How to support your organization should be clear from six feet away.

Here’s a great example of an organization doing it right. Check out New Hampshire Association for the Blind:

#3 Avoid too many steps and fields on donation forms

Frank Barry shared great advice on this topic recently and I must concur from our testing. Long forms and unnecessary clicks thwart potential donors and hurt conversions across the board. We saw this issue compounded for individuals with visual impairments, low resolution monitors, and mobile devices.

Don’t know if you are collecting too much? Have someone test drive your donation form on your iPhone while you watch. If it’s painful, start cutting. You can begin with that “Title” field.

Above: Grace Strother testing with her screen reader/magnifier.

#4: Less is more

The cliche is true and designer Raheel is right as always. Visual and information noise can be a killer. Too much text, too many colors, too many options.  Noise often forced our test donors to “learn” websites instead of just using them.  We heard this many times, “Why is there so much going on here?”

How can you excise noise from your site? Don’t try to make your site into all things for all visitors. Instead, your website should target your most important visitors first – your donors. You don’t have to ignore everyone else, but your home page and primary navigation should focus on your supporters’ needs first.

And don’t feel guilty. Evangelizing the value your organization provides also serves your donors. You’re giving them trust that their gift matters.

#5: Get your mobile experience right

What’s the coolest take-away from our study? Interestingly, nonprofits who got their mobile experience right usually got accessibility right without even trying.

Why? Think about it. A responsive website design by definition is a design that works on any device: desktop with mouse, smart phone, tablet, screen reader, head wand, anything. Moreover, the exercise of moving to a responsive design requires careful thought around page layout, streamlining navigation, tightening up content, and other goodness that all your visitors will love, especially the visually impaired.

The groundswell of websites moving to responsive could mean the future just got very bright for accessibility. That’s pretty fantastic.

Do you want more nitty-gritty details on our accessibility study for nonprofits? We did a slick poster that we hung up throughout our product development spaces to help spread the word. You can download our poster below:

ABOUT THE AUTHOR

Brandon Granger

Brandon Granger curates @Design_for_Good and is a Senior Interaction Designer at Blackbaud for Luminate Online, Online Express, MobilePay, and other products. Brandon has been crafting user experiences for the web and mobile apps for nonprofits for 15+ years. He has a passion for user research, usability testing, high-fidelity prototyping, responsive design, mobile design, and web accessibility. Brandon graduated from the University of North Texas with an undergraduate degree in Film Studies. You can follow him at @bkgranger.