Over the past 10-20 years much has been made about making churches and church buildings accessible to everyone.

Symbols have been removed, language has been altered, programs have been hidden or brought to the forefront and many mega church buildings now look a lot more like your neighborhood mall than your cathedral of yesteryear.

But while the focus has been on welcoming and accepting others into our physical realms, a lot of faith communities haven’t been as active in making their virtual realms quite so welcoming.

http://www.freebibleimages.org/illustrations/

Notwithstanding the fact that most faith websites are geared primarily towards active members of the individual communities (as opposed to the surrounding community), many webmasters don’t realize the need for making their websites accessible to those with disabilities as well.

Even with my own websites I do a poor job of making sure the websites I work on are fully “up to code” when it comes to accessibility.

Once the site looks good to me — I don’t always think much about how it might appear to someone with a visual or hearing impairment.

But there are some fairly simple ways we can step up and make our websites more accessible to everyone.

Use ALT attributes.

One of the easiest ways to make your site accessible to those with visual disabilities is to use ALT attributes in your image tags. ALT attributes provide a text alternative to non-text elements like photos. When an image fails to load or a screen reader visits your site, the text is displayed or read as an alternative to the image.

Example:

<img src=”pig.jpg” alt=”Photo of a pig on a farm”>

As a rule of thumb don’t include vital navigational information in graphics, videos or Flash. Screen readers and search engines won’t read any text within those elements. Also, users on a mobile or slow connection may not always download the graphics.

Note: While IE 9 will display ALT attributes as tooltips, this isn’t the proper behavior based on HTML standards. If you want text to display when you hover over an image, use the title attribute instead.

Use unique title attributes in links, images and other content.

While hyperlinks, images and other content is very useful within the content of your website, they can cause confusion when links aren’t properly titled — especially if you’re using similar phrases to link to different content. Title attributes provide tooltips for most users but also add additional clarity for readers who might be using screen readers.

Example (hover over the links to see the difference):

<a href=”http://en.wikipedia.org/wiki/Baptism” title=”What we believe about baptism”>doctrine statement</a>

shows: doctrine statement

<a href=”http://en.wikipedia.org/wiki/Eucharist” title=”What we believe about the Eucharist”>doctrine statement</a>

shows: doctrine statement

Include language declarations on all your pages.

This goes for both your HTML or XHTML language of choice, as well as the natural language your content is written in (French, English, Russian, Spanish, etc.). This not only helps with validation but many writers of accessibility software depend on language declarations to choose the correct speech synthesizer.

Your language declaration will vary depending on which HTML version you build your site with but should be added at the top of each page within your site’s header.

Include style elements in your cascading style sheets (CSS) and not your HTML.

Use CSS to include all your style properties, including border sizes, colors, font sizes, etc. Don’t build style or structural elements into your HTML. Since most screen readers don’t read CSS, it can be confusing to navigate a page if unnecessary style elements are included in your HTML.

Use header elements properly.

Screen readers expect top level headings to be labeled with H1 tags, while sub headers are labeled with H2 and then H3 and so on. Keep your headers in proper order to avoid confusion.

This is an H1 header.

This is an H2 header.

This is an H3 header.

This is an H4 header.

Create unique titles for each page.

While your pages may look very different visually, to a screen reader they’re simply a page of plain text. Use unique titles for each page to avoid confusion. Also, if you’re including your site title in your title tag, include it after the individual page title. This will help with accessibility as well as your search engine optimization.

Test your pages with CSS and Java turned off.

View your pages like a screen reader would. Can you navigate your page without all the graphical elements and style? If not, get back to work. If you’re a Chrome user, you can install the Chrome Shades extensionfor a quick snapshot of what your page will look like without CSS or Java.

Test your pages with a screen reader.

There is a growing list of free options for screen readers that are available to everyone — or if you’re really serious about improving your accessibility you can purchase a full version screen reader. I’ve tried several of the free options and don’t have a particular favorite. Wikipedia has a great list of options. Pick one or two and give your website a listen. Does it make sense? Does the information still flow without the visual clues? Now try closing your eyes and navigating the website. It’s an entirely different world isn’t it?

Transcribe audio content.

While most of these tips are geared towards visual impairment, there is a large population of web users who are hearing impaired. I hesitate to include this tip because I know I have a website with more than 200 audio files that haven’t been transcribed and are thus inaccessible to a growing segment of the population. Whether it’s including closed captioning in your videos (YouTube will now automatically add closed captioning to your content – although it’s not 100% reliable) or posting a transcript of your pastor’s weekly sermons, imagine the outreach you could have by going the extra mile.

Even for the non-hearing impaired, having a transcript of a video or audio goes a long way in winning me over when I’m unable to stop and listen to content.

–

While this list isn’t an exhaustive list of improvements we can each make to our websites, they are a step in the right direction – and hopefully an opportunity to open our virtual doors even wider to an often overlooked segment of the population.

And to borrow our Methodist brethren, may we have Open Doors, Open Hearts and Open Websites.

So what have you done to improve your website’s accessibility? What did I leave off the list?

For more information, read the WC3 Web Content Accessibility Guildelines and the WC3 Web Accessibility Initiative. You can also read about the Section 508 requirements which serve as a baseline standard for all federal sites in the U.S.