BLOGLatest From Our Blog

Web Accessibility: 6 Tips to Make Your Nonprofit Website WCAG Compliant

Web Accessibility: 6 Tips to Make Your Nonprofit Website WCAG Compliant
Candace Bozek
November 14, 2019

Web accessibility is a growing initiative impacting websites in all industries. Particularly for nonprofits who serve disadvantaged groups or people with disabilities, web accessibility should be a priority for your organization’s digital presence.

Accessible websites are designed to work with assistive technologies, like screen readers, to give users with disabilities access to the same information, products, or services that are available to everyone.

While many web content accessibility guidelines (WCAG) require the help of a developer, there are still many steps you can take on your own to make your nonprofit website more accessible. Armed with a content management system (CMS) that allows you to make edits yourself, you can significantly improve the accessibility of your website by implementing the following tips.

  1. Use high contrast colors and easy to read fonts.
  2. Write headers for your content.
  3. Add alt-text to your images.
  4. Offer media alternatives for videos.
  5. Include important links in your footer.
  6. Add an accessibility widget.

Using high contrast colors and easy to read fonts is a web accessibility best practice

1. Nonprofit Web Accessibility Tip: Use high contrast colors and easy to read fonts

Creating an accessible nonprofit website starts with the design. Choosing high contrast colors will make it easier for people with visual impairments to view and understand your content. WCAG 2.1 guidelines require a contrast ratio of at least 4.5:1 for text and graphics.

Nonprofit website example of high contrast colors and easy to read fonts

The highest contrast ratio is black text on a white background. Keep in mind that the reverse (white on black) is actually hard to read. It is also important to use fonts that are easy to read. Hand-drawn or graphic fonts with unique lettering can create confusion for the reader. Stick to fonts with clear lettering and enough text spacing. Serif fonts are typically easier to read in small-size print but sans-serif fonts are better for web content.

This doesn’t mean that your website design has to be boring. The right nonprofit website theme will allow you to strike a balance between attractive design and accessibility.

Writing headers for your content is a web accessibility best practice

2. Nonprofit Web Accessibility Tip: Write headers for your content

Clearly titling your content makes it easier for people with visual disabilities and those using screen-reader technology to jump to different sections and find the information they need.

Header tags must follow the correct order of sequencing (h1, h2, h3, h4, etc…). The title of the page should be the only text with the <h1> tag and the main section headings should use the <h2> tag. Titles within <h2> sections should use <h3> and titles within that should be <h4> and so on. You cannot skip header sizes such as jumping from a <h2> tag to a <h5> tag on a page. A good content management system (CMS) with front-end editing will allow you to select the heading size without having to code this yourself.

Nonprofit website example of header text

Adding headers to your content is not only good for accessibility but it can also boost page SEO to improve your search engine rankings. That’s because titling your sections makes it easier for people and search engines to understand what your content is about.

Adding alt-text to your images is a web accessibility best practice

3. Nonprofit Web Accessibility Tip: Add alt-text to your images

Alternative text or alt-text is a word or phrase that is added to the HTML code of a website to describe the appearance of an image. Alt-text is used for screen-reader technology to assist people who are blind or have visual impairments.

Most modern CMS platforms will allow you to add alt-text on the front end of your website when you add an image or in the back end under your media gallery. With the Morweb platform, you can easily add alt-text when you add a new image or if you highlight an image and select image options.

Remember that your alt-text will be used by people who can’t see the image so the more descriptive you are, the better. Websites without alt-text or unclear descriptions will create an unpleasant user experience for those who aren't able to clearly see the image.

It is also a good practice to name your images using descriptive keywords. That way, it will make it easier to write your alt-text for images and it will boost SEO for those keywords.

Offering media alternatives for videos is a web accessibility best practice

4. Nonprofit Web Accessibility Tip: Offer media alternatives for videos

According to WCAG 2.1 guidelines, you must provide alternatives for all time-based media. Videos can’t use alt-text so you’ll need to use other methods to explain what it is about. The best way to accomplish this is to provide a written transcript of the video or captions in the video.

Nonprofit website example of a video with a button to download a transcript of the video

If you don’t have a large budget to add captions to your videos, there are several free online tools you can use. If you have audio recordings like a podcast, you should provide a transcript for those with hearing impairments. A simple way to offer a transcript on your website is by providing a link to a PDF. Make sure to clearly label the link so that it is easy to find by screen reader technology.

Including links in your footer is a web accessibility best practice

5. Nonprofit Web Accessibility Tip: Include important links in your footer

Offering important links in your footer is a great way to offer multiple ways to access a web page. Giving your users more than one way to find a page will help people find information in a manner that best meets their needs.

Nonprofit website example of links in the footer of the website

With that being said, it isn’t necessary to write out every link on your website in the footer. List your most important pages like About, Services, Volunteer Sign-Up, Contact, and of course, your Donation page.

It is also a good practice to offer a site map in your website's footer that allows users to see a full list of all of your web pages and jump to the one they want. Particularly for people who are blind, using a traditional navigation menu can be cumbersome. Having a simplified list of pages will improve their user experience.

Offering a web accessibility widget is a web accessibility best practice

6. Nonprofit Web Accessibility Tip: Add an accessibility widget

One of the most impactful steps you can take to make your nonprofit website more accessible is to offer an accessibility widget. An accessibility widget allows users to:

  • increase/decrease font sizes
  • change the font type to non-serif
  • highlight links
  • change the website to greyscale

These options enable people with disabilities to customize their user experience on your website to best fit their needs. It will also help you meet several important WCAG 2.1 guidelines like 1.4.4 Resize text, 2.4.9 Link Purpose, and 2.1 Keyboard Accessible.

Morweb's web accessibility widget for nonprofits

Not all website platforms offer this feature. Some CMS platforms such as Morweb offer built-in features, while open-source platforms like WordPress or Drupal might allow you to install a third-party plugin.

The Gist

Web accessibility is more than just a trend, it will soon become standard practice for web design. While organizations are not yet required to comply with WCAG guidelines, improving your website’s accessibility today will prevent you from having to do a complete overhaul in the future.

If your current CMS doesn’t support accessibility features, it might be time to switch. Consider Donorbox’s list of top website builders for nonprofits and check what web accessibility options are available for each platform. If you are looking to improve the accessibility of your Morweb website, send us a message to learn more about our web accessibility features for nonprofits.


Request a demo

Morweb provides the right mix of strategy, design, non-technical software, and customer support to manage and grow not just a website, but an engaging online presence.