As a non-profit, your mission is to serve your community. You work to remove barriers and create a more inclusive world. But what about your most important public asset—your website? Is it truly open and welcoming to everyone, including the one in four adults in the U.S. who live with a disability? Web accessibility is the practice of ensuring that your website can be used by everyone, regardless of their physical or cognitive abilities. It means making sure a person who is blind can use a screen reader to understand your content, or that a person who cannot use a mouse can navigate your site with a keyboard. For a mission-driven organization, accessibility is not just a technical issue; it is a moral imperative.

Beyond the ethical case, there is also a strong practical one. An accessible website is better for everyone. The principles of accessible design, such as clear navigation and readable text, improve the experience for all your visitors. Furthermore, it can improve your search engine optimization (SEO), as many accessibility best practices align with what search engines look for. Finally, there is a significant legal reason. Courts are increasingly treating websites as places of public accommodation, meaning they fall under the Americans with Disabilities Act (ADA). An inaccessible website is a legal risk. This guide will demystify non-profit web accessibility and break it down into eight simple, actionable steps you can take to make your website more inclusive.

Step 1: Use Alternative Text for All Your Images

This is one of the simplest and most impactful steps you can take. Alternative text, or “alt text,” is a short, written description of an image that you add to your website’s code. This text is not visible to most users, but it is read aloud by screen readers for visitors who are visually impaired. Without alt text, an image is invisible to a screen reader user; with it, they can understand the content and context of the image.

How to Write Good Alt Text

Writing effective alt text is straightforward. Your goal is to be concise and descriptive. Here are a few key tips to follow:

• Be Specific and Succinct: Describe what is in the image as clearly as possible in about 125 characters or less. For example, instead of “volunteers,” a better alt text would be “Three volunteers in green shirts planting a tree in a community garden.”
• Avoid “Image of” or “Picture of”: A screen reader already knows it is an image, so you do not need to include these phrases. Just jump straight into the description.
• Mark Decorative Images as Such: If an image is purely for decoration, like a swirly line or an abstract background, it should have empty alt text (alt=””). This tells the screen reader to skip it.

Almost every CMS, including WordPress and Squarespace, provides a simple field to add alt text whenever you upload an image. Taking a few extra seconds to write a good description for every image is a foundational part of creating an accessible website.

Step 2: Ensure Your Website Has Strong Color Contrast

For people with low vision or color blindness, text on a website can be difficult or impossible to read if there is not enough contrast between the text color and the background color. For example, light gray text on a white background is a common design trend, but it is very hard for many people to see. Good color contrast is not just an accessibility issue; it makes your content more readable for everyone, especially on mobile devices in bright sunlight.

How to Check and Fix Color Contrast

The Web Content Accessibility Guidelines (WCAG) provide specific standards for color contrast ratios. The good news is that you do not need to calculate these yourself. There are many free and easy-to-use tools available.

• Use a Contrast Checker: Tools like the WebAIM Contrast Checker or Coolors.co let you enter your text and background colors to see if they pass the WCAG standards. This is a great way to test your brand colors before you even start designing.
• Prioritize Black on White for Body Text: When in doubt, the most readable combination is black (or very dark gray) text on a white (or very light) background. While you can use color for headlines and buttons, your main body text should always have very high contrast.

Step 3: Make Sure Your Site is Navigable with a Keyboard

Many people with motor disabilities cannot use a mouse. Instead, they rely on a keyboard or other assistive devices to navigate websites. They use the “Tab” key to jump between links, buttons, and form fields, and the “Enter” key to activate them. An accessible website must be fully functional using only a keyboard. This is a critical test of your site’s usability.

How to Test for Keyboard Accessibility

This is one of the easiest tests you can perform on your own site. Simply go to your homepage and put your mouse away. Now, try to navigate the site. Press the “Tab” key repeatedly. You should be able to see a visible outline or highlight that moves from one interactive element to the next, in a logical order. You should be able to access your main menu, fill out your contact form, and even make a donation, all without touching your mouse. If you get “stuck” anywhere, or if you cannot tell where you are on the page, then you have found an accessibility issue that needs to be fixed.

Step 4: Use Proper Headings to Structure Your Content

Just as headings in a newspaper help sighted readers scan an article, headings in your website’s code help screen reader users understand the structure of your content. Using headings (H1, H2, H3, etc.) correctly creates a logical outline of your page. This allows a screen reader user to quickly jump between sections to find the information they need, rather than having to listen to the entire page from top to bottom.

The Rules of Heading Structure

Think of your page as an outline. The rules are simple:

• There should be only one H1 per page, which is the main title of that page.
• Do not skip heading levels. For example, do not jump from an H2 to an H4. Your headings should follow a logical order, like H1 -> H2 -> H3.
• Do not use headings just to make text look big and bold. Use them to describe the structure of your content.

Step 5: Write Descriptive Links

Screen reader users often navigate a page by pulling up a list of all the links. Imagine listening to a list of links that just says “Click Here,” “Click Here,” “Learn More,” “Learn More.” This list is completely useless because it provides no context. The text of your link should describe where the user will go if they click on it. For example, instead of “To read our annual report, click here,” a much better link would be “Read our 2024 annual report.” This is more helpful for all users, and it is essential for screen reader users.

Step 6: Add Captions and Transcripts to Your Videos

Video is a powerful tool for storytelling, but it can be completely inaccessible to people who are deaf or hard of hearing. Providing captions for your videos is essential. Captions are the text on the screen that shows what is being said. Most video platforms, like YouTube and Vimeo, have tools that can automatically generate captions for you, which you can then edit for accuracy. For an even more accessible experience, it is also a best practice to provide a full, text-based transcript of the video on the same page. This is also great for SEO, as search engines can read the text in the transcript.

Step 7: Design Your Forms for Accessibility

Forms are a critical part of a non-profit website. They are how you collect donations, sign up volunteers, and register people for events. An inaccessible form can be a major barrier. Every field in your form (like “First Name” or “Email Address”) must have a properly coded label. This label is what a screen reader announces to tell the user what information to enter in that field. Also, make sure that any error messages (like “This field is required”) are clearly announced to the user. Finally, ensure that the entire form can be filled out and submitted using only a keyboard.

Step 8: Choose Accessible Technology and Partners

Finally, accessibility should be a consideration from the very beginning of any web project. When you are choosing a new CMS, ask about its accessibility features. When you are hiring a web design firm, ask about their experience with building accessible websites. By making accessibility a priority in your procurement process, you can ensure that you are starting your project on a solid, inclusive foundation. This is a core part of our own web design process at C.U.N.Y. Digital.

Accessibility is not a feature, it’s a practice. It’s about making a commitment to inclusion in everything you do.

Conclusion: Building a Website for Everyone

Creating a truly inclusive website can feel like a big task, but it does not have to be overwhelming. By taking these eight simple steps, you can make a dramatic improvement in your website’s accessibility and create a more welcoming experience for all of your supporters. Start with the basics, like adding alt text to your images and checking your color contrast. Then, work your way up to more complex issues. Remember that accessibility is an ongoing journey, not a one-time fix. By making a commitment to inclusion, you can ensure that your digital front door is open to everyone who wants to support your mission.