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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.