Whoever thought that accessibility would become such a significant topic for website owners. Typically when we put up a website, it is natural for us to slap something together that looks good to us - often forgetting that there are other people (and non-people) who will be seeing the website in a completely different way. As website owners, it is our job to be soothsayers. There are many different combinations of variables that can effect your website, and making your website accessible to all people is more important than you think.

The subject of accessibility has come up several times in our forums. In order to explore the topic further with members, I started this thread. Some members in the past have claimed that website accessibility is not an issue that concerns them as the added benefit of making their site accessible does not seem to justify the cost of bringing their site up to web standards. Yet I'm sure Target Corporation, the mega-store Fortune 500 corporation, would disagree. Target is actually being sued by a blind student who is not able to access their website. What is really unfortunate is that Target could have easily avoided the expense of this lawsuit through some very simple changes to their site..

Whether you think the lawsuit is frivolous or not, it raises an important issue: web accessibility needs to be a concern for website owners. Whether you have a small shopping portal, a niche information site about Harry Potter, or a leading source of information for your industry, you really have no idea how all of your visitors see your website.

We Know The Power of Niche Marketing - Discover the Ultimate Niche

Niche marketing has found its home on the Internet. Marketer after marketer talks about just how easy it is to be successful on the Internet by finding a niche and becoming an expert in that niche. Niche marketing works simply because we reduce the number of competitors by serving a specific need that others are not serving.

Here is some news for you: the ultimate niche within your industry may be available just through making your website accessible. The sad truth of the matter is that most websites are not accessible to the visually impaired or handicapped. The natural effect of this is that those who are visually or otherwise handicapped have fewer websites to choose from. If you happen to be one of their choices for what they are looking for, you have a better chance of winning their business.

Web Accessibility is Relatively Easy

There are various levels of web accessibility. If you want to make it fully accessible, the W3C, those same people who gave us web standards for CSS and HTML, give us a standard for web accessibility. You could also get a great book which not only includes how to create accessible websites but also how to retrofit your site into an accessible website.

But in all reality, basic accessibility is relatively easy. There is a general rule to follow with accessibility: if your user needs to be able to see images, needs javascript enabled, cannot resize text, or if your site could not be read by a text based browser (such as Lynx), then you do not have an accessible website. Now in all reality there is a bit more to accessibility than this, but to get started today, you can do the following things.

Images

This is where most websites have the majority of problems. The W3C has recommended time and time again that all images include an ALT tag. Contrary to the advice of some SEO's, the alt tag is not a place for you to manipulate your keyword density, but rather a place to describe what an image is displaying. Below is an example of a poorly formed image tag and a properly formed image tag (assuming you are using XHTML).

Poorly formed image tag:
<img src="/images/logo.png" width="300" height="300" />

Properly formed image tag:
<img src="/images/logo.png" width="300" height="300" alt="Site Reference Logo" />

Of course this is nice, but there is another option, one which many people find more elegant. Using CSS and HTML, it is possible to never include another image tag in your HTML. Talk about ultimate accessibility! In fact, with the current design of Site Reference (as of Feb 17th, 2006), you will notice that there is no image tag for the logo. Below is the code for the logo:

<div id="pageHeader">
<h1>
<span>SiteReference - Internet Marketing Articles</span>
</h1>
</div>
The CSS for this is extremely simple:


h1 span {
display: none;
}
#pageHeader h1 {
background: url(../images/logo.gif) no-repeat bottom;
width: 300px;
height: 50px;
margin: 0;
padding: 0;
}

What is going on here is fairly simple. We have the main title for Site Reference, namely "SiteReference - Internet Marketing Articles". This is surrounded by h1 tags and span tags. In our CSS we ask the span tags to hide the text. Because these are in the inside of the h1 tags, we can now specify a specific style for the h1 tag which is where we put the image. The image shows up as a background image, and if we specify the width and height of the h1 tag, the background image should show up without any problems.

However, many people like to have their logo linked to the main page of their site. Well, this is possible as well. Consider the following HTML:


<div id=&#8221;header&#8221;>
<h1>
<a href="/index.php" title="Site Reference Home">Site Reference Main</a>
</h1>
</div>

The code is very simple and very clean, and is definitely readable by any reader regardless of whether a person is blind or is using a braille reader. To change this into a nice looking image, all it takes is a quick little CSS trick:

#header h1 a {
display: block;
text-indent: -10000px;
height: 50px;
width: 201px;
background: url(../images/common/main_logo.png) no-repeat;
text-decoration: none;
}

This bit of CSS specifies how the link within the h1 tag, which is inside the div tag with an id of "header" should act. All we do here is specify that this should be treated as a block element (as opposed to an in-line element), specify a height and width, the background image, and indent the text to a point where it is off the screen. Also be sure to specify that there is no decoration on the link if you want to avoid an ugly underline beneath your image.

