Spring 2021 Sale

Spring into savings with 30% off all pricing plans!

GIVESPRING

The Guide to Web Accessibility for Nonprofits

Is your nonprofit website accessible to everyone? Website accessibility for nonprofits is critical for your fundraising and mission success.

Web accessibility can make or break your nonprofit website.

It’s surprising how many accessibility errors pop up on a number of websites, impacting usability and donations. A potential donor won’t make a contribution if they can’t use your website with ease.

But what does website accessibility really mean? How can you ensure that your design is compliant with current standards?

In this guide, we’ll walk through all the basics of web accessibility so you have a foundation for success. The good news is that many of the things that make a website accessible are also rooted in design best practices.

What is Web Accessibility?

An accessible website is one that is equally usable for all website visitors, including those with physical disabilities or limitations. Accessibility standards ensure that individuals with vision, hearing, speech, cognitive, or other impairments can interact with content with the same user experience as those who do not.

You don’t want someone to visit your website and not be able to function it.

“Accessibility overlaps with other best practices such as mobile web design, device independence, multi-modal interaction, usability, design for older users, and search engine optimization. Case studies show that accessible websites have better search results, reduced maintenance costs, and increased audience reach, among other benefits.”
Web Accessibility Initiative (W3C)

There are several key organizations that have created guidelines, standards, and checklists for website accessibility. Web Content Accessibility Guidelines (WCAG) were initially developed in 2008 and remain the gold standard in terms of accessibility today.

Four Principles of Web Accessibility

WCAG outlines four principles of website accessibility that break this concept down into understandable – and actionable – elements.

  • Perceivable: Information and user interface elements must be presented to users in an understandable way. Considerations include text size, alternatives for live elements (such as recordings), adaptable or simplified layouts, color and contrast for visual elements.
  • Operable: Users must be able to interact with the interface. Considerations include keyboard functionality, timing of elements, limiting flashes in animation, easy of navigation, and use of alternative input operations.
  • Understandable: Information and how the website works should be intuitive. Considerations include readable and understandable language, predictable patterns, as well as help and error notifications.
  • Robust: Content needs to be interpreted by a variety of user agents and assistive technologies. Considerations include parsing, content values, and status messages.

Web accessibility can be graded using a scale:

  • A: Meets minimum accessibility requirements
  • AA: Medium level of accessibility reached
  • AAA: Gold standard of web accessibility

Why Web Accessibility Matters for Nonprofits

Web accessibility is a big deal because not only do you need donors to be able to use your website, but also those who need your services.

An accessible website is an inclusive website. Inclusivity is paramount for nonprofits.

Whether accessibility is required is still a little ambiguous. Courts are still divided over whether the American Disabilities Act applies to online locations. However, that hasn’t stopped it from hitting the courts.

But why leave it to the courts? An unclear law can leave your organization open to litigation, which can be time-consuming and costly. So it’s best to keep your website as accessible as possible.

Here’s the bottom line for nonprofits: To maximize impact, the greatest number of people should be able to reasonably and easily interact with your website. This includes everything from reading content or sharing information to making a donation.

If the design is not accessible, you can lose potential leads and even ostracize the very people your organization may be trying to help.

Web Accessibility Best Practices

It can be a little overwhelming to start digging into all of the website accessibility documentation out there.

Here, we’ll outline some best practices and in the next section are some tools you can use to look up specific guidelines and run checks on your website to ensure that it is usable for all.

bell icon

Like What You're Reading? Subscribe Here!

Newsletter Opt-in

Color Contrast

Ensure contrast between colors and elements: Color contrast is vital for those with vision impairments so that differences in color are easy to see. WCAG uses a color contrast ratio to make understanding this concept easier.

The scale is from 1:1 (unreadable) to 21:1 (ideal readability). A 1:1 ratio would result from using the same color for text and the background. A 21:1 ratio provides the highest level of contrast, such as black text on a light background. WCAG requires a contrast ratio of at least 4.5:1, although this minimum threshold will generate an AA rating, it is considered difficult to read by many people. A better option is to aim for a ratio of 7:1, which generates a AAA rating.

