Require that your web designer create an accessible web site

Whether it's an employee, a paid consultant or a volunteer, require that your web site be designed to be accessible.

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.

There are some basic things that any web designer, no matter how basic that person's abilities might be, can do to make a more accessible web site (none of this requires any special training to do - you can learn how to do this just by searching for how on any web search engine). They can:

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.

Advanced Techniques

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:

use CSS
quickly learn how to make a PDF file accessible, or can use this resource from UC Berkeley can help to quickly learn how.
create menus where a user makes a choice that do not require someone to hold down more than one key to make a choice (which makes a site inaccessible for someone with issues regarding their hands)
>create web sites that do not require a mouse in order to navigate (a user can navigate via just a keyboard)
create forms and surveys that do not increase a user's anxiety (gives users plenty of time to complete an action, allows users check their answers before they submit them, etc.

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)

Web Accessibility Tutorials

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

Also see:

Make All Volunteering as Accessible as Possible
Tips for creating an accommodating and welcoming environment for volunteers with disabilities.
Short-term Assignments for Tech Volunteers
There are a variety of ways for mission-based organizations to involve volunteers to help with short-term projects relating to computers and the Internet, and short-term assignments are what are sought after most by potential "tech" volunteers. But there is a disconnect: most organizations have trouble identifying such short-term projects. This is a list of short-term projects for "tech" volunteers -- assignments that might takes days, weeks or just a couple of months to complete.
One(-ish) Day "Tech" Activities for Volunteers
Volunteers are getting together for intense, one-day events, or events of just a few days, to build web pages, to write code, to edit Wikipedia pages, and more. These are gatherings of onsite volunteers, where everyone is in one location, together, to do an online-related project in one day, or a few days. It's a form of episodic volunteering, because volunteers don't have to make an ongoing commitment - they can come to the event, contribute their services, and then leave and never volunteer again. Because computers are involved, these events are sometimes called hackathons, even if coding isn't involved. This page provides advice on how to put together a one-day event, or just-a-few-days-of activity, for a group of tech volunteers onsite, working together, for a nonprofit, non-governmental organization (NGO), community-focused government program, school or other mission-based organization - or association of such.

Making certain volunteers feel unwelcomed because of your language and Do you welcome people with your language?, blogs I wrote after I observed a volunteer recognition event description on Facebook and a post on Facebook that implied something about firefighters.

Return to
Coyote Communications' Web Site Resources

Discuss this web page, or comment on it, here.

Quick Links

my home page

my consulting services & my workshops & presentations

my credentials & expertise

My book: The Last Virtual Volunteering Guidebook

contact me or see my schedule

Free Resources: Community Outreach, With & Without Tech

Free Resources: On Community Engagement, Volunteering & Volunteerism

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 work

To know when I have developed a new resource related to the above subjects, found a great resource by someone else, published a new blog or a new Tech4Impact email newsletter, 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:

Jayne Cravens & Coyote Communications,
www.coyotebroad.com

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