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 kind of experience that you want supporters and visitors to have with your nonprofit, making your website and content accessible to people with disabilities should be a top priority.
Creating an accessible website for your nonprofit starts with removing potential barriers that a person with disabilities might encounter when engaging with your nonprofit’s services, communications, or events—but, ultimately, what prioritizing accessibility really means is inviting everyone to engage with your nonprofit’s mission.
Here are the guidelines and tools you will need to create an accessible website for your donors. If you want to skip to any particular section, just click on the table of contents below.
- Follow the Web Content Accessibility Guidelines
- Structure Your Website to be Predictable and Easy to Navigate
- Make Your Website Accessible to Screen Readers
- Make Your Website and Donation Forms Navigable by Keyboard
- Include Video Captions and Audio Transcripts
- How to Use Colors Correctly
- Ask for Feedback
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 the 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
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 in 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 your site has a user interface, such as a dropdown menu that lists different sections, 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 of assistive technologies like screen readers (see below for more on-screen readers).
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 Make Your Nonprofit’s Website Accessible to All), 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 to navigate 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 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.
The donate button should take users directly to the first section of your donation form. It should be 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 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 the < 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 be 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 nonprofit’s 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, for example:
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 using only 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 headings 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 web pages 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 can navigate to your donation page but 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 our websites, our CRMs, and our donation forms—are automatically keyboard accessible.
If you’d like to learn more about Neon Websites, take this self-guided tour to see the product in action!
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 built-in tools for creating captions, they all 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 to 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 your video program doesn’t have a captioning tool, there are free captioning services available online. The University of Washington has a helpful list of free captioning providers that also includes 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 you’ll have to correct a lot of errors.
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 has 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 the text 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!
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, they are likely to leave your page altogether and decline to donate or engage with your nonprofit again.
For more information on donation form best practices, see our blog post, A Simple Nonprofit Donation Form Example (and Why It Works).
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 web pages.
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 holds 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 website experience for your donors, download our Website Optimization Action Plan.
Join the discussion in our Slack channel on connected fundraising
