Clean code and web standards

What are guidelines?

The main guidelines that are most commonly used is Web Content Accessibility Guidelines 1.0 as governed by the W3C (World Wide Web Consortium). These guideliness explain how to make websites accessibile to people with specail needs and the disabled. These guidleliness are mainly used by designers and developers, with the main goal of the guideliness to promote accessibility, folling these guidleiness from the W3C will make your websites more accessiblie to all users in all browsers and devices which include computers, mobile phones and PDA's. This should then make all the information being displayed easier to access and should make them quicker to find on the internet.

All guidlines are reviewed by W3C members.

There are a few factors to be taken into consideration as said by the W3C

  1. They may not be able to see, hear, move, or may not be able to process some types of information easily or at all.
  2. They may have difficulty reading or comprehending text.
  3. They may not have or be able to use a keyboard or mouse.
  4. They may have a text-only screen, a small screen, or a slow Internet connection.
  5. They may not speak or understand fluently the language in which the document is written.
  6. They may be in a situation where their eyes, ears, or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.).
  7. They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.

With these factors taken into consideration websites should become more accessible. W3C recommend using CSS to style the web pages as this gives greater control over the site and helps to speed things up when changing things like the same picture on each page, with CSS all you need to do is edit one page and it automatically changes it for all the pages of your document where they are the same. You can also use CSS to control layouts, sizes, fonts, colours and everything else needed for a website. About the only thing it doesn't do is make you a cup of coffee!

Why do we have guidliness?

The guideliness are there to discuss accessibility issues and present accessible solutions to the problem. These guidllines will explain to a designer or developer how to go about making different things work for accessibility for example images, Guideline 1. Provide equivalent alternatives to auditory and visual content.

"Although some people cannot use images, movies, sounds, applets, etc. directly, they may still use pages that include equivalent information to the visual or auditory content. The equivalent information must serve the same purpose as the visual or auditory content -as said by W3C in Guideline 1. Provide equivalent alternatives to auditory and visual content"

Im a designer how do I make a start in the right direction?

Simple, Here is a quick bit to get you starting. Next time you put an image into a web page try adding an alt text to it. (alternative text)

Say for example that you want to show an image of what the difference is for disabled users when the CSS is off to when other people veiw it with the CSS on. Adding the image is the easy bit, but adding the alt bit could make the whole difference to people being able to view the image or not.

Example without alt tag

<img src="withoutalt.jpg" width="250" height="200" />

see how a website would look without an alt tag

Example with alt tag

<img src="withalt.jpg" width="250" height="200" alt="image with alt tags on images" />

see how a website would look if alt tags were used for images

note: don´t forget to close your image tags if using XHTML.
note: to get the hover informtaion on the pictures simply add title="message"

<img src="withalt.jpg" width="250" height="200" alt="image with alt tags on images" title="see how a website would look if alt tags were used for images" />


Adding this simple bit to the image alt="Image without CSS file attached" means that when the CSS is turned off to the designer it will show a section of text to say what was there, this then will display like this to the disabled user. So whats the difference beteen them you may ask? Well, Ill show you. Examine the images above and see if you can see that the difference to the two pictures are. I'll tell you, the top image is a screen shot of this website using CSS to put the images in, this means that you cannot put an alt text to an image so it just doesn't show when the CSS is turned off. So what you may think? Well, this means that to a person viewing your website in this textual method would be non the wizer to your website and your fancy image of your website title lost, so how do they know what website they are on? Some smart arse probably just said by the address, but this isn't the point.

Want to know more simple visit the W3C website


© Matthew Hillman 2006/7 | Apple Gate Studios