Skip to Main Content

How to Create an Accessible Donor Experience Online

17 min read
May 25, 2022
Alex Huntsberger
A man uses his right hand to type into a keyboard while his left hand hovers over a screen reader device.

According to the Center for Disease Control’s Morbidity and Mortality Weekly Report, one in four U.S. adults have a disability. That’s 25% of the adult population. When thinking about the online donor experience that visitors will have with your nonprofit, making your website and content accessible to people with disabilities needs to be a top priority. 

Creating an accessible donor experience on your nonprofit’s website means removing potential barriers that a person with disabilities might encounter when engaging with your nonprofit’s services, communications, or events. It means inviting all persons to engage with your nonprofit’s mission. 

Here are the guidelines and tools you will need to create an accessible website for your donors.

Follow the Web Content Accessibility Guidelines

You can find the standards for creating an accessible website in the Web Content Accessibility Guidelines (WCAG) published by the World Wide Web Consortium (W3C). Founded in 1994, the W3C is a group of member organizations that develops and publishes international standards for the internet. The current version of the WCAG is 2.1, which became a W3C Recommendation in 2018 and added an additional 17 criteria to version 2.0. 

According to these guidelines, all web content should follow the following four principles of accessibility:

  • Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
  • Operable: User interface components and navigation must be operable.
  • Understandable: Information and the operation of user interface must be understandable.
  • Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

This post covers the basic best practices for website accessibility according to the four principles. For all website accessibility standards, consult the WGAC 2.1.

Structure Your Website to be Predictable and Easy to Navigate

Disaster survivors need goods like non-perishable food, clothing, blankets and water. It can be tempting to focus your disaster relief fundraising efforts on collecting and/or purchasing When a person visits your nonprofit’s website—whether it’s to learn about your organization’s history, your programs and events, or to make a donation—they should be able to easily move from section to section and from page to page. Standardizing your navigation features and your page layouts will help people use your website and learn more about your nonprofit.

Use Consistent Navigation Features

Navigation features like a search bar or a slider should always be located at the same spot on every page of your site. If some pages have a search bar at the top while others have a search bar at the bottom, users with impaired sight will have a difficult time locating these features. If there is a user interface like a dropdown menu that lists different sections of your site, the interface should be available on all your pages in the same spot (usually at the top). Sub-menus that expand when a user hovers over a menu item is a great way to allow for easy navigation while keeping the order of items consistent. 

Use Clear Page Titles and Headings

All pages on your website should come with a title that clearly states the content contained therein. Any subsections within the page content should come with clear subheadings that descriptively cover the subject of that section. These features will be especially useful to users with assistive technologies like screen readers (more on screen readers below). 

Your page title should be consistent with any navigation features like menus. For instance, a link on a humane society’s website that reads “Adopt a Dog” shouldn’t take you to a page titled “Adopt an Animal” that includes all animals up for adoption. 

For a good example of consistent headings, you can take a look at this very blog post! This page has a clear descriptive title (How to Create an Accessible Donor Experience Online), subheadings that describe what’s contained therein (Structure Your Website to be Predictable and Easy to Navigate), and even sub-subheadings that break info down further (Use Clear Page Titles and Subheadings). 

Employ Multiple Ways to Find Content

Users should be able to find information on your website using the method that works best for them. That’s why you should have multiple ways available to navigate on your website available to donors. If the only way to find information on your site is through your top navigation menu, this will disadvantage certain users. Instead, have a navigation menu and a search bar easily available on all pages. You can also provide links to related content on a given page and a site map that lists out your entire structure and individual pages.

Make Your Donation Form Easy to Find

Make it easy for donors to give to your nonprofit! Include a large button on the top of each page—possibly as a part of your navigation menu—that states, in clear language, “Make a Donation Now” or something to that effect. That button should take users directly to the first section of your donation form. You should make the button brightly colored and easy to spot—but keep reading for more info on how to use colors in an accessible way.

Make Your Website Accessible to Screen Readers

Users who have impaired sight will often use a screen reader to access your nonprofit’s website. A screen reader is a piece of software that interacts with other applications on a device and translates text into synthesized speech or braille for the end user. The user controls their screen reader using their keyboard. The American Foundation for the Blind has a list of existing screen reader programs

Screen readers work by interpreting the structure contained in your site’s HTML for the end user. HTML stands for HyperText Markup Language, and it’s the standard markup language that is used for structuring a website. Here some accessibility best practices for formatting your website’s HTML and making it screen reader-friendly.

Use HTML Tags Correctly

A web page without HTML tags is just a text document; the HTML tags provide meaning and structure to that text content. They’re what separate headings from paragraphs from tables from hyperlinks, etc. 

A tag consists of the tag name surrounded by angle brackets (<>) and will generally have a corresponding “closing tag” after the content, which is the same as the starting tag but with a forward slash, e.g. <tagname> Content </tagname>.

