A free resource for nonprofit organizations, NGOs, civil society organizations,
charities, schools, public sector agencies & other mission-based agencies
by Jayne Cravens
via coyotecommunications.com & coyoteboard.com (same web site)
When your initiative is preparing its first web site, or preparing to redesign its web site, you should require that the designer - whether that's an employee, a paid consultant or a volunteer (unpaid) - to make the site accessible for the widest range of people possible.
Web sites and other online resources that are not designed to be accessible for people with disabilities lock out potential customers, clients, employees, volunteers, donors and other supporters. People with disabilities in the USA comprise more than 19 percent of the people living in the country, an even larger percentage than Hispanics and Latinos, who are the largest ethnic, racial or cultural minority group in the USA, making up 15 percent of the population. Can any nonprofit, non-governmental organization (NGO), civil society organization, charity or other mission-based organization really afford to leave out anyone, including such a large segment of our society?
Plus, creating accommodations online for volunteers with disabilities ends up making the online experience better for EVERYONE. Don't be surprised when an online ends up being something many other people value. For instance, by captioning all of your videos, you make them more appealing to people who want to experience the information but are in a public space and don't have earphones and don't want to disturb people around them. Captioning also helps people who aren't native speakers of the language the video is in.
When recruiting, whether for a paid position or a volunteer, you have every right to say in your recruitment message:
A web designer is needed who can understand the basics of web site accessibility standards (such as making sure there are titles on every web page, using ALT text properly, using proper headings, never using "click here" or "read more", etc.) and has a commitment to applying the most common techniques to make our web site accessible. We would prefer someone who has taken at least one course, of any length, regarding some aspect of web accessibility, and ask that you say what the name of this course was, the sponsoring organization, and when you took it in your application for this role.
Add titles to all web pages.
People using screen readers - where the content is read
allowed on a voice - rely on page titles for navigating a
site. The added bonus is that, when you share a URL on a
message board, many times the title on the page will
automatically be put in rather than the URL.
Never use "read more" or "click here" links on your
website; use something descriptive.
People using screen readers - where the content is read
allowed on a voice - often are looking for specific
information on a web page, and may just want to hear the links
in order to quickly go to the page they want. If your site's
links all say "read more" or "click here", it doesn't mean
anything. Descriptive links - list of our board of directors,
list of our programs, information about volunteering, etc. -
make a site more accessible.
Make sure every web page has identified the language of
the page.
This is done in the HTML element, using the lang attribute
with a two-character code value set to the current language of
the page ("en" for English, for example).
Add alt text to photos and other graphics.
This is another feature that helps people using screen
readers. Complex images (i.e., charts and graphs) should have
descriptive text near the image (perhaps as a caption). You don't repeat what might be in a photo caption
but, rather, actually describe the photo: young children
smiling broadly at the camera or about 50 people
in the stands of a sports stadium, shouting a reaction to
something on the field or small puppy playing with
a toy, etc. Check out these
recommendations from the State of Illinois
Add labels or titles for all fields on a form.
A form that people use to express interest in
volunteering should have appropriate titles, so if someone
is having the form read to them by a screen reader, that
person can understand it.
Make sure headings are accurate.
This is another adjustment that makes a site more accessible
for someone using a screen reader.
Change headlines from HTML that designates text size to
HTML headline designations instead.
Instead of the main headline and subheads on the page sized by
HTML (font size=5, for instance), use H1 for the main headline
on the page and H2, H3, etc. for subheads. The heading
hierarchy is meaningful. Ideally, the page does not skip
levels.
Properly design tables.
Tables have a logical reading order from left to right, top to
bottom, tables should be labeled with alternative text, data
tables should have the entire first row designated as a Header
Row in table properties, Header cells should be tagged with
the TH tag and data cells should be tagged with the TD tag.
Careful with PDF files.
Most PDF files are not accessible for screen readers, and in
addition, they are often are difficult for someone with low
vision, using a screen enhancer, to read as well. There are
particular ways you can make a PDF file accessible, but it
starts with the document you create BEFORE you convert it to a
PDF. This
resource from UC Berkeley can help, but it requires you
to have knowledge beyond just basic HTML. If you have a form,
consider providing
that form in a Google Drive form. If the PDF is just one
or two pages of text and graphics, consider presenting it as a
web page instead of a PDF file (that will improve your site's
SEO as well!). If it's a report with many pages, have a
detailed description on a web page that links to the report
regarding what the report is and offer an executive summary in
text on a web page.
Rescan historic or art material you have scanned into PDF
that, in their current form, would be hard for someone with
low vision, using a screen magnifier, to read.
This free guide from the University of South
Florida can help them.
Caption your online videos - and improve captioning
generated automatically.
Captioning videos on YouTube is so incredibly easy. In fact,
YouTube does this automatically - but you need to go in and
listen to the audio and correct how YouTube has interpreted
what is said. I taught myself to do this in about 30 minutes -
many volunteers already know how to do it!
Create audio descriptions of your image-only online
videos.
This can be a really fun project for a volunteer, to go
through a short video where you have no voices, or few voices,
mostly images and music, and lay in an audio description of
what is happening, so that someone who has a sight-impairment
can get your message and info too!
Create transcriptions of podcasts, speeches and other
recordings.
A quick way to do this is for the volunteer to upload the
podcast privately to his or her own YouTube channel, let
YouTube automatically close caption the audio-only "video",
then download the caption file and correct it, then post it as
a transcription.
This page from the W3C Web Accessibility Initiative (WAI) offers simple steps with detailed guidance so that you can get an idea whether or not accessibility is addressed in even the most basic way on a web page - it's an excellent guide for volunteers at a web site accessibility fix-a-thon.
Note that many of these tasks could be done by online volunteers. Or, you could host a One Day Accessibility Fix-A-Thon of Volunteers, where you ask them to bring their laptops, you provide some snacks or even a full meal, and they sit around your conference room table and concentrate on these tasks for a half or full day. Volunteers find these kinds of hackathons VERY appealing!
If you want to encourage your web manager, whoever that person is, part-time, full-time, volunteer, whatever, to know more about accessibility: the government of the State of Illinois provides Implementation Guidelines for Web-Based Information and Applications (formerly Illinois Web Accessibility Standards) and, as a non-web site designer, I find it easier to understand than most other guidelines out there. These guidelines are good to ask your web site designer and manager - no matter that person's web design skill level, to follow. These guidelines from the state of Illinois also provide links to resources from other organizations:
And if your nonprofit relies on video to deliver its message,
your staff should review Making
Accessible Media: Accessible Design in Digital Media,
a fully accessible FREE open access online course, offered
in both French and English, from Humber College Institute of
Technology and Advanced Learning in Canada. It focuses on the
representation of disability in media, video captioning, audio
transcription, described video and live captioning for
broadcast, alternative text for image description and tutorials
on how to make accessible documents and presentations. While
this course offers practical insight into how to make media
accessible in the final stages of production, it also reminds
that accessibility should not be an afterthought but part of
the initial development process. One of the mandates of this
course is to raise awareness of the systemic, attitudinal,
physical, information and technological barriers that
interrupt accessibility in current media practices.
Be careful in using platforms like WordPress, Wix, Weebly or other drag-and-drop web development platforms - the templates they provide are NOT made to meet accessibility guidelines. If you are going to use such a platform, use it only for your first, initial, basic website, and have a plan (and budget accordingly) to replace that initial, basic website entirely with a more robust and more accessible site.
Also, accessibility "skins" or overlays do NOT WORK the way they promise! Many accessibility advocates view these kinds of products as harmful and a step backwards for digital accessibility efforts. An accessibility overlay is JavaScript that is written with the goal of helping to fix accessibility issues on a website or web app. Overlay code is applied after the website or web app is rendered by the browser, to transform it. Two examples of permanent plugins are accessiBe and AudioEye - I refuse to link to them, but I'm naming them so you can avoid them. Here are some strong arguments against these companies:
Should I use an accessibility overlay? (NO!) from a11yproject.com.
Honor the ADA: Avoid Web Accessibility Quick-Fix Overlays by accessibility advocate Lainey Feingold.
Blind people, advocates slam company claiming to make websites ADA compliant.
Remember: the Web is a primary resource regarding education, employment, access to information about government (including benefits), commerce, health care and more, and to not make your web site accessible is to say to people with disabilities: we don't want you to use this site. Access to information and communications technologies, including the Web, is now a basic human right. Also, accessible design improves overall user experience and satisfaction. It is most efficient and effective to incorporate accessibility from the very beginning of projects, so you don’t need go back and to re-do work.
I consider anything beyond HTML to be advanced web site design/development. Whereas the aforementioned basic techniques for accessibility are easy enough that even I can do it, techniques beyond this require people who have either taken classes in web design and development or have experience in such. Advanced web designers or developers can:
When recruiting for a web designer or developer, whether paid
or volunteer, you have every right to ask for people who can do
all of the above. You can say in your recruitment message,
"Candidates for this role should have a basic understanding of
web accessibility, know how to use CSS, and know how to build a
web site that a non web designer can make simple text changes
to." you can also ask for someone who "has taken at least one
course in accessible web design."
You might want to ask candidates if they understand this guidance: for web sites that use CSS, consider this tweet from accessibility expert Denis Boudreau that says
Wanna fix about 35 to 40% of navigation #accessibility issues for sighted keyboard users at once?
Go to your CSS and get rid of every occurrence of:
{outline: none;} or {outline: 0;}
STOP taking the visible focus indicator away from end users.
Yeah. It’s really that simple.
I'm not a web designer so I really don't entirely know what
Denis is talking about, but if he says it's "that simple" then,
for someone who knows what CSS is, it really will be "that
simple" for those that use CSS.
For more guidelines on accessible web design, see:
How to Meet WCAG (Web Content Accessibility Guidelines) - A Quick Reference)
Wix checklist for improving a site's accessibility
Also see Web Design Guidelines for Low Bandwidth. This resource is from Aptivate, an NGO providing IT services for international development.
This is a for-profit company, Codecademy, and it offers some free HTML and CSS lessons that are simple to follow and highly useful for anyone looking to slightly edit or personalize an existing web site.
Completely new to code? HTML Cheatsheet is a great, VERY basic resource, and HTML Dog is a helpful, more advanced reference site regarding coding (I use them frequently).
my home page my consulting services
& my workshops &
presentations my credentials & expertise Affirmation that this web site is
created & managed by a human. My book: The Last Virtual Volunteering
Guidebook contact me or see my schedule Free Resources: Community Outreach, With & Without
Tech Free Resources: Technology Tips for Non-Techies Free Resources: Nonprofit, NGO & other
mission-based management resources Free Resources: Web Development, Maintenance,
Marketing for non-Web designers Free Resources: Corporate philanthropy / social
responsibility programs Free Resources: For people & groups that want
to volunteer linking to or from my web site The Coyote Helps Foundation me on social media (follow
me, like me, put me in a circle, subscribe to my newsletter)
how to support my workTo know when I have developed a new
resource related to the above subjects, found a great
resource by someone else, published
a
new blog, uploaded a new
video,
or to when & where I'm training or presenting, use any
of the following social media apps to follow me on any of
these social media platforms:
Disclaimer: No guarantee of accuracy or suitability is made by
the poster/distributor of the materials on this web site.
This material is provided as is, with no expressed or implied
warranty or liability.
See my web site's privacy policy.
Permission is granted to copy, present and/or distribute a limited amount of material from my web site without charge if the information is kept intact and without alteration, and is credited to:
Otherwise, please contact me for permission to reprint, present or distribute these materials (for instance, in a class or book or online event for which you intend to charge).
The art work and material on this site was created and is copyrighted 1996-2026