In today’s digital age, the popularity of online giving is skyrocketing, and your nonprofit can’t afford to have an inaccessible website. A WebAIM study of the top 1 million websites found that 96.3% of homepages had WCAG 2 failures, and if your nonprofit falls into this category, you could be missing out on traffic and support from potential website visitors.
However, developing an accessible website isn’t just about having a nice homepage. It’s often legally required for nonprofits, making it critical to maintain compliance with regulations like the ADA.
How can your nonprofit improve its website’s accessibility? Any nonprofit can take the following steps right now to start developing a more accessible website:
- Add alternative text to images.
- Confirm that your website is keyboard-navigable.
- Use strong color contrast.
- Make your videos accessible to all.
- Verify that headings are hierarchical.
- Implement user testing and feedback opportunities.
Many of these tips are pulled directly from the Web Content Accessibility Guidelines (WCAG), which are used by great nonprofit websites to maintain a high level of engagement with their audiences. Developers should regularly review these guidelines to strive for a higher accessibility rating, but if your nonprofit needs a starting point, this guide is for you!
1. Add alternative text to images.
Alternative text, also called alt text, is an HTML attribute that describes the meaning and content of an image. Alt text appears in place of an image that has failed to load on a webpage. While you should always check to make sure the images on your website load correctly, alt text can be a helpful backup plan. Alt text also helps screen-reading software describe images to visually impaired website visitors.
Image alt text should be detailed, specific, and contextually accurate. Consider this example:
[Alt text: This image shows three nonprofit volunteers with boxes of donated food.]
You might be tempted to describe this image as, “People with boxes.” While that is generally true, it doesn’t describe the text in a detailed, specific, and contextually accurate manner.
Instead, your alt text should read something like, “Three nonprofit volunteers in matching shirts with boxes of donated food.” This way, the text accurately describes the image so that visitors using screen readers can understand the context of the image.
According to Double the Donation, accessibility practices such as this can help make your fundraising initiatives more accessible. By writing thorough and descriptive alt text, you’ll make the images on your website accessible to visitors who won’t directly view them. This can help you communicate the impact of your images, which is especially useful for your efforts to build relationships with site visitors and raise support.
2. Confirm that your website is keyboard-navigable.
There are a variety of ways people might navigate your website—not just by moving a computer mouse! Your website should be fully accessible through keyboard navigation, which allows people to navigate without using a mouse or trackpad.
To see if your website is keyboard-navigable, you can manually test it by:
- Using the tab key to navigate between elements
- Ensuring that there is a mechanism for clearly highlighting where a user is on the page (also known as focus style)
- Eliminating keyboard traps to avoid users getting stuck on a certain element and being unable to move away
Of course, your website should be navigable by mouse, trackpad, keyboard, and any other method of exploring your website. Optimize your navigation map to ensure it’s clear where each link will lead and provide easy-to-use navigation to take site visitors where they want to go.
3. Use strong color contrast.
When it comes to the text on your website, color contrast is key to ensuring your content is easily readable. For example, black text on a white background is easy to read because these two colors have a high level of contrast.
The WCAG recommends a contrast ratio of at least 4.5:1 or 3:1 for large text. Use WebAIM’s contrast checker to verify if your color scheme is accessible.
4. Make your videos accessible to all.
Many nonprofits use video storytelling to highlight their impact and compel website visitors to get involved in some way.
To ensure your videos are accessible to those who are deaf or hard of hearing (or those watching your content in a public place without headphones), offer captions and transcripts. While it may be easy to rely on auto-generated captions, these can be inaccurate or offer limited captioning. To ensure accuracy, take the time to review any auto-generated scripts and make changes as necessary.
Videos should also offer an audio-description option for those with visual impairments. Be sure to enable pause and stop functionality and disable auto-play.
5. Verify that headings are hierarchical.
Headings give your website visitors a glimpse of the page’s content before they start reading. To make your pages easy to read and navigate, ensure that your heading elements are in a sequentially descending order.
For example, let’s say an animal shelter’s website hosts resources on pet care for pet owners. The resources page might have headings similar to the following:
- Heading 1: Sometimes referred to as the H1 tag, this heading should be at the top of the hierarchy. Most often, this heading is the page’s title. For our example, it might read, “Pet Care Resources” or “Resource Center for Pet Owners.”
- Heading 2: Think of each Heading 2, or H2, as a subcategory of the main title. For example, “Affordable Veterinary Care” and “Reading Materials” might be applicable H2s for the animal shelter’s Resources page.
- Heading 3: Continuing down the hierarchy of headings, H3s are even smaller categories that help break up the sections defined by H2s. For example, under the H2 “Reading Materials,” the animal shelter might categorize blog posts based on their subject matter, such as defining a section on behavior and training and another section about pet safety.
According to Kanopi’s guide to screen readers, this technology uses headings as a type of landmark on a page. This means that visitors using screen readers use headings as a map for navigating the page’s content. If your page lacks a logical heading structure, you could mislead site visitors. However, headings that follow a sequentially descending order allow visitors to understand the layout of the page and the most important information to focus on.
6. Implement user testing and feedback opportunities.
Although you can manually test your website to identify any accessibility issues, you’ll never use it from the same perspective as your website’s visitors. That’s why their input is invaluable. Provide a survey form or email address for visitors to use if they notice any accessibility errors.
User testing is especially important after a major website change, like migrating to a new system. If you’ve recently moved from Drupal to WordPress, for example, users may identify errors in your migrated forms, links, and other website elements that you missed.
_____________________________________________________________
Making your website more accessible serves multiple purposes, including maintaining compliance, providing a better user experience, and enhancing your nonprofit’s credibility. That’s why it’s crucial to not just view accessibility as a checklist but to create an online experience that offers optimized accessibility at every step.
As a nonprofit leader, web development might not be your specialty, or perhaps it doesn’t fit into your busy fundraising schedule. Turn to a web design professional for the expertise you need to fully optimize your nonprofit’s website.