Using CSS tricks like this definitely makes your site more accessible, but there is some reason to question whether or not search engines would interpret this as spam. Matt Cutts, the lead spam engineer at Google, recommends website owners to avoid using CSS to hide text, but this is within the context of using CSS to spam the engines. There are, however, many examples of successful websites with high PR's that use this technique (take a look at StyleGala for an example).

Javascript

Another significant source of problems for accessibility comes when a website uses Javascript to enhance the functionality of a website. With the popularity of AJAX and the introduction of the javascript libraries like Script.aculo.us, javascript has found a new popularity and acceptability among website owners.

Unfortunately, many website owners implement javascript elements or DHTML elements into their websites that limit the functionality of the site for those who either are not able to have javascript enabled web browsers or choose not to have javascript enabled browsers. The result for these types of web browsers is that when they come to these types of websites, they quickly leave as they are not able to use the website properly.

I am not going to go into the details of making your website web accessible if you use javascript for two reasons: 1) I certainly could not be considered an expert (calling me a novice is a stretch) in javascript, and 2) this article would get much longer than it already is. If you want to learn a lot more about using javascript in an unobtrusive manner on your website, take a look at this online tutorial on the subject.

Tab Indexing

This is one of those tests that we will ask you to not try on Site Reference (we would not pass at this time). When most of us build a web form, we do so with the understanding that a user will be using a mouse to navigate the form, but the truth is that not everyone will be using a mouse. Making your website accessible by a keyboard through all types of browsers is yet another aspect of web accesibility.

Web forms are very easy to bring up to web standards. All that is required is that you add a 'tabindex' tag to each of your input items. The tab index determines the order of input elements that the cursor will move to when using the tab key. As an example, take the following HTML:

<FORM action="..." method="post">
<P>
<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
</P>
</FORM>


In this example, the cursor will move from field one, to field two, to the submit button. If you want to change the order of progression, simply change the tab index.

This is yet another example of a simple detail that we can incorporate into our websites that make them easier for those who are not accessing our website through 'traditional' mediums. Just a couple minutes of our time could make our website accessible to someone who is not able to find another accessible website within our niche.

There is Obviously More and SEO Benefits

There is obviously more to web accessibility than just images, javascript, and web forms. Web accessibility requires that a website owner take the time to consider all the people that might stop by their website, and have the consideration to make the website accessible to all these people. There is a reason that the W3C has put together a specification on this subject. And although we typically consider web accessibility to be limited to humans, the benefit can also extend to web robots.

It is widely known among the SEO community that making a website that complies with web accessibility standards can help your rankings. And although this may be one of a hundred different factors in your rankings, it is still one factor in a hundred different factors.

A search engine spider actually views your website in much the same way that a person who is visually impaired would view your site. Spiders do not view javascript, they are not able to determine the content of an image outside of surrounding content and possibly an 'alt' tag, they do not know how to navigate forms, and they certainly do not know what a link is about outside of the anchor text (you should use the 'title' attribute in your links). It is not a great stretch to conclude that a website that meets basic web accessibility standards will perform better in the search engines for no other reason than spiders are able to better determine what the site is about.

Your Plan Moving Forward

So you've read this article up until this point and you agree that making your website accessible is important. You do not know HTML code that well and are currently relying on Frontpage or Dreamweaver to do the heavy lifting for you. How do you move forward?

The real answer to this is that you need to learn at least a little bit of HTML. Although some people will criticize you for using Frontpage or Dreamweaver (and there are real limitations to these software programs), we all have to start somewhere. However, both of these programs, and for that matter, most GUI web design software, offer a feature to view the HTML source of your web site. Familiarize yourself with the basics of web optimization and learn how to add this to your HTML. Take the time to go through the code that your program of choice creates and learn how to add your own elements to it.

If you are already a hand-coder, take the time to read the W3C's accessibility standards. The read is not that much work and should be very easy to understand. Make it your goal to retrofit your website with one aspect every week so that within just a few weeks your website is entirely accessible to web browsers of all sorts.

Who knows, you may find that you are the only site in your industry that is accessible to all web browsers.

About this author

Mark Daoust is the owner of Site Reference and the Site Reference Forums/

This article may be reprinted in full as long as a link to the original article is included. That link may be found here: Accessibility - The Hidden Niche Market

 

Related articles

CSS - Maximum benefits
CSS is a simple file which controls the visual appearance of a Web page without compromising its structure. Using CSS we can control our font size, font color, link color and many other attributes on our web page. This will make our HTML code much more readable and the page size will be reduced.

Screen Scraping Your Way Into RSS
Screen scraping your way into RSS Introduction RSS is one the hottest technologies at the moment, and even big web publishers (such as the New York Times) are getting into RSS as well. However, there are still a lot of websites that do not have RSS feeds.

ARTICLES: General Internet Marketing Website Development Search Engines Archives Submit an Article
WEBMASTER TOOLS: RSS Parser Keyword Density Checker Verify Your Site Links Backlink Checker Check Indexed Pages What's Your Website Worth