Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
A short introduction to W3C XHTML/CSS conformity and disability accessibility.
XHTML & Dissability Awareness
You will comply. A short introduction to W3C XHTML/CSS conformity and disability accessibility.
With the age of political correctness upon us and the internet becoming more and more important, it is vital for us as web designers to move with the times and make sure our site conform to world standards, not just of code but of accessibility.
First I will look at the basics of XHTML and how to make your existing sites XHTML compatible.
What is XHTML, how does it affect me and why do I need it?
Well when people decided that HTML was letting people get lazy in their coding and that browsers were getting too big due to the amount of error checking that was needed, the World Wide Web Consortium (W3C) decided that HTML needed a successor. Being over a decade old, and having been updated in a near random fashion, with many browsers having proprietary tags it was definitely time for some revision. In their effort to standardise HTML they rewrote it using XML and a new data definition (DTD) producing XHTML. The latest version at time of writing is XHTML 1.1
Yeah but how will this affect me, do I need to relearn?
XHTML is very similar to HTML 4 sharing almost all of its main tags and syntax. But there are some very obvious differences. XHTML, like XML is case sensitive. It is also very inflexible (as far as allowing errors) compared to HTML. Tags must be nested correctly, and all tags must be closed. e.g.
In HTML you could get away this
In XHTML you would need to write it like this
First thing you will notice is that <i> and <b> have been substituted for the ôlogicalö tags <em> and <strong>.
Next all of the tags are lowercase with correct nesting.
Even the <br> has a closing tag of a space followed by a forward slash.
Many formatting tags, such as <i> and <b> have been deprecated (removed from the specification)
XHTML is designed to display data not format it. This means that things like bgcolor and font are best avoided in the XHTML.
In the above example <em> and <strong> are not ideal to use but they define the content rather than force the browser to format them. But I will get into that in a bit.
Ok got that but why should I bother
Why did you get the latest version of Word, or Dreamweaver or what ever. Times move forward not back. Also the majority of browsers will display XHTML and with it becoming more important to follow standards these days, more browsers will make XHTML their main language. Also HTML will not be upgraded again, so think of XHTML as HTML 5.
Many modern phones are becoming XHTML compliant so they will read simple XHTML pages.
Palm based browsers and even PSPs that can't afford to have huge error handling routines are well suited to reading XHTML as well.
So how should you change your ways and how do you check that you are correct.
Follow simple rules.
Declare that your page is XHTML at the top of the page;
Close all tags.
E.g.:
If there is no closing tag (as in meta tags) end the tag with a space and a forward slash,
E.g.:
Use lower case tags and attributes.
E.g.
Nest tags correctly
E.g.
DonÆt use frames. XHTML comes in several flavours, from loose strictness to very harsh strictness. But only one of the flavours likes frames. Frames are very unfriendly to certain browsers and especially to people using screen reading software and brail browsers. I will come to this in the Disability Accessibility section.
Avoid formatting in the XHTML code (I will get onto this next)
So how do I not use formatting, the site will be very boring!!
You use CSS (Cascading Style Sheets). I wonÆt go into the details of these here as there are better tutorials available, but I will show you how they can be used to make XHTML look the way you want it to!
When making a site in XHTML you want to avoid putting formatting in the file. There are a number of reasons for this. The main is to keep the XHTML as just definition of the source and structure of your data.
So if I wanted to display the above text I would lay it out in the XHTML like this
Notice that the heading is defined with the <h1> tag. A browser will read this as a heading and unless told otherwise will format it according to its default.
If I want to change the font and style of, say, the heading I would redefine the <h1> tag. So if I want <h1> to be Arial, bold and font size 20 I would first set up this style
If I want to display just the first paragraph as Times and italic but not the second I would create different a class and associate it to the just the first paragraph. So the first <p> tag would become <p class=ötnrIö>
The corresponding style would be
Check out the power of CSS and you will never turn back!
Ok this sounds like a lot of work.
It is to start with, but when you have it set up, the production of pages is very rapid. You can reuse style sheets in any of you files. Also your XHTML files will be a lot neater and easier to edit with no formatting in them. Also if you want to change the format of your site you just edit the CSS file. Some people use this to change the format seasonally, like at Christmas. The data stays the same; you just edit the CSS or attach a new one.
If someone is using a browser that does not support CSS or formatting (e.g. text readers for the blind) your XHTML file will still display its contents just without formatting.
A few things to remember
You can use tables but widths, heights, colours etc should be defined with CSS classes.
You can have more than one style sheet associated with a file. More browsers now accept several types of ômediaö dictated style sheets. For example you can have a style sheet for display on a pc, one for display on a palm top and one for print e.g.
If the browser does not accept media types it will use the last style sheet referenced.
Once you are all up and running you can validate your XHTML file with an online tool at http://validator.w3.org
This will check out your code and if it is wrong will give you advice on how to correct it. If you have a valid XHTML with will give you a bit of code to add to your site that will declare it XHTML 1.1 valid!.
There, that was painless wasnÆt it? Welcome to the world of conformity. Go to http://www.w3.org for more information on XHTML.
Disability Accessibility
Ok now that you are XHTML compliant lets look at making the site accessible to people with disabilities. Yes this means more work, but if you donÆt then your site will be inaccessible to about 10% of the population. There are 2 main standards the American Section 508 which all federal websites must adhere to and the W3C's WCAG. WCAG is spilt into 3 priorities. All websites should adhere to Priority 1
There are a few simple steps needed to make your site more accessible.
If you are using XHTML you are already stepping in the correct direction.
Imagine, for a moment, that you cannot see the formatting of your site. You are a text to speech program. Now read your source code to your self. Does it make sense?
What language are you using?
Do your images have an alt attribute? If not how is the reader to know what the image is.
Do you have a table? What is in the table? Is it just for formatting or does it have data in it?
So letÆs start with describing your site.
First set the language. In XHTML this is done in the <html> tag. For English this would be
Note that the HTML ôlangö attribute is now deprecated
Make sure images have an alt attribute.
This gives text readers or people with just text browser a small description of the image. If the image is very important you should use the longdesc attribute for the image. This should be a link to another file that describes the image. Not all browsers support the longdesc attribute so you may need to include a ôdö link. This is a hyperlink to the same description file, with a small ôdö as its link text.
So I have a vital image this is how I would code it.
desc.htm should contain a detailed description of the image.
If the image is just for effect all you need is to use the alt attribute.
This goes for all non text items on the page. They should all have an alt attribute describing them
Tables should always have a summary of their contents even if they are just for layout. This is defined with the ôsummaryö attribute.
If there is data in the table, e.g. it is a price list, you should use table headers to describe the data.
E.g. <th>description of column content</th>
I wonÆt go into this as there are a lot of tags that can be used to define the contents of a table. Go to http://www.webaim.org/howto/tables/tables3 for some good information.
One very important thing to remember is to include a space ( ) between hyperlinks!! This always catches me out.
Go to http://www.w3.org/TR/WCAG10/ for a full list of specifications
It comes down to common sense. Read your site. Does it have colour. If it does, can the site be read with out it? DonÆt use colour to describe things such as, ôClick the red button to continueö!!
Can the site be read without any formatting? If it is correct XHTML then yes it can.
Run your page through http://webxact.watchfire.com/
And see if you are up to scratch!!
Also a program that I have used, and was reminded of by John Barnett, is APrompt
This is a free downloadable app that can be used to check your pages in much the same way as Bobby is used. It will give a rating out of 3 based on the same rules as Bobby (i.e. WAI)
I have used this to get sites ready to go through Bobby as Bobby is still more recognised in the accessibility world.
Get it here
http://aprompt.snow.utoronto.ca/
Thanks John
If you have a nice site that you have spent many hours of design on and suddenly find out you need to make it totally accessible, but it looks really hard to convert, do not fret. If you have used XHTML you can just link from the index page to an accessible version that uses a simplified CSS file.
Or you can write a simplified text site that has a text based link map of the site. This is useful if you have a Flash site.
If I have to make a flash site I tend to write the Flash site and then make a text based site that can be got to from the index page.
There is not much to it, just keep the layout simple and read the guide lines. Imagine you are colour blind, or canÆt see well or are using a brail reader.
A good description can be found at
http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html
Hope this helps. If you need more added to this then just tell me
Andrzej Marczewski
With the age of political correctness upon us and the internet becoming more and more important, it is vital for us as web designers to move with the times and make sure our site conform to world standards, not just of code but of accessibility.
First I will look at the basics of XHTML and how to make your existing sites XHTML compatible.
What is XHTML, how does it affect me and why do I need it?
Well when people decided that HTML was letting people get lazy in their coding and that browsers were getting too big due to the amount of error checking that was needed, the World Wide Web Consortium (W3C) decided that HTML needed a successor. Being over a decade old, and having been updated in a near random fashion, with many browsers having proprietary tags it was definitely time for some revision. In their effort to standardise HTML they rewrote it using XML and a new data definition (DTD) producing XHTML. The latest version at time of writing is XHTML 1.1
Yeah but how will this affect me, do I need to relearn?
XHTML is very similar to HTML 4 sharing almost all of its main tags and syntax. But there are some very obvious differences. XHTML, like XML is case sensitive. It is also very inflexible (as far as allowing errors) compared to HTML. Tags must be nested correctly, and all tags must be closed. e.g.
In HTML you could get away this
Code:
<p><i><B> the cat sat on the mat</I></b> <br>
Code:
<p><em><strong>the cat sat on the mat</strong></em></p><br />First thing you will notice is that <i> and <b> have been substituted for the ôlogicalö tags <em> and <strong>.
Next all of the tags are lowercase with correct nesting.
Even the <br> has a closing tag of a space followed by a forward slash.
Many formatting tags, such as <i> and <b> have been deprecated (removed from the specification)
XHTML is designed to display data not format it. This means that things like bgcolor and font are best avoided in the XHTML.
In the above example <em> and <strong> are not ideal to use but they define the content rather than force the browser to format them. But I will get into that in a bit.
Ok got that but why should I bother
Why did you get the latest version of Word, or Dreamweaver or what ever. Times move forward not back. Also the majority of browsers will display XHTML and with it becoming more important to follow standards these days, more browsers will make XHTML their main language. Also HTML will not be upgraded again, so think of XHTML as HTML 5.
Many modern phones are becoming XHTML compliant so they will read simple XHTML pages.
Palm based browsers and even PSPs that can't afford to have huge error handling routines are well suited to reading XHTML as well.
So how should you change your ways and how do you check that you are correct.
Follow simple rules.
Declare that your page is XHTML at the top of the page;
Code:
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Close all tags.
E.g.:
Code:
<div>Text</div>If there is no closing tag (as in meta tags) end the tag with a space and a forward slash,
E.g.:
Code:
<meta name="Description" content="Articleö />Use lower case tags and attributes.
E.g.
Code:
<div id="border1" class="border1">Nest tags correctly
E.g.
Code:
<div><p>Text</p></div>DonÆt use frames. XHTML comes in several flavours, from loose strictness to very harsh strictness. But only one of the flavours likes frames. Frames are very unfriendly to certain browsers and especially to people using screen reading software and brail browsers. I will come to this in the Disability Accessibility section.
Avoid formatting in the XHTML code (I will get onto this next)
So how do I not use formatting, the site will be very boring!!
You use CSS (Cascading Style Sheets). I wonÆt go into the details of these here as there are better tutorials available, but I will show you how they can be used to make XHTML look the way you want it to!
When making a site in XHTML you want to avoid putting formatting in the file. There are a number of reasons for this. The main is to keep the XHTML as just definition of the source and structure of your data.
So if I wanted to display the above text I would lay it out in the XHTML like this
Code:
<h1>So how do I not use formatting, the site will be very boring!!</h1>
<p>You use CSS (Cascading Style Sheets). I wonÆt go into the details of these here as there are better tutorials available, but I will show you how they can be used to make XHTML look the way you want it to!</p>
Code:
<p>When making a site in XHTML you want to avoid putting formatting in the file. There are a number of reasons for this. The main is to keep the XHTML as just definition of the source and structure of your data.</p>If I want to change the font and style of, say, the heading I would redefine the <h1> tag. So if I want <h1> to be Arial, bold and font size 20 I would first set up this style
Code:
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: bold;
}The corresponding style would be
Code:
. tnrI {
font-family:"Times New Roman", Times, serif;
font-weight: italic;
}Ok this sounds like a lot of work.
It is to start with, but when you have it set up, the production of pages is very rapid. You can reuse style sheets in any of you files. Also your XHTML files will be a lot neater and easier to edit with no formatting in them. Also if you want to change the format of your site you just edit the CSS file. Some people use this to change the format seasonally, like at Christmas. The data stays the same; you just edit the CSS or attach a new one.
If someone is using a browser that does not support CSS or formatting (e.g. text readers for the blind) your XHTML file will still display its contents just without formatting.
A few things to remember
You can use tables but widths, heights, colours etc should be defined with CSS classes.
You can have more than one style sheet associated with a file. More browsers now accept several types of ômediaö dictated style sheets. For example you can have a style sheet for display on a pc, one for display on a palm top and one for print e.g.
Code:
<link href="sci_articles_print.css" rel="stylesheet" type="text/css" media="print" />
<link href="sci_articles_hand.css" rel="stylesheet" type="text/css" media="handheld" />
<link href="sci_articles.css" rel="stylesheet" type="text/css" media="screen" />Once you are all up and running you can validate your XHTML file with an online tool at http://validator.w3.org
This will check out your code and if it is wrong will give you advice on how to correct it. If you have a valid XHTML with will give you a bit of code to add to your site that will declare it XHTML 1.1 valid!.
There, that was painless wasnÆt it? Welcome to the world of conformity. Go to http://www.w3.org for more information on XHTML.
Disability Accessibility
Ok now that you are XHTML compliant lets look at making the site accessible to people with disabilities. Yes this means more work, but if you donÆt then your site will be inaccessible to about 10% of the population. There are 2 main standards the American Section 508 which all federal websites must adhere to and the W3C's WCAG. WCAG is spilt into 3 priorities. All websites should adhere to Priority 1
There are a few simple steps needed to make your site more accessible.
If you are using XHTML you are already stepping in the correct direction.
Imagine, for a moment, that you cannot see the formatting of your site. You are a text to speech program. Now read your source code to your self. Does it make sense?
What language are you using?
Do your images have an alt attribute? If not how is the reader to know what the image is.
Do you have a table? What is in the table? Is it just for formatting or does it have data in it?
So letÆs start with describing your site.
First set the language. In XHTML this is done in the <html> tag. For English this would be
Code:
<html xml:lang=öenö>Make sure images have an alt attribute.
This gives text readers or people with just text browser a small description of the image. If the image is very important you should use the longdesc attribute for the image. This should be a link to another file that describes the image. Not all browsers support the longdesc attribute so you may need to include a ôdö link. This is a hyperlink to the same description file, with a small ôdö as its link text.
So I have a vital image this is how I would code it.
Code:
<img src="images\approved_aaa.gif" alt="Vital image" width="88" height="31" longdesc=ödesc1.htmö/> <a href="desc.htm">d</a>If the image is just for effect all you need is to use the alt attribute.
This goes for all non text items on the page. They should all have an alt attribute describing them
Tables should always have a summary of their contents even if they are just for layout. This is defined with the ôsummaryö attribute.
If there is data in the table, e.g. it is a price list, you should use table headers to describe the data.
E.g. <th>description of column content</th>
I wonÆt go into this as there are a lot of tags that can be used to define the contents of a table. Go to http://www.webaim.org/howto/tables/tables3 for some good information.
One very important thing to remember is to include a space ( ) between hyperlinks!! This always catches me out.
Go to http://www.w3.org/TR/WCAG10/ for a full list of specifications
It comes down to common sense. Read your site. Does it have colour. If it does, can the site be read with out it? DonÆt use colour to describe things such as, ôClick the red button to continueö!!
Can the site be read without any formatting? If it is correct XHTML then yes it can.
Run your page through http://webxact.watchfire.com/
And see if you are up to scratch!!
Also a program that I have used, and was reminded of by John Barnett, is APrompt
This is a free downloadable app that can be used to check your pages in much the same way as Bobby is used. It will give a rating out of 3 based on the same rules as Bobby (i.e. WAI)
I have used this to get sites ready to go through Bobby as Bobby is still more recognised in the accessibility world.
Get it here
http://aprompt.snow.utoronto.ca/
Thanks John
If you have a nice site that you have spent many hours of design on and suddenly find out you need to make it totally accessible, but it looks really hard to convert, do not fret. If you have used XHTML you can just link from the index page to an accessible version that uses a simplified CSS file.
Or you can write a simplified text site that has a text based link map of the site. This is useful if you have a Flash site.
If I have to make a flash site I tend to write the Flash site and then make a text based site that can be got to from the index page.
There is not much to it, just keep the layout simple and read the guide lines. Imagine you are colour blind, or canÆt see well or are using a brail reader.
A good description can be found at
http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html
Hope this helps. If you need more added to this then just tell me
Andrzej Marczewski