Blog

A Beginner’s Guide to Nonprofit Web Accessibility

Nonprofit web accessibility is a complex subject to get a grasp on for the first time, but it’s very important. Increased accessibility ensures anyone can learn more about your organization and get involved, provides legal protection for your nonprofit, and generally strengthens your website so that it can better support your goals.

Think again if you assume there’s nothing you can do on your own to make your website more accessible. True, some technical backend elements are best handled by tech pros, but you don’t need to be a developer to get started understanding accessibility and taking your first steps.

This crash course will cover all the context you need to approach nonprofit web accessibility from an informed position.

Legal Background: Is Accessibility Legally Required?

The concept of accessibility falls under the Americans with Disabilities Act (ADA), which often applies to nonprofits since they usually meet one or more of these criteria: receive federal funding, employ 15 or more paid staff members, and provide “public accommodations.”

If these criteria apply to your nonprofit, you’re legally required to ensure that your public accommodations are accessible by complying with ADA guidelines. Public accommodations can be broadly defined as any services or facilities that are open to the general public, like a storefront, library, or any other public-facing facility. But even if these don’t apply to your case, ensuring your nonprofit is accessible to anyone who wants to get involved is never a bad idea!

But here’s the big question: Do websites fall under the designation of public accommodation?

Effectively, yes. Legal precedents have been set that treat websites as public accommodations that must be accessible in order to ensure ADA compliance. For nonprofits, this means there’s a chance your website can be required to comply, especially if you’re ever charged with violating the ADA in some other way. 

Noncompliance and lawsuits can result in costly legal fees, reputational damage, and potentially expensive last-minute web design services—outcomes you definitely want to avoid.

Framework: Understanding the WCAG

So how does the ADA define web accessibility? What guidelines does it use to determine compliance and non-compliance?

Technically, the ADA does not lay out specific guidelines to define web accessibility since it was enacted and updated before the modern Internet as we know it had taken shape. Rather, the DOJ has pointed to the Web Content Accessibility Guidelines (WCAG) as a useful framework (and the closest thing we currently have to official guidance).

The WCAG is the result of an ongoing initiative by the World Wide Web Consortium to thoroughly outline the elements and best practices that define different levels of web accessibility. Explore the current version of the WCAG to get a sense of what it covers.

The WCAG covers a wide range of specific technical elements that contribute to accessibility. For our purposes, it’s helpful to understand the broader characteristics displayed by accessible web content:

Perceivable: Content is perceivable by anyone regardless of their abilities or the devices they use to engage with it.

Operable: Content is easily navigated using a mouse, trackpad, or keyboard.

Understandable: Content is structured logically in a way that can be easily understood when accessed using text-to-speech devices.

Reliably interpreted: The code that makes up content is also structured logically so that any browser or assistive device can reliably interpret it.

The WCAG defines three levels of compliance – A, AA, and AAA. Since it is virtually impossible to make all website elements AAA compliant, level AA is the generally accepted benchmark for ADA compliance. 

Benefits: Creating a Better Website

What are the main benefits of ensuring accessibility across your nonprofit’s website?

ADA compliance. First, accessible design that meets AA criteria laid out in the WCAG will help cover your bases legally should a situation arise in which you’ve been charged with violating the ADA.

Inclusive, expanded reach. More generally, accessible design makes your website more inclusive and helps you reach broader audiences. Why turn away any new supporters interested in your cause?

Generally improved performance and UX. Accessible web design is good web design. This means a streamlined, accessible website will generally perform much better than one overloaded with unnecessary elements or overly-complex code. Accessible design improves the overall user experience and can even strengthen SEO performance to boost your online visibility.

Pitfalls: Common Accessible Design Mistakes

So what are a few of the specific design elements that can cause a site to be either accessible or inaccessible? These are some of the most common design mistakes that harm a website’s overall accessibility: disorganized heading structures

The titles and headings on a web page indicate what it’s about to users and provide the structure that accessibility devices like screen readers need in order to navigate and interpret it. 

A disorganized heading structure or a page that lacks a descriptive title will make it much harder for visitors navigating with a keyboard or using screen readers to engage with the page, potentially making it completely inaccessible. 

How to fix it: Ensure that each page on your site has a clear title in the form of an H1 heading. All of the content should then be structured in a logically ordered series of H2, H3, and H4 headings, i.e. all H3s are nested under a relevant H2. 

Poor color contrast and jumbled design

For users with low vision or colorblindness, low color contrast in which elements don’t stand out clearly or get lost in a jumble of other elements can be difficult or even impossible to distinguish. For visuals that convey meaning, like infographics and the color of linked text within a page’s written content, proper color contrast is especially important.

Even users without impacted vision can have trouble engaging with a site that features poor color contrast, jumbled designs, and too many flashing elements. 

How to fix it: Keep each page on your website focused on a main purpose and avoid any unnecessary elements that could jumble the main content area. Don’t include flashing design elements. Your overall visual brand should be fairly simple as reflected in the site’s color scheme, page backgrounds, navigation bars, and buttons. Use visuals and text colors that are easily distinguished against their backgrounds (the WCAG sets a standard contrast ratio of at least 4.5:1). Revisit your nonprofit’s graphic design approach as a whole if it includes washed-out color palettes. 

Missing alt text for images

Alternative text explains the meaning of images so that visually-impaired users and those using screen reader devices can still understand what they are and what they convey. Without alt text, images can get completely lost for these users, which should definitely be avoided if an image is the only means of receiving that information on the page. Videos and audio without transcriptions present similar challenges.

On the flip side, including too many images that serve purely decorative purposes can also create poor experiences for users, since screen readers will read everything, including irrelevant image titles and alt text. 

How to fix it: Provide descriptive, useful alt text for each image file on a page. Most modern nonprofit website builders or CMS platforms offer easy options for attaching alt text. Include video and audio transcriptions, either on the page or clearly linked. Avoid using too many decorative images, and hide those that are included from screen readers to further improve the user experience. 

Poorly designed forms and navigation

Without clearly-labeled navigation links, it becomes very difficult for users to find what they need on your website. Even if you do have a running navigation bar that links out to the most important pages on your site, unintuitive text can make the process of jumping between pages unnecessarily frustrating.

Forms are also critical—after all, your email signup and donation forms are how you generate online support and gather contact information to stay in touch with supporters. All form fields need to be clearly labeled outside of the field itself. In other words, if a field is only labeled with text that’s already populated within it, screen readers won’t be able to access it. Even worse, this text will disappear once users begin typing into the field, making the form even less accessible. 

How to fix it: Ensure each page on your site has a running navigation menu that links out to the most important pages that users will be looking for. Accurately describe these pages with concise phrases that let users know exactly what they’ll be clicking through to. Review any existing forms on your website to see if each field is clearly labeled outside of the fields themselves. If you see issues, explore your options for making design tweaks or invest in new, more compliant form software or platform-specific plugins (like for the WordPress CMS).

Tech doesn’t have to be complicated. There are plenty of steps you can take on your own to start improving the accessibility of your site—the solutions to the pitfalls described above are perfect examples. It’s also highly recommended that you create and document rules that explain things like alt text, color contrast requirements, and more for your team to follow when adding content to your website.

That said, deeper improvements and technical changes sometimes need to be made to boost accessibility. In these cases, working with a professional developer or nonprofit technology consultancy will be your best bet. These partners can conduct full accessibility audits, analyses, and improvements to take the guesswork out of the entire process.