The online world is changing rapidly, even faster than just a couple of years ago. Everyone’s caught up in the flurry of exciting AI innovations—chatbots, communication automation, personalization, and more. 

But aren’t we getting ahead of ourselves? Forbes shared that only an estimated 3% of the entire Internet was fully accessible to users with disabilities in 2022!

Tools like AI are definitely creating opportunities for nonprofits to strengthen their fundraising and digital marketing strategies, but web accessibility is a fundamental element that shouldn’t be overlooked. A beautifully designed website that offers engaging content and collects valuable information is not as much of an asset if it excludes some visitors from enjoying it.

Accessible websites are generally easier to use and engage with for all users, creating better user experiences and putting inclusivity values into action. Not to mention, websites and apps are increasingly being held to “public accommodations” standards set forth in the Americans with Disabilities Act, fueling a recent rise in web accessibility-related lawsuits . 

Let’s say you want to make your nonprofit’s website more accessible. Where do you start? What elements should you focus on? 

In this guide, we’ll offer a crash course in website accessibility and the steps (many of which are very easy!) that high-quality nonprofit sites take to foster more inclusive experiences.

1. Understand Web Accessibility Guidelines 

“Web accessibility” might sound like an abstract term, but it’s actually quite concrete. The criteria that define an accessible website are clearly laid out by the World Wide Web Consortium (W3 Consortium) in the Web Content Accessibility Guidelines (WCAG). They’re used by courts as the unofficial but generally accepted authority in accessibility cases.

The WCAG is an exhaustive resource, but the components that come together to create an accessible web experience can be broken down like this:

• • • Content – What the website includes, like text, images, videos, and audio, as well as the backend code that contains and expresses the content
    • Web browsers – Tools that users use to access the website and its content
    • Assistive technology – Tools that some users may use to help them interpret the website’s content, like screen readers
    • User knowledge – What the users bring to the experience themselves in terms of skill level and adaptive strategies
    • Developers – What your site’s designers bring to the experience in terms of awareness and knowledge of accessible design
    • Authoring tools – The software (also called a content management system [CMS]) you use to populate your website with content
    • Evaluation tools – The tools you and/or your developers use to check your website for accessibility

Here’s how all of this works together: Developers use authoring and evaluation tools to create the content on your website. Your website visitors can then use web browsers, assistive technologies, their own user knowledge, or other tools to access and interact with the content on your website.

Looking closer, the WCAG also outlines a handful of key principles of accessible design:

• • • Websites need perceivable information and user interfaces.
    • The user interface and navigation must be operable.
    • The information included on the website must be understandable to users and structured in intuitive ways.
    • The website’s content is robust and reliably interpreted, i.e. coded in a straightforward way that will work with all kinds of browsers and devices.

The W3 Consortium provides a helpful explainer of each of these principles in greater depth.

2. Identify Areas to Improve

Once you get your bearings in the world of web accessibility, you’ll need to determine the current state of your site to begin improving it. A technology assessment, including a website audit, can be a helpful exercise for understanding what you’re already doing well and what you can improve.

In the following sections, we’ll take a closer look at some specific elements of your website and how they should demonstrate the web accessibility principles.

3. Design Visual Components with Accessibility in Mind 

Let’s start with the visuals on your nonprofit’s website that play such important roles in telling your story to visitors: images, logos, illustrations, infographics, videos, and more. As you’re designing, make sure to keep these accessibility best practices in mind:

• • • Ensure visuals have a high color contrast. For example, the color of text shouldn’t be difficult to read over its background. Photos of your organization at work should be clear, without dulled or muted colors flattening their effect. The background of your website should be a neutral or very subtle color so that the visuals on it can clearly stand out.
    • Include alt text for images. Alternative text is a written explanation of what visual media on your site conveys so that users with screen reader devices can understand the image. Modern CMS platforms include easy options for writing alt text when you upload new image files. It won’t display on the front end of your web pages but will be read by devices that interpret and read the content through its source code.
    • Provide captions or transcripts for videos. A visual should never be the only means of receiving information on a web page. Screen readers can’t decipher what’s happening in a video, for example, so you need to provide written transcripts in the body of the page (or on a linked page) or coded captions in the backend code. The same principle applies to text-heavy images, like an image of an event flier.
    • Use easy-to-read fonts. The fonts you use to display text on your website count as visual elements, too, and they can significantly impact your users’ experiences. Use simple fonts across your website—no need to get too flashy or creative. This ensures your messages will be easy to see and interpret as you welcome visitors.

