How to create an inclusive, accessible nonprofit website
The internet is a gateway to information, services, and opportunities. But not everyone experiences the web the same way. For a website to be truly inclusive, accessibility has to be a priority from the start.
What accessibility means
Accessible web design means creating online experiences that people with disabilities can use and understand. That includes people with visual, auditory, cognitive, and motor disabilities, along with people experiencing temporary injuries or situational limitations, like a bright screen in sunlight or a noisy room.
This isn't a small group. According to the World Health Organization, an estimated 1.3 billion people, about 1 in 6 people worldwide, experience significant disability.
For nonprofits, accessibility is especially important. The people you serve, your donors, and your volunteers all deserve equal access to your mission. And an accessible website is almost always a better website for everyone: clearer, easier to navigate, and more welcoming.
Here's how to make your website more accessible, from color and text to images, navigation, and multimedia.
Color contrast: the foundation of readability
Color affects both how your site looks and how usable it is. Strong contrast between text and background makes content readable for people with low vision or color vision deficiencies, and for everyone reading on a phone outdoors.
Follow WCAG guidelines. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for regular text and 3:1 for large text to meet the widely used AA standard.
Test your colors. Free tools like the WebAIM Contrast Checker and the WAVE Web Accessibility Evaluation Tool can quickly flag problem combinations.
Don't rely on color alone. If you use color to convey meaning, like red for errors or color-coded program pages, pair it with text, icons, or patterns.
Text and typography
Text size and typography have a big impact on readability.
Use flexible text sizes. Size text with relative units, like rem, em, or percentages, so visitors can enlarge it without breaking your layout.
Choose legible fonts. Pick clear, readable typefaces and use generous line spacing so text doesn't feel crowded.
Balance style and clarity. Creative typography can be beautiful, but save decorative fonts for short headlines and keep body text easy to read.
Alt text: describing your images
Images are a vital part of nonprofit storytelling, but people who use screen readers can't see them. Alt text is a short written description that screen readers read aloud.
Describe what matters. Convey the essential content and purpose of the image. For example, "Volunteers planting trees along the riverbank" is far more helpful than "photo1.jpg" or "volunteers."
Mark decorative images. If an image is purely decorative, use empty alt text (alt="") so screen readers skip it.
Fit the context. Alt text should make sense alongside the surrounding content.
Avoid repetition. If nearby text already describes the image, keep the alt text brief or leave it empty.
Keyboard navigation and focus states
Many people navigate websites with a keyboard instead of a mouse, including people with motor disabilities and screen reader users.
Use a logical tab order. Make sure people can move through links, buttons, and forms in a sensible sequence using the Tab key, and never get trapped in one spot.
Show clear focus states. A visible outline or highlight should show which element is selected. Don't remove focus outlines without replacing them.
Add skip links. A "Skip to main content" link at the top of each page lets keyboard users bypass repetitive navigation.
Quick test: Put your mouse away and try to navigate your homepage and donate using only the Tab and Enter keys.
Video and audio
Multimedia should be accessible, too.
Add captions and transcripts. Provide captions for videos and transcripts for audio. They help people who are deaf or hard of hearing, and anyone watching in a noisy place or with the sound off.
Include audio descriptions. When important information is only shown visually in a video, add narration that describes it.
Avoid autoplay. Let visitors choose when to play media, and always provide easy pause controls.
Other quick wins
A few more simple practices make a big difference:
Use real headings. Structure pages with proper heading levels (H1, H2, H3) so screen reader users can scan and jump between sections.
Write descriptive links. Instead of "click here," use link text that explains the destination, like "Read our annual report."
Label your forms. Every form field, especially on donation and sign-up forms, needs a clear, visible label and helpful error messages.
Write in plain language. Short sentences and familiar words help people with cognitive disabilities, non-native speakers, and busy readers alike.
Respect motion preferences. Keep animations subtle and honor visitors' "reduce motion" settings.
Test regularly and listen
Accessibility isn't a one-time task. It's an ongoing commitment. Run your site through automated tools like WAVE regularly, but remember that automated checks only catch some issues. The most valuable insights come from people with disabilities themselves. Invite feedback, consider paid user testing, and make it easy for visitors to report barriers. Then use what you learn to keep improving.
A quick accessibility checklist
Text and background colors meet WCAG contrast ratios
Color is never the only way information is conveyed
Text can be enlarged without breaking the layout
Every meaningful image has descriptive alt text
The entire site can be navigated with a keyboard
Focus states are clearly visible
Videos have captions and audio has transcripts
Pages use a clear heading structure
Links describe where they lead
Every form field has a visible label
A web where no one is left behind
In many places, digital accessibility is also a legal requirement, and the rules vary by country and region, so it's worth checking which apply to your organization. But beyond any law, accessibility is an ethical commitment to making sure everyone can access your mission.
By focusing on color contrast, readable text, alt text, keyboard navigation, and accessible media, you can create a more welcoming experience for every visitor. Let's work together to make the internet a place where no one is left behind.
At Sereth Design, we help nonprofits and impact-driven organizations build brands and websites that move people to act. See how we've done it in our case studies or start a conversation about your organization's next chapter.
