Accessibility: Make Your Nonprofit’s Website For Everyone

This may sound obvious, but not everyone who uses your site will use it just like you. If you’ve got a laptop with a keyboard and mouse, it’s important not to forget the users with touch screens devices. Similarly, some users may rely on “assistive technology” like a “screen reader” program that reads a computer out loud for visually impaired folks. It’s eye-opening to watch the amazing range of ways people visit websites in videos of people using assistive technology.

To make sure your website works for as many people as possible, take special care to focus on website accessibility. The nonprofit sector is full of people working hard to make the world a better place. By making your WordPress site accessible, you’ll be able to serve more people and include everyone who wants to support your work.

The Accessibility Relay

Making an accessible website is a team effort. WordPress is improving its own accessibility. You also need the authors of plugins and your website’s theme to make them accessible. Don’t take this for granted. That’s why there’s an “Accessibility section of recommended plugins and a tip to search for “accessibility-ready” themes.

The final leg of the relay is up to you! Entering and formatting your website content for accessibility is important and requires learning a few important techniques.

Formatting Text for Accessible Websites

One fabulous side benefit of accessible content is that it tends to be easier for everyone to use and often improves your search ranking at the same time! This article about writing accessible content from one of the recommended theme authors is a great read.

In particular, to make a site accessible you must:

  • Fill in the “Alt Text” field when uploading images
    That field should describe the image in 3-7 words for anyone who can’t view it.
  • Use sufficient contrast so everyone can read your text
    No one likes to read low-contrast text (light gray or colors) and some people simply can’t. You can test color contrast as long as you know the “hex codes” of the colors you’re using.
  • Break up long pages with headings
    Headings provide both visual and technical summaries of your page’s outline. Using headings correctly is crucial for good accessibility.
  • Use an accessible forms plugin
    Using one of the recommended form plugins with a corresponding accessibility-fixing plugin (when available) for best results.

To further improve your site’s accessibility, you should also do all of the following:

  • Write simply
    Aim for writing at a ~7th grade level with short sentences and paragraphs. Use lists when possible. Tools like Hemingway let you easily test grade level and make other useful suggestions for simplifying your writing.
  • Make descriptive links
    No more “click here” and “read more”. Describe the content of the linked page (e.g., our services) or the action a link takes (e.g., Buy Tickets).
  • Don’t underline text that’s not a link
    Did you try to click on those fake links in the last bullet? Enough said.
  • Caption & Transcript
    Provide captions and transcripts for video and audio whenever possible. This accommodates folks who can’t hear as well as those who learn better from reading.
  • Avoid PDFs
    There are lots of good reasons to avoid PDFs including accessibility. Making PDFs accessible is really hard and they never provide a good user experience in the web browser.

Testing Your Site for Accessibility

It’s surprisingly easy to do basic accessibility testing! Some tests don’t even require any special tools. Here are a few tests you can do right now! Try them on this site and then your own.

Test 1: Zoom to 200%

Many people with poor eyesight will zoom your website so they can read it, some as much as 3x or more.

Use your browser settings or the shortcuts CTRL +/CMD+ to zoom your browser to 200%. You should still be able to read and navigate the site easily without any horizontal scroll bars.

That’s it! You just completed your first website accessibility test! Generally, a site that is responsive should pass this test.

Test 2: Navigate with a Keyboard

Many people use only a keyboard to control their computer. That may be for convenience or if using a mouse is difficult or impossible. Your site should be 100% usable with only a keyboard.

Test this yourself by:

  1. Navigate to your site. (Refresh if you’re already there.)
  2. Press the TAB key 1 or more times.

As you do this, you are checking for the following things:

  1. Can you see where the “focus” of the keyboard is?
    A proper website will highlight links and other items as you pass by them with your keyboard.
  2. Can you access and activate every item?
    When you’ve hit TAB a few times and can see what you’ve “focused”, hit ENTER to activate it. This is like clicking a link with a mouse. A majority of your site should work this way. A few other things may require using arrow keys (radio buttons) or the space bar (check boxes).

Fixing this may require help from a designer and/or developer, but knowing is the first step!

Install tota11y

tota11y is the most user-friendly accessibility testing tool. Their home page has a simple “installation” section to help you install it in your browser. You can also use WP Tota11y or wa11y to install tota11y for all logged-in users of a WordPress site.

Wondering what’s up with “a11y”? It’s industry shorthand for “accessibility” since there are 11 letters between the “a” and “y”. For instance, follow #a11y on Twitter to see accessibility conversations!

One installed, tota11y will help you test for accessible:

  • Headings
  • Color Contrast
  • Link Text
  • Form Labels
  • Image Alt Text

Many of these problems—especially headings, link text, and alt text—may be immediately fixable when you find them! Read the tota11y results closely as it tries to help explain the problem and suggest solutions.

Resources to Keep Learning

There are lots of amazing websites and newsletters with information about web accessibility. Here are three of the most beginner-friendly ones: