If we are to look at the percentage of people who potentially have one accessibility need or more, you can get a pretty clear picture that not only is it a good idea for the betterment of the web -- but also it makes good business sense.

The Rundown:

The following is the percentage of web users I have found with a specific accessibility need (please note that these statistics are gathered from reports specifically in America - however I would expect similar results in other major areas of the world).

• Users with visual, motor, cognitive or hearing disabilities - 10%
• Users with an outdated browser (pre IE6) - 1%
• Users who have javascript disabled - 5%
• Users running on a low resolution (800 x 600 or lower) - 4%
• Users on dial-up or a slow internet connection - 10%

This means that up to 30% of users surfing the web can be effected by accessibility issues on a website (there could be overlap in some of the different categories, so I say up to). This is a strikingly high number of users that could be effected and should be reason to wake up and smell the coffee. You wouldn't turn 3 out of every 10 people away from your store front, why are you turning them away from your website?

How to Test

Testing your site for accessibility usually requires a handful of methods and techniques. The best method of course is doing actual testing with users who have accessibility needs. However if you are not able to do so there are plenty of ways to test your site by yourself.

Turn Elements Off

One of the easiest and best ways to start testing your site for accessibility is simply to start browsing under different situations.

• Browse in all text
• Turn off images
• Turn off javascript
• Shrink your web browser

This can easily be done with tools such as the web developers toolbar.

Try Using a Screen Reader

There are a handful of ways to test your site using a screen reader with out spending large sums of cash.

• JAWS free trial
• FireVox Firefox screen reader plugin

Test Internet Speeds

Using a tool like Internet Speed Simulator you can actually limit your bandwidth to see how your site will perform under dial up or slow speed connection situations.

Accessibility Effects More People Than You Think

Ultimately you need to remember that accessibility effects a lot more people than you may think. It is way to easy to dismiss accessibility because you don't see your users having accessibility needs, however that simply is not the case. There are plenty of more common accessibility concerns that you may not have in mind that could be keeping users from accessing your site.

We as a community and as an industry have become very good at most aspects of building websites. Just looking through a few CSS Galleries clearly shows the quality of design that is being produced and how much it has improved in just a few years. If you look a layer deeper and view the source of these websites you will see beautiful and semantic XHTML/CSS. It seems the days of table based layouts is finally gone.

The amount of functionality and rich experience that sites have now day are creative, impressive and engaging. Powerful javascript libraries such as jQuery, MooTools and prototype make it easy to produce these experiences rapidly and effortlessly.

But a website is more than the design, code and effects/functionality. Sometimes we have to rethink our approach and find out what is really important. What are the sites objectives and what are our users objectives? More often than not you will find that you could improve the following areas of your websites:

1. Web forms

While they are far from the sexiest part of web design, web forms are arguably one of the most important. In almost all cases a web form also functions as a conversion point (a point where a user performs an action that accomplishes a site objective).

Here a user is going to enter in some of their personal information so that they can get something in return. This establishes interest and provides the site owner with some valuable information.

Web forms are often neglected in two ways:

1. There is not enough attention in making them usable. This could be poor validation, improper labeling of required fields, making them too long or poor form layout.
2. There is not enough attention to what information is asked from the user.

You have a real opportunity to learn more about the people who use your website. That information can not only help you build a better website but also a better business. This marketing information could easily lead to R&D improvements and better products.

Do some research and learn how you can make more effective forms. Your clients, bosses and website owners will thank you many times over.

Resources

• Web Form Design: Filling in the Blanks
• Web form eye tracking studies

2. The Content

Content is king. In a recent study 25% of users noted that the number one reason they were to leave a website was due to "weak web copy." The only reason anyone ever goes to any website is because of the content, yet so many website owners neglect the content. Despite it's importance content becomes an afterthought. Appearance, search rankings and conversions tend to be the focal point of most web design projects. What we may forget is that with out great content you still have a poor appearance, you won't rank high and no one will convert.

Rather than trying to write all of the content yourself, hire someone. It will be worth it, I promise you. If nothing else write the bulk of the copy and hire someone to make it consistent with the proper voice and tone.

Resources

• The Web Content Style Guide: The Essential Reference for Online Writers, Editors and Managers
• Quality Web Content

3. The Footer

With a little thought it becomes painfully obvious, most website footers are absolutely useless. A user takes the time and effort to read (or scan) through an entire page, and when they reach the bottom they are rewarded with links that don't fit anywhere else, a copyright notice and maybe an address and phone number.

The point where page content ends is a very high action zone. That means that users who get to that point have a high probability of clicking on any link that comes below it. Rather than some meaningless legal links and an address create a footer that gives the user a place to find additional content that may interest them.

This could be:

• Related pages / articles / posts
• Links to rich media
• Latest news / updates
• Previously viewed pages
• A contact form
• Ways to save / share the page
• Newsletter sign up

Resources

• Footers in modern web design
• Footers with great usability

4. The Print Version

Many designers fail to realize how many people still prefer to print off websites rather than try and read them on screen. There are two significant benefits to paying attention to the print version.

The most obvious benefit is that it can improve the user experience of the site. Users who visit your site and print it out will actually read the content and are more likely to revisit the site and make an action (or conversion). If the printed version is difficult to read and work with they are highly likely to simply recycle the paper and forget they ever visited your site in the first place.

The second benefit is it could be a real competitive advantage. If a user prints off two web sites, and yours clearly has more attention to detail in the print version, they are much more likely to use your product/services over the competitors.

You can improve the print version simply by:

• Turning off unnecessary items such as the header, footer, navigation, search box etc...
• Changing the font to serif, increase the font size and space out the line height to make the print version more legible
• Adjust the columns or remove sidebars so that only the primary content prints out

Resources

• Print style sheets, a definitive guide
• Pro CSS Techniques

5. Analytics

How users behave and use a website is one of the most important factors you could possibly focus on. Despite this fact it is so commonly neglected by both website owners and website designers. Businesses need to spend more money on the analysis of user behavior and web design companies need to promote the service more heavily.

Even a website that is built using an effective strategy, user testing and best practices is a best guess at what will be most effective.

If you actually pay attention to how users behave and analyize that behavior you can discover countless ways to continually improve your website.

• Are users leaving a specific page more than others? Maybe they are not finding what they are looking for and that page can bet altered
• Do you have a page where a lot of people are entering the site other than the homepage? You need to start thinking of those pages as landing pages
• Are there important pages that don't get a lot of traffic? Figure out how you can make those pages more prominent

Resources

• Web Analytics: An Hour a Day
• Occam's Razor - web analytics blog

Sometimes rediscovering these capabilities are valuable for creating new ways to add creative touches, such as the parallax scrolling effect. Other times they can greatly improve the usability and user experience of our sites. In some cases they do both.

I was recently reading through "The Elements of User Experience
," which opens with a compelling story describing why things going wrong in your day could be the fault of poor design in regards to usability. Interestingly enough one of the points covered in this section is the use of feedback as a way to notify a user that something has occurred.

View the demo here

Most Web Designers Fail to Take Advantage of :active

In the case in the book they mention a coffee pot beeping so you know that it was switched on. This same principal of offering a user basic feedback applies to the web, yet we rarely see it used in all instances it can.

We have had the ability to style a links :active pseudo selector since CSS1, yet when was the last time you actually used it? I will admit that I am a grand offender as well, as I couldn't tell you. However the value of such a subtle detail can have large benefits  to a users experience of the site. Not to mention it does give another avenue to enrich the interactivity of our interfaces.

An Common Example

If you have ever done any usability studies you will have probably run into a situation where things that seem incredibly simple end up taking significant amount of time. One of the most basic of these situations is that of clicking on a simple link. I have many times in my "behavior observing" career seen a user who thinks they have click on a link, despite having missed it slightly.

What follows is a long pause while they wait for the page to change, before getting frustrated and either blaming the internet, the site, or swirling the mouse to ensure the computer hasn't locked up.

This could all be solved by simply giving the user feedback when a button is clicked. Interestingly enough flash based websites have done a better job through out history of accomplishing this than most HTML sites, done so by adding a subtle "clicking" noise as a link is clicked.

Of course I am not advocating the use of sound (as it fails on several accessibility levels among other issues), however it wouldn't be hard to give the user some feedback to let them know the link was successfully clicked on.

What We Can Do

By using the :active selector in CSS we can give the user some feedback that a link has in fact been clicked. This way if there is any sort of delay the user knows that it is successful loading and they don't have to reclick the link. This will make the site more usable and as more developers and designers begin to adopt this process the web itself will become more usable.

Additionally it opens up a new area for us designers to work our creativity. We can now think about what subtle design elements we can give links and buttons to indicate to the user that they have been clicked. In my example, a beveled button appears to be pushed inward.

It Isn't Perfect

Despite the fact that it is a dramatic improvement over not having any feedback and it does give us more room to express our creativity, the functionality isn't perfect. You may notice in the demo that if you click on a button quickly it changes so fast you might not even notice. You may not realize that there is even an effect giving you feedback.

Regardless, using :active will still enhance the user experience. Even if only 10% of your users notice it is worth the time and effort put into it. Additionally users who are less familiar with computers and the internet will be more likely to hold the mouse button down longer and thus notice the effect.

Consider Adopting it as a Regular Practice

I really advocate the adoption of it as normal standards based markup. If it becomes a convention than users will expect some sort of notification that a link was clicked and even it happens to fast on the pages that load right away, they know to look for it.

View the demo here

There's no new syntax to learn and no programming skills needed, file is really small - 6 KB core script (GZIP compressed, 12 KB uncompressed), cross-browser compatible for Internet Explorer 6+, Firefox 2+, Opera 9+, Safari 2+, valid W3C CSS...

You can download latest version directly here or you can go to the download page for changelog and more resources. MoreCSS is very well documented with good descriptions and working examples.

How to install

MoreCSS runs automatically on page load and applies the properties written in external stylesheets to the specified elements. You do not need to configure the code or anything. Just include MoreCSS.js and the external stylesheet(s) in your page header. Be sure that you include the stylesheet(s) at first, then MoreCSS.js and at least all plugin scripts.

What can you do with it?

• add-class - Add the specified CSS class to an element, very good example is zebra-style table, it can be used for script generated lists for example in WordPress (list of archives, posts...)
• content - Adds dynamic content before / after static content. Enhanced cross-browser solution for CSS property.
• default-value - Adds a default value with typical on focus behaviour to the specified input field.
• include-content - Includes the content of a file (via AJAX).
• target - Opens the link target in a new window, popup or layer.
• tooltip - Adds a styleable tooltip to the cursor position.
• fade - Opacity fade effect.
• and much more ...

How to use

Syntax Elements
The syntax in MoreCSS is very similar to real CSS, but with some limitations because of performance reasons. But MoreCSS has also some special syntax elements for advanced functions.

Properties
Once you have installed MoreCSS you can use the properties in the same way as regular CSS properties. In the left menu you will find all currently built in properties and working code examples for each property. With plugins you can include special properties for visual effects and more.

Write your own plugins
MoreCSS allows you to write your own plugins using the Library Functions and using the Core Properties

Example code

 
 
/* HTML */
<table id="example_1">
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
</table>
 
/* CSS */
 
tr.blue td {
	background-color:#D0E3FF;
	color:#FFFFFF;
}
 
/* MoreCSS */
#example_1 tr:every-second-child {
	add-class: blue;
}
 

Also the second product so far from Unit Interactive Labs is a simple and useful tool tip rollover (named as UniTip) which also uses their PNG fix and it is very popular and used a lot these days over the web. Nice work Unit Interactive!

Unit PNG Fix

In their words this new png fix is inspired by work of 24ways.org, and here are some key features why you would use it. As far as I've tested it so far it's working fine.

• Very compact javascript: Under 1kb!
• Fixes some interactivity problems caused by IE’s filter attribute.
• Works on img objects and background-image attributes.
• Runs automatically. You don’t have to define classes or call functions.
• Allows for auto width and auto height elements.
• Super simple to deploy.

So as you see progress has been made, talking about background-image and auto height elements. To include it use standard procedure, download JavaScript (you can do it directly here) and put it between <!--[if lt IE 7]> and <![endif]--> in head tag. And there's a new thing, a small image "clear.gif" which in their words "keep certain elements structurally sound when using the filter property" so you'll need to change path in the JS afterwords .

UniTip

Another project worth a mentiong and also using their PNG fix is UniTip. This is now based on Craig Erskine’s qTip, It supports all browsers, is easy to deploy, and is surprisingly light-weight. Best of all: it offers you the opportunity to customize it to work well with any of your projects.

• Vertically expands to content.
• Can accept HTML.
• You can apply UniTip to specific classes or tags.
• Adjusts to sides and bottom of page.
• Unit PNG Fix included in the zip to automatically fix pngs for IE6.
• Easy to customize and deploy! Friendly with other scripts!

Installation is also simple, after a download include JavaScript and style in your head tag. For more information visit UniTip page.

This feature eases writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Here are some free examples for it, compatible with WordPress to.

Google Syntax Highlighter for WordPress

This one I think is the best of them, written by Alex Gorbatchev, and it’s written in Javascript. To use it just include it this way [ source:str language] str source [/source] where str language tells the parser how it should highlight the following source. Currently, the following strings are understood:

• css
• c#, c-sharp, csharp
• c, cpp, c++
• vb, vb.net
• delphi, pascal
• js, jscript, javascript
• php
• py, python
• ruby
• sql
• xml, xhtml, xslt, html, xhtml

Don’t forget to activate support for the language(s) you want to display. Do this by going to the WordPress-Administration Options-Menu and click it active.

Download
http://wordpress.org/extend/plugins/google-syntax-highlighter/

Instalation
Extract all files and directories from the .zip-archive to your WordPress plugin-folder. Then browse to your administration menu named “Plugins” and activate the plugin named “SyntaxHighlighter”

Non WordPress code
You can find it here http://code.google.com/p/syntaxhighlighter/

Dean’s Code Highlighter for WordPress

This WordPress plugin using Geshi to highlight source code in a wide range of popular languages.it aims to be a simple but powerful code highlighting plugin, with the following goals:

• Easy to use.
• Support for a wide range of popular languages.
• Customizable output formats.

Installation
1. Download Dean’s Code Highlighter v1.2 and unzip it.
2. Upload the plugin to your plugin directory (wp-content/plugins).
3. Activate the plugin through the ‘Plugins’ menu in WordPress.
4. Modify the stylesheet file geshi.css to get the coloring you prefer.

Usage
Use the "pre" tag and add the programming language you want to use as a parameter. Example:. < pre lang="php" > your code here … < /pre >. for example: <pre lang="php"> function hello_world(){ echo "hello world" }</pre>

Demo
You can see a Living demo at here.

Ajax Perl syntax highlighting

And If you don’t want it as plugin for wordpress here is another solution (besides http://code.google.com/p/syntaxhighlighter/) by Jon Allen

http://perl.jonallen.info/projects/syntaxhighlighting

I've ran into two solutions for this. I personally haven't tried this but, on the demos it seems to be working and i think it's very good idea.

Using jQuery

First one is using jQuery library, and will present how to do these browser selectors so easily with jQuery. First thing you need to do, is to get the jQuery library, version 1.0a, if you don't have it yet.
Now all you have to do is include the jQuery file, and the following piece of code

 
$(document).ready(function(){
$('html').addClass($.browser);
});
 

Now you can preprend your styles with .msie, .mozilla, .opera, .safari or .other depending on the targeted browser. Written by Valentin Agachi

Demo

View demo page

Pure Javascript

In this case all you have to do is to add small Javascript in your tag which you can download directly here . Written by Rafael Lima

 
html.gecko div#header { margin: 1em; }
.opera #header { margin: 1.2em; }
.ie .mylink { font-weight: bold; }
.mac.ie .mylink { font-weight: bold; }
 
.[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]
 

Available OS Codes [os]:

• win - Microsoft Windows
• linux - Linux (x11 and linux)
• mac - Mac OS

Browser Codes [browser]:

• ie - Internet Explorer (All versions)
• ie6 - Internet Explorer 6.x
• ie5 - Internet Explorer 5.x
• gecko - Mozilla, Firefox, Camino
• opera - Opera (All versions)
• opera8 - Opera 8.x
• opera9 - Opera 9.x
• konqueror - Konqueror
• webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira

Demo

View demo page

You can use this JavaScript in two ways, to outline text and to add shadow to text. It works in all major browsers. Click here for demo.

Outline

 
<script>
<!--
 
var message="outline";
var thickness=1;
var color2="black";
var color1="white";
var extra="font-size:40px;";
var x = -thickness;
var y = -thickness;
 
while (y<=thickness) {
while (x<=thickness) {
 
document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+(-y)+";'>"+message+"</span>");
document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:0;'>"+message+"</span>");
document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+y+";'>"+message+"</span>");
 
x=x+1;
}
y=y+1;
}
 
document.write ("<span style='"+extra+" color:"+color1+"; position:absolute; left:0; top:0;'>"+message+"</span>");
 
//-->
</script>
 

Shadow

 
<script>
<!--
 
var message="Shadow";
var range=2;
var extra="font-size:40px;";
var color1="gray";
var color2="black";
var x = range;
var y = range;
 
document.write ("<span style='"+extra+" color:"+color2+"; position:absolute\; left:"+x+"; top:"+y+";'>"+message+"</span>");
document.write ("<span style='"+extra+" color:"+color1+"; position:absolute; left:0; top:0;'>"+message+"</span>");
 
//-->
</script>
 

Both

 
<script>
<!--
 
var message="Both";
var thickness=1;
var color2="black";
var color1="white";
var color3="gray";
var extra="font-size:40px;";
var range=5;
var z = range;
var d = range;
var x = -thickness;
var y = -thickness;
 
while (y<=thickness) {
while (x<=thickness) {
 
document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+(-y)+";'>"+message+"</span>");
document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:0;'>"+message+"</span>");
document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+y+";'>"+message+"</span>");
 
x=x+1;
}
y=y+1;
}
 
document.write ("<span style='"+extra+" color:"+color3+"; position:absolute\; left:"+z+"; top:"+d+";'>"+message+"</span>");
document.write ("<span style='"+extra+" color:"+color1+"; position:absolute; left:0; top:0;'>"+message+"</span>");
 
//-->
</script>
 

NOTE: It’s not working when doctype -> XHTML 1.0 is included

IE7 is a JavaScript library made by Dean Edwards to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6 (Windows only). Right now this is version 2 and it’s in officially in beta phase.

You can download it directly here and just implement it in your head tag

Upgrade MSIE5-6 to be compatible with MSIE7.

 
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE7.js"
type="text/javascript"></script>
<![endif]-->
 

Upgrade MSIE5-7 with advanced CSS features missing from MSIE7.

 
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE8.js"
type="text/javascript"></script>
<![endif]-->
 

NOTE: You do not need to include IE7.js if you are using IE8.js

The project is hosted on Google Code and you can test it on it’s test page

First one is if you need just simple transparent image, without some special needs for example backgrounds etc. The solution would be png fix. I've used it many times but it has lots of faults, for example with padding, margins and absolute positioning. Sometimes i can mess up the rest of your JavaScript files, but anyway very useful script. You can download it here http://homepage.ntlworld.com/bobosola/pngfix.js and just include it in your <head> tag

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

The second one can partly handle issues from first and it's pure CSS solution. I mostly use this for backgrounds, because if your path for a background is from CSS file then png fix can't handle it.

.someelement {
background-image: url(images/image.png);
}
 
* html .someelemen {
background-color: #333;
back\ground-color: transparent;
background-image: url(images/blank.gif);
filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader(src="images/image.png", sizingMethod="scale");
}
 

I found this very useful, and also when you add some hover effects for example some color or other image. You can see live example here
NOTE: This simple hover is just example and it doesn't work in IE6

.someelement:hover {
background: #333;
}
 
.someelement:hover {
background-image: url(images/image2.gif);
 
}
 

Only problem I had with this was with <a> tag, link just don't work (when it's in div with this kind of background) and i don't know why (talking again for IE6). And only solution i could think of was to place another absolute div over it for the links, content etc... Yes i know it's not elegant but it works if content is not dynamic.

Luckily more and more people are starting to use IE7, and i must say i have recently switched too, i had to have IE6 because of testing my code and when i found out for Multiple IE program I switched immediately