Examples of common HTML Tags include:

  • < p > – Paragraph
  • < h1 > to < h6 > – Headings
  • < a > – Hyperlink
  • < table > – Table
  • < br > – Line break
  • < strong > or < b > – Bold
  • < em > – Italics
  • < blockquote > – Blockquote

Most website providers will automatically add tags via the Content Management System (CMS). When you bold a word or phrase, for example, the CMS automatically adds the < b > and < /b > tags around it. 

You should also make sure to structure your headings correctly. Always use < h1 > tag for the page’s central topic, then use < h2 > for any subsections, and < h3 > for any sub-subsections, etc. Logically ordering headings will help the screen reader to present a meaningful structure to the user, aiding in the navigation and understanding of your content.. 

Tag Cleaning Tip: When copying and pasting content from rich text editors like Microsoft Word, there are formatting tags that can become copied into your website code. Many systems will remove these, but, whenever possible, it’s good to do a clean copy and paste (without formatting) into your website’s CMS and add the formatting (headings, bold, italics, hyperlinks) from there. Text can generally be pasted without formatting by using the SHIFT key during copy/paste (for example, ctrl/cmd+shift+v) or by choosing “unformatted paste” or “paste without formatting” from the system.

For more information on tags and screen reader accessibility, check out this blog post from Hubspot. You can find a full list of HTML tags courtesy of W3Schools.

Include Alt Text for All Images

When designing a nonprofit website, it’s a good idea to use images, as they will help convey your nonprofits story and impact to donors. But screen readers cannot translate images, they can only translate text. So if you want a donor with a screen reader to experience the power or understand the context of a given image, you’ll need to provide them with a description.

This is where alt text comes in. Alt text is an HTML feature that lets you embed a description of an image within its HTML code. Take the picture below:

The alt text for this image could be alt=“Dog with flower in mouth.” Or, we could even get more descriptive and include alt text like alt=“Golden retriever holding a pink and purple flower in its mouth.” Alt text should be to the point, but it should still convey the image at hand. If that requires a few extra words beyond the bare minimum, use them. There are no character limits for alt text, the decision on word count is up to you.That alt text would be included in the image’s HTML code like so:

< img src="dog_flower.file" alt="Dog with flower in mouth" width="1362" height="1133" >

While you don’t want to go overboard with your alt text, including it for every single image on your site will vastly improve the experience for sight-impaired donors. 

Make Your Website and Donation Forms Navigable by Keyboard

People with low vision or other visual impairments often cannot use a mouse or cursor. They navigate websites purely using their keyboard. In order to make your nonprofit’s website accessible to these users, it needs to be navigable by keyboard.

When navigating a website by keyboard, a focus indicator will highlight the element that’s currently selected. The user typically presses the TAB key to move the focus indicator between structural elements and sections of your web page.

Make sure that the code on your webpage is dictating a legible structure. In the previous section, we discussed the tags that structure your HTML. This is one type of code that you should focus on. We discussed heading tags, which go from < h1 > to < h6 >; ensuring that all the heading on your site have the proper heading tag attached will allow someone using a keyboard to easily navigate your pages.

You can run an easy accessibility test on your current site by going to your webpages and using the Tab button. Every press of the button should highlight a new section of the page. Make sure that you also check out your donation pages and forms. If a donor is able to navigate to your donation page but then cannot use the TAB key to complete a donation once they’re there, you’re missing out. 

WebAIM has more information on keyboard accessibility, including a full list of keyboard tests you can run to check your site’s current accessibility.  All Neon One products – including websites, CRMs, and donation forms – are automatically keyboard accessible.

Include Video Captions and Audio Transcripts

Video content is a fantastic way to engage donors and tell your nonprofit’s story. To make your videos accessible for the deaf and hard-of-hearing, you should include captions.  

While many video programs have their own built-in tools to create captions, all of these tools follow the same basic steps. First, the tool will play the video and automatically generate captions. These captions will probably have some (or many) errors. Next, you’ll edit the captions to make sure they’re correct. 

Once the captions are ready, you’ll download them into a caption file. This file includes the captions themselves as well as bits of code that help ensure they display at the correct time in your video. Unless you really know what you’re doing, do not edit the caption file

When you upload your video into your streaming provider, you will also upload the caption file. That will allow the system to display your captions every time your video plays.

If you don’t have a captioning tool in your video program there are free captioning services available online. The University of Washington has a helpful list of free captioning providers that also comes with some handy additional tips and guides. 

While all your videos on all your channels should have captions, social media is one channel where a lack of captions could drastically impact your engagement. You can learn why in our blog post, Nonprofit Video Tips for Busy Fundraisers.

If your nonprofit has any audio-only content, like a podcast or an interview, you should provide a transcript. If the audio is shared in a video format, captions should still be included in addition to the full transcript. For ease of use, include your transcript on the web page itself and also as a downloadable PDF. 

