mondaymorning.org

WARNING WORK IN PROGRESS !!!!!!!!!!!!

Accessibility

This site has been written with accessibility in mind. Mainly just as an exercise in investigating the right ways to create web pages but also because here in the U.K. web sites will be required by law after October 2004 to do their up most to make sites accessible to all. This is as a result of the Disabilities Discrimination Act. As an I.T professional I will no doubt in the future be working with companies and their web sites so now is the time to learn the right way to create web pages.

If you wish to know more information concerning the DDA and writing accessible web sites see :-

Then and now.

In the first version of this website the logo (at the top of every page) was an image event though it was only text, the layout was done using tables, it didn't use a style sheet and no real thought had been given to how it would look if it wasn't displayed in a modern browser ( in fact being a Unix techie it hadn't really been tested properly with Microsoft Internet Explorer ). Consequently it didn't render particularly well in a text only browser so who knows what a screen reader would have made of it.

In the current version a style sheet is used for all layout, so there are in fact no tables in the site anywhere. The logo has been replaced by text and a little thought has gone into how it might look if not shown through a graphical browser.

Testing

The hardest part I find about writing an accessible page is that since I am not disabled it is impossible for me to have any concept about how this site would look to a disabled person. Thankfully there are a few techniques that you can employ to guage how your site may look :-

Read your site with a text only browser ( or in fact just look at the source file ). This will show you your site without any of the style settings. Can you read through the pages in a way that makes sense to you ? Does it flow ?
Ensure that the site is valid HTML. There seem to be many to choose from these days (HTML 4.01, HTML 4.01 Transitional, XHTML etc). I don't propose to discuss this here as it will have been discussed in many other places, my feeling though is to try and use at least HTML 4.01 Transitional. Checking your HTML is easy however and should always be done. The best check is the World Wide Web Consortiums validator. There is also a CSS validator. Ensuring your HTML is compliant aids the writers of alternative browser since its easy to code to an open standard rather than attempt to cope with all sorts of non standard and proprietary mark up. For Apache users the following rewrite rule allows you to add ',validate' to the end of any URI for an instant check.
```
	      RewriteEngine On

	      RewriteRule /(.*),validate http://validator.w3.org/check?uri=http://[YOUR URL HERE]/$1 [R=301]
	    
```
Run your page through an accessibility tester such as Bobby. This is a really useful tool that parses your page and informs you about the parts that do not meet the WAI ( or if you choose the U.S disability 508 guidelines ). Bobby is unlikely ever to give you a definite thumbs up but with a bit of practice you learn to read the report and make the necessary changes.

The W3C WAI

When I rewrote this site most of the changes I made were based upon the W3C's Web Accessibility Initiative. The majority of the remaining part of this document introduces the WAI and how I implemented the different sections on this site ( Each point in this section with a grey background is from the Web Content Accessibility Guidelines 1.0 where you will find the status and copyright information of this document ).

Guideline 1. Provide equivalent alternatives to auditory and visual content.

In other words if you have images, sounds, images maps, flash movies etc etc on your website ensure that there is an alternative. Originally this site used an image as the logo, since this logo was simply some italic text in a Times font there was no real need for it to actually be an image. Its now simple text with the appropriate style sheet settings. However where there are images I have ensured that they have 'alt' and 'longdesc' entries. This is an easy point to check, just fire it up in a text only browser and see if your website makes sense.

Guideline 2. Don't rely on color alone.

Another easy one this. All colours on this website are set in the style sheet. Since they are only as stylistic aids to this website that is where they should be. Since this ( and all other parts of the style of this website ) is in the stylesheet not the document we have a fairly good seperation between content and style. This allows people to alter the style ( or more likely just do without a style sheet ) without having to change the content as written.

Guideline 3. Use markup and style sheets and do so properly.

Quite a big one this and used in the two points above. This is a two fold guidline, first make sure your document validates with the HTML standard as this can only benefit everyone, second as a mentioned above seperate the content and style of your document.

In this website all the various logical parts of the documents have been marked up accordingly using the DIV tag. So for instance the menu bar code is enclosed between

	  <DIV ID="menu">

	    ....

	      </DIV>

All the style formatting such as border and width as well as the fact that the menu bar sits on the left are set according to the style sheet ->

	  div#menu {
	       float: left;
               border: 0;
               margin: 0.5%;
               padding: 2px;
               z-index: 1;
               width: 15%;
               overflow: auto
          }

As you can see from this screenshot of the home page in lynx without the style sheet the document is still perfectly readable as all the information in it still flows from beginning to end in a sane manner.

Guideline 4. Clarify natural language usage.

Guideline 5. Create tables that transform gracefully.

Guideline 6. Ensure that pages featuring new technologies transform gracefully.

Guideline 7. Ensure user control of time-sensitive content changes.

Guideline 8. Ensure direct accessibility of embedded user interfaces.

Guideline 9. Design for device-independence.

Guideline 10. Use interim solutions.

Guideline 11. Use W3C technologies and guidelines.

Guideline 12. Provide context and orientation information.

Guideline 13. Provide clear navigation mechanisms.

nb lynx required an href="#menuend" in the target for the skip menu to work properly