Help for Church Webmasters

Is Your Site Accessible to Everyone?

Imagine that you are visually impaired and you are trying to learn about the church you attend. Could you do it from your church’s website? What about if you were deaf? Maybe you have restricted mobility (paralyzed), can you navigate your website without using a mouse?

Part of my (paying) job entails being a webmaster for a military site. In June a law was passed (Section 508) that says all Federal sites have to be accessible to people with handicaps. While this law does not directly affect church webmasters, we certainly should be leading the charge in making sure everyone can access our sites. After all Jesus died for everyone.

So how does one make their site accessible? You have to think about who is going to be accessing the site when you design each part. For example, if you rely solely on color to distinguish between different items, colorblind people (there are a lot of them!) might have trouble using your site. If you have lots of audio and/or video on your site, it’s going to limit how deaf people use your site. If you use flash to provide the buttons to navigate your site, people who have a hard time using a mouse will not be able to use your site. If you use lots of graphics or drawings on your site, visually impaired people who are using a speech synthesizer are going to miss a lot of your content.

Wow, that seems like a lot of stuff! It is a bit overwhelming, but it’s not as hard as it might seem. If you are following good design techniques, you probably are a better part of the way there. Here are some quick tips to help get you started.

Quick Tips

• Images & animations. Provide ALT tags, describing the content of the visual elements. The more important and/or complex the image, the more descriptive your ALT tag should be. ALT tags are easily filled out in most GUI-based HTML editors. Visually impaired people use the ALT tag to get the meaning of the graphic. For example, if you use the standard Adventist logo on your site, which of the following would be more descriptive to a person who had never seen it before: “Adventist Church logo”, “Bible with Holy Spirit flame – Downey Adventist Church logo”? There is also the fringe benefit that you can use some of your key words (to help search engine ratings) in your text descriptions.
• Check your work. Nothing throws off a screen reader more than non-standard, incomplete or incorrect HTML tags. An online HTML validation program is found at http://validator.w3.org/
• Organize your pages well. Use headings (<H1>, <H2>, <H3> etc), lists and consistent structure. Where possible, break up long lists into smaller sublists, with appropriate labels or headings. Use Cascading Style Sheets (CSS) for layout and style wherever possible. However:
• Don't depend on CSS or other visual elements to convey meaning. For example, if you color code certain words with CSS, the colors will be lost in text-only browsers, screen readers or to color blind people.
• Hypertext links. Links should be descriptive of their destination. For example, avoid "click here". Many screen readers allow the user to listen to the links out of context.
• Frames. Use frames cautiously, always providing NOFRAMES content and giving titles to each frame. (Remember to keep your NOFRAMES content up-to-date.) My personal recommendation is to avoid frames like the plague. Frames make design easier for the webmaster and make it harder for everything else. We want the browsing experience to be easy for everyone, even if that means more work for the webmaster.
• Preview in various browsers, including old versions and a text only browser, such as Lynx to ensure that your pages are still intelligible. I personally have enlisted the help of some friends who have Macs and webTV to help me check out my site.
• Tables. Tables with tabular data should be well-organized and summarized for clarity. When Style Sheets are more widely supported, it will be better to use CSS instead of tables for formatting purposes - just be sure that your formatting “decays gracefully” in non-CSS browsers, such as Netscape 3.0. For now, I recommend that you continue to use tables.
• Multimedia. Provide captioning and transcripts of audio, and descriptions of video. This is not only good for the hearing impaired, but I know many people who would prefer to print something and read it versus listening to it online (especially if the audio is not of a high quality or they have a slow internet connection).
• Image maps. Use client-side MAP, and provide ALT tags for links. When you make a large image and you can click on different parts of the image to go to different pages it is extremely difficult for visually impaired people to navigate your site. Always provide alternative text links at the bottom of the image map.
• Scripts, applets, & plug-ins. Provide alternative content in case the features are inaccessible or unsupported.
• Graphs & charts. Summarize or use the LONGDESC attribute. Note that LONGDESC is not widely supported yet. I recommend summarizing for now.

There’s More

Remember that making your site accessible is only part of the solution. A handicapped person will want different information. Are bathrooms wheelchair accessible? Do you have a deaf interpreter? So try to cover issues like that as well.

Always be sure to have a way for someone to contact you if they can’t find the answer online. It’s going to be difficult to cover every single foreseeable situation, but if you make it so they can easily request the information that is needed, you have succeeded.

More Resources

We will cover more on this topic in later issues. But for now, here are some web pages that I recommend to help you get started.

Introduction to Web Accessiblity - http://www.webaim.org/info/intro

Some brief HTML examples to show how to make your pages more accessible - http://www.webaim.org/Resources/samplemarkup.htm

A Section 508 checklist (very detailed) - http://www.webaim.org/standards/508/checklist

A quick list section 508 checklist, with links to how to fix these issues - http://www.niehs.nih.gov/websmith/508/rule.htm

A bunch of section 508 links - https://sentinel.nawcwpns.navy.mil/~508/

Making your site compliant using DreamWeaver - http://www.webaim.org/howto/dreamweaver

Making your site compliant using Frontpage - http://www.webaim.org/howto/frontpage.php

Please don’t hesitate to contact me if you have questions regarding this topic.

See ya next time,

Bill

Everything in this newsletter is freely distributable – unless otherwise noted. Please forward to your friends.

Send me an email if you would like to get your own copy of this newsletter. It is published whenever I find something of interest to send out – roughly twice a month. Feel free to send me ideas and suggestions for future issues.

If you would like to be removed from this distribution list, please send me an email and let me know.

It would be way cool if you could mention this resource somewhere on your webpage! You can link to Help for Church Webmasters at http://www.downeychurch.com/HelpForChurchWebmasters.html