Webmaster Tips to better Accessibility

The purpose of this tutorial is to show you best online tools that you can use to check, improve and enhance your website for accessibility. This is an essential 10 point checklist for a modern webmaster.

1. WEBXACT

This is a starting tool which will allow you to get basic information about your site. Like for example the size of your website so that you estimate how long will it take for a dial-up user (there are still quite a lot of those) to it. Another useful feature is to check your website for broken links or list all outgoing links. You can also get an accessibility report with a list of things that you should fix for maximum website readability.

2. CleanCSS

Before you move on to some more complex validation, you might want to clean, optimize and compress your CSS code. This simple and powerful tool will allow you to do just that, and in the process can remove smaller errors. Just paste your CSS code into the box or type an url to your stylesheet, and in a moment you will be presented with a clean and optimized version of your CSS. This is a must before going to the next step. After processing CSS of this site I have manged to get rid of most of css errors and compress the code by about 25% resulting in faster loading times. Experienced web designers will probably write the proper code from beginning but for all of us others it’s a really great helper.

3. W3C CSS Validator

This tool will check your CSS files for any errors. Different browsers interpret stylesheet code differently so even if your browser shows everything the way it should be, it does not mean that others will. So use this great tool to fix your CSS code before moving on.

4. W3C Markup Validator

This is the Big Daddy of validation tools and if you pass this one without any errors, you are pretty sure that you have a website that complies to everything in the universe. I will only tell you that google.com has 31 errors according to this test. I have used it to remove some simple errors. There are some pretty technical things that you will get in this report so you may need an experienced website developer to fix it all.

5. TAW3

Next you will want to try this tool, that will present you with a validation report in a visual way, “drawing” things over your site display. This tool is also very detailed in the amount of information it gives about your website accessibility and errors. You should not focus on fixing every single bit as most of the information TAW gives is little “over the top”.

6. WAVE

WAVE is another visual tool and it will allow you to watch the flow of your site, for example monitor your headings, divs, keywords, alt text, javascript calls and much more. Use it to quickly fix errors in your theme, assign heading according to your keywords etc.

7. BrowserShots

If you thought the all work is done you are wrong. Remember the browser differences mentioned at the beginning? Well thanks to this tool, you will not have to install all the commonly used browsers to check your site in everyone. You only need to go to this site, type in your website URL and select all browsers that you are interested in. It supports Firefox 1.5 and 2.0, Microsoft Internet Explorer 5, 6, and 7, Opera, Safari and some others and all that on both Linux and Windows platforms. Best things is you get actual screenshot from an actual computer using that actual browser! Here are the screenshots of my website seen in different browsers

Using this tool I have for example noticed that my site does not load properly in MS IE6. It is really convenient and easy to use. A truly fantastic tool.

8. Ready.Mobi

With mobile phones and hand held devices being more and more popular, it is a growing trend (and a necessity) to make your website compatible with mobile phones. This usually means using as little advanced technologies as you can (java, flash etc.) and keeping the file sizes down as mobile bandwidth is still rather expensive. This site will give you a report of your website optimization for mobile devices.

9. Pingdom

Let not this site’s rather simple name fool you. It is a very powerful tool that allows you to get information about the loading speed of your site in a very nicely laid out graphical way. Give it an address and it will output loading times time line for each and every file loaded, be it an image, javascript, external object, css or whatever. You can sort the information by type or size and easily find possible bandwidth problematic files. I have used it to remove some of the unnecessary external javascripts. Also as a way of decreasing loading times I set the default number of blog posts displayed to 5 instead of 10 (but I increased the number of ‘recent posts’ displayed to 10). I also optimized header images by converting them to jpeg format. These simple changes almost halved the total transferred bytes while not changing the functionality of the site.

10. Readability Test

All these checks passed, you still are not finished if the content you write is understandable only to you. Using this readability test you can get a grade for your content. There are three figures to check. Gunning Fog Index and Flesch-Kincaid Grade will show you roughly how many academic years are necessary to process and understand your content. You will typically want to have these indexes lower if you want a broader audience. Third one, Flesch Reading Ease, is scale from 1 to 100 with higher the grade the more understandable to text is. You want to have between 60 and 70 on this scale.

Making sure your site passes all these tests will take quite a lot of time. But results at the end will be rewarding. There are more optimization and accessibility tests that I will blog about soon. If you are serious about getting your website out there, then you

http://ijerad.com/?p=717