Your website lets your supporters donate, support, and interact with your nonprofit. Ensuring your website is accessible is a must if you want to engage with all of your supporters. If your website’s out of date or not optimized for accessibility, you are losing important members of your audience and potentially breaking ADA (Americans with Disabilities Act) best practices.
Nonprofits are required to follow ADA guidelines in their physical premises, but your nonprofit’s website should aim to be compliant, as well.
While there are no concrete rules around ADA compliance for websites (yet), courts are increasingly ruling that organizations should treat their websites as “public accommodations” that meet ADA standards. If your nonprofit is ever charged with violating the ADA, your website will likely be scrutinized and required to follow the WCAG Guidelines that define compliance.
But even aside from compliance concerns, having an accessible website offers a better user experience, helps promote inclusivity at your nonprofit, and has the potential to raise your website’s search engine rankings. Most of the best nonprofit websites are already fully accessible, but it’s never too late to start if yours isn’t.
To improve your website’s accessibility, this guide will walk through six best practices for these key elements of your website:
Each section will discuss common pitfalls and how to fix them as well as the added benefits they’ll bring for all of your website’s users. Remember, most strategies that improve accessibility make your website better as a whole, meaning implementing any improvements is definitely a worthwhile endeavor.
Design
Your website’s design should be modern, representative of your brand, and clutter free. Most nonprofits are not run by web design experts, and feeling pressured to create a website quickly and on a budget can lead to design choices that harm your users’ experience. A few design choices that can hamper your website’s accessibility are:
- Color choice. While your website should stick to your brand’s colors, make sure your colors can be seen or differentiated by all of your users. Run your color choices through colorblind filters to see how well they contrast against the background of each page. This is especially important for text and links.
- Layout. Your nonprofit website has many important elements that you want your visitors to see as soon as possible. Be strategic about where you place items so as not to clutter your pages. Busy pages can be disorienting and inadvertently cause none of your elements to stand out.
- White space. Margins and white space between content helps our brains comprehend what our eyes are seeing by providing pauses to take in information. While your visitors can theoretically take in everything on a webpage without white space, it will take a lot longer and can cause frustrated visitors to abandon the page.
If your nonprofit needs help brainstorming initial designs that will look good on the web while also being accessible, consider hiring a design consultant. Professional web designers are invaluable partners when it comes to creating well-designed websites that your nonprofit can continue to maintain long after they’re created.
Images
Images attract attention and can be used strategically to direct visitors to important items and pages on your website. However, images can also slow down your website and cause frustration for visitors using screen readers. For each image on your website:
- Create an alt text description. Alt text is a textual description of images on your website that screen reader tools read aloud in place of an image. Alt text also gives your nonprofit an additional way to let search engines know what your website is about by describing your images. Be sure to strategically enable and disable what gets read aloud for screen readers so users aren’t stuck listening to a description of your navigation bar on every page they visit.
- Resize based on your website’s needs. Images that are too large can negatively impact loading times. Try opening your image in a new window and compare it to its size on your website. Google’s PageSpeed Insights tool can also help you identify images that could be shrunk or compressed.
All images and graphics should also be tested with colorblind filters, as well. Make sure anything on your website indicated by color has a second visual indicator to help your users complete forms, navigate your website, and find the information they need. For example, required fields on your donation form should be indicated with an asterisk or other marker aside from just text color.
Navigation
Visitors come to your website with expectations about how a website should look and be navigated. While you may be tempted to give your visitors a unique experience, your navigation bar is not the place to do it, as unorthodox navigation leads to a frustrating browsing experience.
For example, consider your nonprofit’s donation form. You want to make the donation process as easy for these supporters as possible to avoid donor abandonment, wherein donors leave your website without completing their gift. You can accomplish this by:
- Making navigation to your donation page easy and clear. Many nonprofits have large donation buttons on their website to ensure visitors can navigate to their donation page at any time. Others have their donation form right on their homepage to let visitors contribute in even fewer clicks.
- Creating an intuitive donation form. Your supporters expect your donor form to have certain fields and to have those fields in a specific order. Deviation from traditional donation form formats can make donors confused or nervous about giving away their financial information.
- Asking only what you need. Donor abandonment is often caused by lengthy donation forms with unnecessary fields that require scrolling to get through. If your nonprofit has specific forms (event registration forms, for example) that require many fields, explore form-building tools that use conditional logic and adapt in real-time to only ask additional questions.
Conduct user testing by having people unfamiliar with your website attempt to complete tasks like making a donation. By doing so, you can get data on how new visitors are navigating your website and interpreting your navigation labels.
Text
You likely have a lot to say about your nonprofit, but your website only has so much space. Overloading your website with information is a common mistake in web design often committed by younger nonprofits that don’t have as many high quality images to break up blocks of text.
In addition to what your text says, how you present your text can determine whether or not your page is actually readable. As you configure how text displays on your site, consider:
- Color contrast. Light text cannot be seen on light backgrounds and dark text cannot be seen on dark backgrounds. This sounds obvious, but we are all familiar with encountering unreadable text laid over images without enough color contrast. If you have a multicolored background or image that needs overlaid text, try using white text with backing shadows or outlining it in black.
- Text size. Text that’s small and literally difficult to read is a major turn-off for all visitors. Your nonprofit should make every effort to avert this by using text of a reasonable size and enabling your users to increase text size by up to 200%.
- Line lengths. While you are likely capable of reading this article if each line stretched all the way from one side of the page to the other, it would be a frustrating experience. Long line lengths can cause you to lose your place more easily while reading since your brain has to keep track of where you are across the entire page. Keep line lengths to approximately 50-60 characters to best hold your readers’ attention.
Text hierarchy can also improve your navigation by giving readers ordered headers and bulleted and numbered lists. The labels and white space created by these text elements helps readers skim long documents to find the information most pertinent to their needs.
Media
Videos and interactive media can say a lot about your nonprofit and give supporters a unique experience when they visit your website. However, these items are often the first thing to cause trouble with accessibility.
Similar to alt text for images, your videos and interactive media should have transcripts and/or subtitles available for visitors using screen readers to engage with your content. Provide alternative ways to obtain the information present in these features, as well, for your visitors with slow internet connections that may fail to load bandwidth-heavy media.
Regularly check up on your website’s media when you perform website maintenance. Cornershop Creative’s guide to nonprofit website maintenance recommends setting automatic tests to regularly check that all video features are working. Hosting your videos on a third party website like Youtube is another option, but proactively check how the dimensions of the video appear on your website to ensure there is no distortion.
Mobile-Friendliness
Many of your visitors will view your website on their phones, and nonprofits of all sizes are increasingly tapping into these opportunities with mobile-optimization strategies and apps.
As you optimize your website for mobile use, pay special attention to media, images, and design elements on your website. The mobile version of your website will likely need to exclude some images in order to remove clutter and increase load speeds. Consider what design elements of your website most effectively get your brand message across in a small space. Then adapt your mobile page layout around your logo and brand colors, identifying your nonprofit quickly and without distracting from your website’s content.
If your nonprofit is interested in launching a mobile app, review how your nonprofit’s images and branding appear on the app before pushing the service live. Mobile apps have different requirements than website design, so consider using third-party services to expand onto users’ phones. For example, this guide from Pathable has several options to consider when improving the mobile experience for attendees at your physical or virtual events.
Even without a dedicated mobile app, though, mobile accessibility needs to be a top priority for your website as a whole. Check your website builder’s or CMS’s (content management system) theme to ensure new web pages automatically adapt to mobile. Most modern CMSs already come with mobile optimization features, but be sure to ask your web designer for details when needed.
Web accessibility makes your website usable for a larger audience, and many accessibility practices such as clutter-free designs, easy navigation, and mobile optimization make your website better for everyone.
If your nonprofit needs additional help designing an accessible website, consider reaching out to nonprofit web design consultants, who have years of experience helping similar organizations build their websites.
COMMENTS