These best practices are easy to apply and include as part of your normal website maintenance and publishing habits. And the best part is that they don’t just boost your site’s accessibility; they’re tried-and-true web design best practices in general. When your pages look better and are easier to understand, you’ll see increased engagement across the board.

4. Ensure Your Site Is Navigable by Keyboard 

The way that your website is built and structured on the backend also plays an important role in its accessibility. 

Specifically, your website’s coded elements need to be navigable by keyboard. Using combinations of the tab, shift, space, enter, and arrow keys, your users should be able to navigate through your web pages and interact with its elements. 

Again, modern CMS platforms should largely handle this for you, but it’s still important to check for “keyboard traps.” These can occur for a variety of reasons, most commonly when a page features complex embedded applications or forms. 

Try testing your own website (it’s easy)—navigate to your nonprofit’s donation page and try to complete the form using just the keys listed above. Would a visitor be able to complete a donation without using a mouse? Are there any traps that halt progress, or if there aren’t, are there any unnecessary steps that slow down or complicate the process?

If you’re encountering significant navigability issues on your pages, there are likely issues with the focus order of their elements, and the backend code could be refined. It’s possible to correct these on your own with a little research, but the help of a tech consultant may prove more useful if you’re seeing sitewide issues that need broader fixes.

5. Create Accessible Forms 

Speaking of forms, these are among the most tricky elements to keep 100% accessible. They’re also among the most important—after all, signup and donation forms are how you turn your site visitors into retained supporters, donors, and volunteers.

Although a well-designed donation page looks simple and intuitive, the backend process of inputting information into the website can be complex. A form is effective when both technical and design elements work in tandem to create a smooth experience that encourages completion. Keep these best practices in mind as you review the forms on your website:

• • • Clear instructions. Is the purpose of the form immediately evident (and written in plain text)?
    • Field labels. Is each field of the form clearly labeled in an intuitive way? Are the labels outside of the fields themselves? A common accessibility mistake occurs when labels are written within fields—when a user begins typing, the label disappears, making it difficult to correct mistakes.
    • Tab navigability. Is each field of the form navigable using a tab key?
    • Error messages. If a required field is left empty or is filled incorrectly, how do you notify users? Color should never be the only way to signify a mistake. An asterisk and written error message in red is the standard approach, but ensure that it displays outside of the field itself. 
    • Clear and easily-clickable buttons. When the form is filled, is the “submit” button clearly labeled and prominently designed? Can it be clicked using a keyboard?

Most websites use third-party apps and plugins to create and embed forms. If your forms aren’t hitting the accessibility mark, look first at what tool you’re using to create them. Replacing it is usually a fairly easy solution, but you’ll just need to make sure that the flow of data from completed forms still works properly.

6. Offer an Accessibility Tool 

A newer development in the world of web accessibility is self-service-style accessibility tools. These display on the frontend of your website and can allow users to manually adjust elements like color contrast and text font and size.

If your website doesn’t include an accessibility widget, consider installing one. Once you’ve put in the work to establish a baseline level of accessible design across your site, handing over the controls for your users to fine-tune how elements are displayed will further improve and tailor their experiences. 

Depending on the CMS platform that you use, your options for accessibility widgets will vary. WordPress is the most popular publishing platform, and its plugin system is extremely easy. Check out One Click Accessibility, a leading (and free) accessibility plugin for the platform to get a sense of what these tools can accomplish.

Whether they’re a returning supporter checking out your nonprofit’s updates or a brand new guest who clicked on a Google Ad listing, a reliable accessibility tool can help you rest assured that all visitors will be able to engage with your content, navigate your pages, and get help if needed. This kind of smooth, supportive experience can help drive repeated engagement and strengthen your relationships with supporters over time.

This primer should give you solid background to begin evaluating the current state of your own website and give you plenty of easy steps you can take on your own to test and improve it. 

But you also don’t have to go it alone. Tech consultants and web designers can handle larger-scale audit and improvement projects to give your site a more thorough accessibility update. Cornershop Creative’s list of design firms focuses on consultants with nonprofit experience and could be a helpful starting point for your research.

Whether you need light fixes or a renovation, remember the key takeaway: Web accessibility not only makes your nonprofit’s digital presence more welcoming and inclusive for all potential supporters, it makes your website better overall.

About the Author

With 15 years’ experience, Ira Horowitz is an expert in nonprofit online communications and online fundraising. His work has resulted in increased funds and resounding supporter engagement for hundreds of organizations.Ira oversees Cornershop Creative’s project management team and manages all strategic engagements, and helps guide nonprofits to determine their long-term strategy goals for online communications.