An Exercise in the Alchemy of XHTML 1.0 Strict, WCAG 1.0 (triple A), Section 508, and CSS 2.0 Validation

Last updated on January 17, 2006

 

Purpose

• A learning experience in order to understand what was necessary to author the HTML in accordance with XHTML 1.0 Strict, WCAG 1.0, Section 508, and CSS 2.0 validation standards.
• To create a base template document that conforms to valid XHTML 1.0 Strict (i.e. declarations, headers, language, external CSS linkage etc.)
• To attain a Priority 3 rating for WCAG.
• To provide examples of common HTML entities found in most documents as valid XHTML 1.0 Strict and conforming to Priority 3 WCAG.

The primary purpose of XHTML 1.0 is as a transition between the relatively limited HTML and the more robust XML. XHTML is no longer a sibling of HTML but rather a child of XML and as such, seeks to promote the following:

• Divorce page content from design and layout. i.e. not using tables as a placement mechanism for images and text.
• Proper closing of all tags to conform with XML.
• Proper nesting of elements. i.e. sticking this unordered list inside <p> tags will throw an error.

 

Lessons Learned

One thing that I've learned from this experience is that unless some really good authoring software comes along, writing validated pages is going to end up back in the hands of programmers. Without easy to use authoring tools, the browsers will never be able to fully move on to stricter standards. No browser developer is going to risk losing market share by breaking a huge amount of the internet by refusing to render improper pages.

Another thing I've learned is that authoring validated pages requires a whole lot of work. I estimate that 40% of the markup in this tutorial is solely to support WCAG and Section 508. This renders the readability of the markup much more difficult to follow along with and make changes to. Where before I was pretty consistent at breaking my markup lines at 80 characters, I now have very oddly shaped "paragraphs" of markup. Each of which requires a good deal of reformatting if I add or delete just even a couple of words. Don't get me wrong, I'm not complaining, just trying to emphasize the point I made earlier about the need for really good authoring tools. Without them, I just don't see your average Joe putting in the time and effort necessary to author validated pages. This is especially true when it comes to multimedia content where synchronized captioning of spoken text is required.

All in all, one thing is for certain. The old adage "You can please all the people some of the time, and some of the people all the time, but you can never please all the people all the time" is very apt. If you decide to go full-bore using the latest tags and elements you are going to break older browsers. We'd all like to think that in this day and age of innumerable exploits, everyone would keep their OS and browsers patched, but it just doesn't happen. A quick look at webserver logs for an even minimally popular site dispels that idea in a heartbeat. One of the driving forces behind the use of newer tags is WCAG 1.0 and Section 508. One issue with these in particular that you'll quickly come to realize is that while we really should make every attempt possible to make our web pages accessible to those with disabilities, doing so has an aesthetic impact on the page as well. A good for instance is the Form Legend element (see Formative Examples) which draws a box around associated form elements.

 

General Rules