There are transcription services available. Some notable ones include Temi, Rev, and GoTranscript. A service like Temi is AI-based, which means that it’s less expensive and has a quicker turnaround time (literally within minutes); the downside is that there are going to be a lot of errors you’ll have to correct. 

With a human-based service like Rev or GoTranscript, a real live person will receive your recording and transcribe it; that ups the cost and means a slower turnaround time (usually a day or more), but the accuracy is far higher. If one of your speakers is speaking with a heavy accent, a human-based service is probably the better option.

How to Use Colors Correctly

Color is a critical factor in any business’s brand identity, and it’s a great way to create an inviting, engaging donor experience on your website. But colors come with several pitfalls that could make your website inaccessible to people with low vision or impaired sight. 

Here’s how you can use color in an accessible way on your nonprofit’s website.

Maintain a Minimum 4.5:1 Color Contrast

The colors on your website, donation forms, and communications should always use sufficient contrast so that people with color blindness or impaired sight can read them.

What is color contrast, exactly? The Bureau of Internet Accessibility defines it as follows: “Color contrast is the difference in light between font (or anything in the foreground) and its background.” Color contrast can be determined by the types of colors used, but it can also be defined by the hue of the colors.

Here’s an easy example: Most web pages and word programs use black text on a white background. Why? Because the contrast between black and white is incredibly stark, and it makes the text very easy to read. If a web page were to, instead, use red text on an orange background, it would be almost impossible to read. Red and orange do not provide enough contrast.

Here’s an example where the hue of a color can make a difference: A nonprofit is holding a Christmas fundraiser and they want to make their webpage for the event look festive. So they make the page a dark green and they make the text a bright red. If the green is dark enough and the red is bright enough, it would provide enough contrast to make the page accessible—-even to people with red-green color blindness!

These shades of red and green do not provide enough contrast.
These shades of red and green meet the minimum WCAG requirements for color contrast ratio.

For your website to be considered accessible under the Web Content Accessibility Guidelines, a color contrast ratio of 4.5:1 must always be maintained for regular text. Large-scale text, meanwhile, can meet a color contrast ratio of 3:1. Don’t worry, you won’t have to do any complicated math or get deep into color contrast lore. You can check the color contrasts on your website using this free color contrast checker from the ADA. 

Don’t Only Use Color to Convey Info

To maintain accessibility, your nonprofit’s website should never use colors as the sole method for conveying information. Color should always be paired with text that explicitly states the intended message.

Colors are a great way to accentuate a message, especially when it comes to delivering simple “stop” and “go” messages using red and green. But if someone has low vision or colorblindness, that use of color would mean nothing to them. 

One area where this could easily come into play is in your donation forms. If a person clicks to submit your form but is missing some required information, or has incorrectly completed a field, the form will need to communicate this error to the user.

If the only action your donation form takes is to highlight the field in red, then you’re using color—and only color—to convey that information. This is inaccessible to someone with low vision or red-green colorblindness. Instead, that red color should be paired with text like “Please fill out this required field” or “Credit card number incorrect.” This way, a donor who cannot perceive colors will know the correct next steps they need to take. Otherwise, it’s likely that they will leave your page all together and decline to donate or engage with your nonprofit again. 
For more information on donation page best practices, see our blog post, How to Create a Donation Page that Raises More.

Ask for Feedback

The best data you can gather on your website’s accessibility will come from your users—especially those who have disabilities. 

You can start gathering that data by including a “submit feedback” call to action at the bottom of all your webpages. You can also include a page, reachable via your top menu, that specially addresses the steps your nonprofit has taken to address accessibility and invites feedback.

You can also seek out feedback by looking for other organizations and nonprofits in your community that specifically serve disabled people. To coordinate these efforts and take action on feedback received, appoint a staff or board member as your accessibility champion. 

An accessibility point person will help when your nonprofit is holding events. Whether your event is live or virtual, donors and community members with disabilities might require special accommodations in order to attend. You can include your point person’s contact information in your event communications and proactively ask that invitees reach out to them with requests. The American Bar Association has an accessible event planning toolkit that covers different event types and comes with thorough accessibility checklists.

Invite All Donors to Support Your Mission

As more and more of our lives happen online, making your website accessible to all users is a must. In addition to publishing the Web Accessibility Guidelines, the W3C also administers the Web Accessibility Initiative, which provides a ton of free resources and tutorials to help you make your website accessible.

Providing an accessible donor experience on your nonprofit’s website means inviting everyone to participate in your mission. To continue crafting a stellar donor experience with data-rich insights and industry trends, you can download our 2022 Donor Report.

Donors Report Tablet View
Donors Report Tablet View

How do your donors want to hear from you?

Get the data and analysis you need to refine your donor strategy.

Download the report

Join the discussion in our Slack channel on connected fundraising

Looking to become a more connected nonprofit leader?

Join 73,000+ of your peers getting industry news, tips, and resources straight to their inbox.