The score for this color combination is 2.75, which is marked as very poor.
If you have a “very poor” score on your color contrasts, you will likely lose some website traffic.
The score of this color combination's contrast is 12.20, which is marked as Super.
When your colors have higher contrast, they are easier to see for more people.

The other consideration with color contrast is to also use a secondary element – such as a text instruction — to convey information. In practice this means don’t just use a green check and red x, to accept or cancel. Also use the words to best convey the information.

Alt Text

Images should include alt text in the markup – there’s a place for alt text with every media item in WordPress – that tells users what is in the image. A photo of a dog, for example, may have alt text that says “dog in a park.”

Image alternative texts are extremely important for website accessibility for nonprofits.
If you are not using alternative text for your photos, those with vision impairments may miss half of your messaging.

Images that are more complex should also include full captions for helping users better understand content.

Audio, Video, and Recordings

Audio, video, and live online broadcasts should include the ability for later playback and transcripts. Provide visual access through in-sync captioning when possible.

Code

Your website needs to be technically sound to be fully accessible. Screen readers and some other assistive technologies can struggle with poorly coded websites.

Functionality

Website functionality should work using a keyboard for all elements as well as work with voice integration systems.

Labels and Inputs

Form fields and user interface elements should have text labels that make interaction and context clear.

Each field on this donation form is labeled with prompts like "first name."

Alerts, notifications, and error messages should help explain functionality to users when something is not right. These messages can tell users when they enter something wrong, such as an improper format for an email address, to help ensure success in form fields.

At the same time, confirmation messages ensure that users know when an action is successful. That’s where your donation confirmation note comes into play.

Amplify your fundraising with a GiveWP Plan

Navigation

Websites should have a skip navigation feature. Further, all navigation elements should be fully supported by keyboard use with a logical tab order. Generally this is from left to right or top to bottom.

Readability

One of the best things you can do with your nonprofit website is provide clear, understandable information in a way that’s easy to read. All content should be easy to hear or see and work equally well on various platforms, including desktop and mobile.

Plain language, proper grammar, and context all contribute to overall website readability, understanding, and accessibility.

Space and Headings

Appropriate use of white space, positioning, and headings in website content is more than a design element, it’s also an accessibility best practice. Using headings – H1 through H6 – with appropriate CSS can actually reduce cognitive load and make the website easier to scan.

Proper H1 organization creates a logical flow for content that helps users process information.

Additionally, grouping related elements and leaving space between unrelated items can further reduce cognitive load.

Tools and Resources for Your Nonprofit Website

How many of these things are you already doing on your nonprofit website?

There are plenty of online tools, checkers, and resources to help you grade where you are and provide recommendations on what more you can do.

WordPress Plugins

The latest versions of the default WordPress theme, anything later than Twenty Seventeen, have a lot of accessibility controls included. In addition, there are some reputable WordPress plugins that you can install to help with accessibility implementation.

An Accessible Website is Better for Everyone

Accessibility can seem overwhelming and complicated, but it doesn’t have to be. Chances are that a lot of the things you might just see as good design, contribute to overall web accessibility.

And then there’s this reality: If your website isn’t accessible to all you could be missing out on key fundraising opportunities or donations.

About the Author

Liked what you read?

We have a lot more where that came from! Join 15,197 subscribers who stay ahead of the pack.

Share this post

Share on facebook
Share on twitter
Share on linkedin

You might also like

Leave a Reply

Your email address will not be published. Required fields are marked *

Like what you're reading?

Subscribe and stay ahead of the curve.

Share on facebook
Share on twitter
Share on linkedin

Choose Your Plan

Get the “” add-on with Recurring Donations, Fee Recovery, Annual Receipts and more for one low price.
 

Pro Plan

normally $499

$349

Annually

Most Popular

Plus Plan

normally $360

$252

Annually

 

Basic Plan

normally $249

$174

Annually