AvengeX Webmaster Development - Free PHP, MySQL, CSS, XHTML, Photoshop Tutorials

Some of you might have come across the word accessibility quite a lot in the last few months, what with the Web 2.0 interface being forced onto the faces of all the big websites on the net. Accessibility, however, is becoming a bigger and bigger issue for webmasters around the world with new laws and policies setup by governments and consortiums to help make the web accessible to as many people possible.

Why is this an issue?
Because of the diversity of the people who use the Internet, and because of the fact that more and more services are becoming digitalized, some people are left out. Some developers class this section of people as "{{legacy users}}". These people are broken down generally into three groups:
- Those with some sort of disability, such as colour blindness, partial vision, dyslexia and deafness.
- Those with downgraded or old systems that do not support some of the richer content available on the web today. Take YouTube for example - they use Flash to play videos embedded on their website page. If the user does not have Flash installed, they are unable to play them. Other technologies such as Java, Shockwave, operating system controls and AJAX are also classed as rich media, and some users may not be able to experience your site properly.
- Those with a different browser. Yup, you've heard it all over the place, the diversity of browser usage amongst the users of the web is definitely changing. You've got the three big players, IE, Firefox and Opera which you have to design for, and then others such as Konqueror, Safari and many more.

Why should I care?
Firstly, because these group of people make up an estimated fifth (or 20%) of your potential viewing audience. It would be stupid not to take them into account.
Secondly, if you're designing for a business in any developed country (take the UK, US or Australia), there are laws, most notably the UK {{Disability Discrimination Act}} (2003 amendment) that require that all websites have to be able to be viewed by people with viewing disabilities. You might well be asking: "so what if I don't?". The answer: that site will be deemed illegal, and you might end up getting someone sued (in the worst possible case, of course).
Thirdly, you will gain respect from fellow designers and potential clients if you make accessibility important in your web designer's agenda. It's a bit of a zip-word in the developing business at the moment, and people will love you if you mention it.

Tip One: Page Text Size and Contrast
Allowing a user to change the text size, and possibly even colour, is your first step towards making a website accessible. You can do this by either making the utility to do so (tutorial coming soon) or simply explaining how to do so by going through the steps on each browser on a separate page. At the same time, you must also make sure that your site's layout won't be changed drastically by a reasonable increase in the text size. Make sure that this can be done by testing it with around a 10 pixel increase. Also check with a decrease as well, possibly between 5-10 pixels.

Tip Two: Learn To Use Fluids Properly!
A fluid layout is one which will stretch and contract with the window size, and therefore the resolution or screen size as well. This practice is best done with CSS, though you can still use tables and percentages, however this method is outdated. This means that your site will be backwards compatible for those who use 800x600 resolutions. If you want to be really resolution friendly, give 640x480 a try! The target you're aiming for for a fluid layout is for the content and layout not to look distorted when the window is shrunk to around 800 pixels wide.

Tip Three: Alt Text and Acronyms
An unsung hero of XHTML introduced first in HTML a while ago was the <acronym> tag. Usage is like so:<acronym title="Hyper Text Markup Language">HTML</acronym>
- Why is this such an important feature? Because it lets the user know what you're talking about when you start mentioning things like ROI (Return on Investment), PHP (Hypertext Pre-processor*) and so on.
* - Now, honestly, assume you were an inexperienced user and you never knew that that acronym was a mixup!
Having alt text on images is now mandatory on W3C validation. Alt text is there for when images don't load. Or is it? It's not just there for that - it's there for blind users who use screenreaders to read to them what's on a webpage. So, if you're using an image which is highly relevant to the page without alt text, you've just left a potential 20% of your users in the dark about it. Keep it relevant, and keep it there!

Tip Four: The label tag - another unsung hero
Usage:<label for="FORM_ELEMENT_NAME" title="Enter your name here">Name:</label>
<input type="text" name="FORM_ELEMENT_NAME" />The <label> tag has a few handy uses in forms. It acts as a focus element which you can click on, and you will focus to the element specified in the for="" attribute. It's also handy for screenreaders to help the user input text in the right place. If it's not for that, it's definitely for keeping your form elements organized. You can also style it into a block element with CSS to enhance the form layout, and make it table-less!

Tip Five: Flash and Javascript, And When Not To Use Them
It's surprising how many users have Javascript turned off or Flash uninstalled these days. Take schools for example - most IT managers are paranoid about kids going on Flash games, so they don't let them install Flash in the first place. Let's also not forget that privileges needed for installing programs, or even browser plugins aren't given. You shouldn't be using Flash for things like headings text or using it extensively throughout your site for small functional features. Using it for logos, headers and adverts are valid reasons. Let's see what isn't:
- 100% flash navigation with no major functional use or effect
- forms and searches (especially contact forms!)

Though really, you can use it in moderation when appropriate as long as it has something to degrade into. This can be done by either putting a static background image behind the embedded flash object with CSS, or by using some sort of alt or longdesc text with it.

So, how does this affect me?
It benefits you in many ways, and they're all good!
First of all, as already mentioned, it will increase your credibility as a designer if you pull it off successfully. This opens up your roads to more profit and more clients if you account for everyone.
This is also a small section of SEO for you. Let's not forget that we should treat search robots as users with accessibility issues. Flash and Javascript are turned off for robots so they don't see the funky effects your users do, ALT text is important as it can index your images (using keywords inside image alt text is even more important).

That's about it. I'll be adding links to relevant tutorials in this accessibility series of tutorials in the near future! Thanks for reading.

---