Check out how you can make your website more accessible!

8 Ways to Make Your Nonprofit Website More Accessible

This post was contributed by Elevation and written by Lauren Uhl.

Today in the United States, all those with disabilities are entitled to equal access in public facilities. This means building ramps and elevators, accommodating bathrooms with handicapped stalls, sectioning off one/two parking spots in the front, and more. Think of the internet and your website this same way: you have to intentionally consider those with disabilities when creating and maintaining your website. Such actions should not be considered laborious favor: they are, in fact, legally required. Those who proactively consider accessibility measures on their website will allow all types of users to partake in their online experience, whilst avoiding potential lawsuits. Check out these 8 ways to make your website more accessible. 

Download this information in a handy infographic here

What is Website Accessibility?

Let’s backup a little bit: what is website accessibility all about? Similar to accessibility in the real world, website accessibility is designed to accommodate diverse users on the internet. This includes those with auditory, visual, neurological, physical, and speech special needs, as well as those with old age and slow internet. Nonprofit website designers must consider ways their color layouts, text content, and overall structure can reach these diverse populations. 

Accompany color indicated text with additional indicating text/images

We use color indications in many places around the world: with stoplights, warning signs, and more. While it may feel natural to change content colors based on connotations (i.e. red means stop/important, green means good/safe…) those maintaining and designing websites should keep colorblind, visually impaired, and epileptic populations in mind. Of course, you can change the text color for meaning, but that should not be the only indication of meaning. This means (for example) marking important content in red AND accompanying it with additional text that reinforces the text’s importance. 

Use appropriate contrast on text and images

It’s also important to color contrast on your website. According to Web Accessibility In Mind, texts and images should maintain a contrast ratio of 4:5. While larger text requires a contrast of at least 3:1, smaller text, images, and logotypes, in general, are exempt from such requirement. You can check your color contrast here for more information.

Use a minimum font size of 16

The bread and butter of your nonprofit website is (most likely) the text content. Therefore, it’s absolutely essential that the text is accessible. 

The first and probably easiest fix is making all text a minimum size of 16. Of course, you can make the text bigger, but any smaller may result in a legal issue.  

Add closed captions and/or transcripts for videos 

Next, ensure that all videos have closed captions and a manuscript to accompany it. That way, those with hearing impairments/faulty computers can still access information shared in the video. 

Use Alt-text on all images 

Check that images have a descriptive blurb, or alt-text. While every content management system is slightly different, they all should have a way to add alt-text to your images. 

Allow flexible navigation time-limits 

While seamless navigation is already a strong priority for user experience, it also helps those in underdeveloped areas and those with faulty service access the website contents. 

Website designers should allow users flexible time limits. Some websites force users to log back into the website after a given time period: such improves security, but it also can hurt those with slow internet. Be sure to add flexibility into time-sensitive areas in your website so you can maintain some level of security while also accommodating users with slower service. Whether you add warning messages on time limits or some other indicating method, this will improve both user experience and accessibility in developing areas. 

Allow full website navigation via keyboard actions

The website should be completed navigable through keyboard actions. That way, users without a computer mouse can still be able to jump around the website. Elevation Web uses the wordpress plugin from userway.org

Add concise text for error messages

Finally, when coding error messages, be sure to make them concise. Simply displaying an icon (i.e. red exclamation point) may mean “warning” to someone from western cultures, however, such may confuse other demographics. If you want to include some image/icon with a warning message, be sure to accompany it with a concise explanation for the error. 

Software Help in Accessibility 

To be safe, website maintenance staff should assess the website’s accessibility bimonthly or more. Below are some helpful resources for accessibility assessments:

  1. Google Lighthouse
  2. Userway.org
  3. WordPress accessibility tools and alt text finder identifies 

This post was contributed by Lauren Uhl at Elevation.

Lauren Uhl is a copywriter at Elevation, a full-service nonprofit web design agency. Lauren earned her B.A. in English Literature, Secondary Education, and Philosophy from Gonzaga University and is currently studying for her M.Ed. at the University of Portland. Lauren believes writing can change the world: that’s why she teaches middle-schoolers Language Arts and History through a social justice lens. More than anything, she hopes that she can find the right words when people need it the most.