• To truly force a browser to render a page using XHTML you have to set the MIME-type header to "application/xhtml+xml". However, since there are only certain browsers that fully support XHTML, you need to ensure the browser can actually render it. For Mozilla based browsers, this is relatively easy (see the Resources section of this page to view this tutorial's source for how to do it.) To see how much XHTML various browsers support, take a look at the W3C XHTML Media Type Support.
  
  
• If you use the XML Prologue as follows <?xml version="1.0" encoding="ISO-8859-1"?> then you will force IE into Quirks Mode which will render the page poorly. Use scripting to test for an IE browser and don't output the prologue if it is. See the source of this page in the Resources section to see how I accomplished this in PHP.
  
  One good thing about using the prologue during the authoring phase is that it'll catch a large majority of mistakes without the need to validate through an external source.

• Any tag opened must be closed.
  
  
• Empty tags must be closed as follows: <hr />, <br />
  
  
• All tags and attributes are lower-case: <hr /> not <HR />. However, attribute values may be mixed case.
  
  
• Use double-quotes for attribute values: <a id="example">
  
  
• Do not overlap elements: <strong><i>Hello</strong></i> is incorrect.
  
  
• Many elements no longer allow nesting. This was one of the biggest stumbling blocks for me. It was easy to find examples of use, but there was a lot of shuffling elements around to find a nesting order which did not break validation. The form in Formative Examples is a good example.
  
  
• Tables require captions, summaries and <th> elements.
  
  
• The "align" attribute is depreciated in nearly everything except <tr> elements. However, the W3C validator let me get away with using them in the below table to center the right-hand column.
  
  
• There are a good number of depreciated elements, so take a look at the Resources section of this page to check them out.
  
  
• If you use an acronym, you need to provide a definition using the <acronym title="A Major Headache">AMH</acronym> tag. This requirement alone is responsible for the majority of markup and readability issues while authoring this tutorial.

 

Formative Examples

Some basic examples

Element / Snippet	Output
<hr />
<a href="http://www.example.com" title="Describe the object linked to"> The Example Website</a> NOTE: Hovering over the link will display the "title"	The Example Website
<form id="exampleForm" method="post" action="validation.php"> <fieldset> <legend>Example input</legend> <p> <label for="exampleData">Enter Data:</label><br /> <input type="text" id="exampleData" value="Data goes here" /> <input type="submit" id="go" value="Go" /> <p> </fieldset> </form>	Example input Enter Data:
There can be only <del>two</del> <ins datetime="1994-11-05T08:15:30-05:00" title="Changed as a result of one biting the bullet"> one</ins>! Instead of using font decorations like strikethrough and underline when you need to keep changes intact. It also provides for a hover tooltip on the new portion of the text to provide an explanation for the change	There can be only two one!
<a href="http://validator.w3.org/check?uri=referer" title="XHTML Validator"> <img src="images/xhtml10.png" height="31" width="88" alt="Valid XHTML 1.0 icon, XHTML Validator" /></a> NOTE: Hovering over the link will display the "title" in every browser except IE, which will display the "alt" information. Notice the "title" attribute is associated with the link and not the image. Further note that the "alt" tag contains both the image description, a comma, and then the same information in the "title" tag. This is the best workaround for the broken IE browser to ensure compliance with WCAG 1.0 (see resources below)
<table width="100%" cellpadding="2" cellspacing="0"        summary="Basic Table Example"> <caption>Basic Table</caption>   <tr align="center">     <th>&nbsp;</th>     <th>Col-1</th><th>Col-2</th><th>Col-3</th>   </tr>   <tr align="center">       <th>Row-1</th>     <td>R1C1</td><td>R1C2</td><td>R1C3</td>   </tr>   <tr align="center">       <th>Row-2</th>     <td>R2C1</td><td>R2C2</td><td>R2C3</td>   </tr> </table>	Basic Table   Col-1 Col-2 Col-3 Row-1 R1C1 R1C2 R1C3 Row-2 R2C1 R2C2 R2C3
<table width="100%" cellpadding="2" cellspacing="0"        summary="Advanced Table Example">   <caption>A more advanced table</caption>   <thead>     <tr>       <th>Col-1</th><th>Col-2</th><th>Col-3</th>     </tr>   </thead>     <tfoot>     <tr align="center">       <td colspan="3">Table created 9 Feb 2005</td>     </tr>   </tfoot>   <tbody>     <tr align="center">       <td>R1C1</td><td>R1C2</td><td>R1C3</td>     </tr>     <tr align="center">       <td>R2C1</td><td>R2C2</td><td>R2C3</td>     </tr>   </tbody>           </table>   NOTE: Use this type of table when you know you're going to have multiple pages. The header and footer will output to every page automatically so you don't have to hardcode it.	A more advanced table Col-1 Col-2 Col-3 Table created 9 Feb 2005 R1C1 R1C2 R1C3 R2C1 R2C2 R2C3
<object type="application/x-mplayer2"         codebase="http://activex.microsoft.com/activex/controls                  /mplayer/en/nsmp2inf.cab#Version=5,1,52,701"         standby="Loading Microsoft Windows® Media Player                  components..."         data="images/johnwestbear.wmv"         width="200" height="163"         title="Movie: Fighting a Bear Over Salmon Commercial">   A funny commercial about a man attacking a bear to steal the   salmon  away from the bear. It looks very realistic until the   bear starts throwing some karate moves.   <param name="movie" value="images/johnwestbear.wmv" />   <param name="animationatStart" value="0" />   <param name="transparentatStart" value="0" />   <param name="autoStart" value="0" />   <param name="showControls" value="1" />   <param name="Volume" value="-20" /> </object> NOTE: This is technically the only item on this tutorial which isn't 100% compliant. It's mainly here to show how to validate it against XHTML 1.0 Strict. In order to validate it against WCAG 1.0 and Section 508, it would require that I provide captioning of the spoken text. Since I am not much of a multimedia guy, I'm going to just provide a text equivalent of what is being said when I get a bit more time. Just FYI, this is still a work in progress. As is, it's broke in IE because the way IE requires the markup to stream the video is in direct contradiction to XHTML 1.0 Strict. I spent a lot of time trying to fix this particular one for Firefox. It says just about everywhere that the <param> values are boolean and all the examples used true/false. Firefox was ignoring these and I just happened to run across a site using 1/0 values. Gave it a shot and it fixed it.

 

Resources

Code Sources

View the source of this page (including PHP).
Get the basic XHTML 1.0 Strict Template.
Get the CSS page used for this tutorial.

Valid HTML 4.0 Elements

For a list of all elements and their use or depreciation status, visit the W3C HTML 4.0 elements table

Valid HTML 4.0 Attributes

For a list of all attributes and their use or depreciation status, visit the W3C HTML 4.0 attributes table

Depreciated commonly used tags, elements, and attributes

Non-exhaustive listing

Item	Old use	Fix	Current use
name	<a name="example">	id	<a id="example">
align	<table align="center"> <hr align="center">	CSS	<table style="margin-left: auto; margin-right: auto;"> <hr style="margin-left: auto; margin-right: auto; />
Hyperlink Targets	target="xxxx"	None	Javascript Popup?
font	<font>	CSS	CSS Font Attributes
strike	<strike>	CSS	text-decoration: line-through
underline	<u>	CSS	text-decoration: underline
Script - Language	<script language="">	type	<script type="text/javascript">
Body - Attributes	bgcolor, link, vlink, alink	CSS	background-color, a:link, a:visited, a:hover

If you'd like to see a more complete list, see Liorean Web Graphics comparison of loose and strict

Validation

The below are validation icons to test if your code validates. You may keep these icons and their associated code on your production page if you wish (Provided of course that you pass validation). Please note that there are many validators for WCAG 1.0 and Section 508, and each one has its quirks. Using the WCAG 1.0 Checklist as you go would probably be a bit easier in terms of mitigating most Priority 1 problems.

This page passes validation with all of the below checks. To be completely honest, there was a great deal of hit and miss in order to pass validation for all of these (including the recommended additional validation services). Often I would attempt to fix a problem brought up on one validation failure and inadvertently cause another. This wasn't necessarily the fault of the validation sites as I was learning what was good and bad code as I went through this. However, some validation warnings sent me on wild-goose chases trying to figure out how to fix something that really wasn't broken.

Further, this page is valid for nearly all current browsers but fails for older versions such as NN4, Opera4, IE4. When deciding what level of validation you wish to attain, you'll really need to profile your target audience. If they tend to use older browsers, then you'll need to author your pages to conform to older standards which may or may not pass validation.

     

The W3C hosts a list of sites for further WCAG and Section 508 validation, both on-line and software, which you can use, most for free. Again, each of these tools have their quirks so checking with multiple tools is your best bet.

Here is a short list of a few that I found particularly useful and why.

 

Contact

Feel free to Contact me