Web Access Symbol (for people with disabilities)

 

Multiple Scientific Beakers

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 May 15, 2012

 

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

As a test, I've created a few variations on this page for you. You'll notice the most issues with IE:

For you IE users, the surrounding blue box here is supposed to have rounded corners which Mozilla shows correctly.

 

Formative Examples



Some basic examples
Element / SnippetOutput
      <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


      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)

Valid XHTML 1.0 icon, XHTML Validator
<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-1Col-2Col-3
Row-1 R1C1R1C2R1C3
Row-2 R2C1R2C2R2C3
<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-1Col-2Col-3
Table created 9 Feb 2005
R1C1R1C2R1C3
R2C1R2C2R2C3
<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.

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.

 

Resources

Red Beaker

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.

Valid XHTML 1.0 icon, XHTML Validator  Valid CSS icon, CSS Validator  Level AAA conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0 

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.

  • Cynthia Says WCAG/508 validator
    • Very detailed.
    • Allows you to emulate different browsers.
    • A little unclear on how to make sure everything gets tested. The report shows some areas with no validation information.

  • Red Vial Wave Web Accessibility Tool WCAG/508 validator
    • Very detailed.
    • Provides a graphical representation of elements.

  • Hermish WCAG/508 validator
    • Pass/Fail for all three Priority levels and Section 508.
    • Displays compatibility levels with various browser versions for your page. Clicking the "more information" link will display a detailed table that is excellent.
    • Tests tag attributes for errors.
    • It incorrectly throws a warning for a <TT> tag which does not appear in this page.
    • Stated that this page scored a 70.66 readability level (extremely difficult). I only placed this in red because they don't tell you which index was used for the calculation and it's not consistent with other readability level evaluations. If you want to test your readability level, I suggest The Readability Info Website, which calculates against seven different indices. They rated this tutorial less difficult to understand than an average PC World Magazine article.
    • I was contacted by the author of Hermish and he's working on trying to quash the <TT> bug I ran across.

  • Ocawa WCAG validator
    • Highlighted source code to show where errors were found.
    • Provides page statistical data.
    • Error comments aren't very intuitive, but it gets you pointed in the right direction.

  • Valet WCAG validator
    • Provides an excellent outline of elements.
    • Actual validation is kind of lacking in clarity.

  • WebXact validator
    • This one does a bit more than just accessibility validation.
    • Gives you a quality assessment concerning broken links and anchors, navigability, missing element attributes.
    • Provides statistics for page.
    • Extremely detailed.
    • Due to the level of detail, it also cries wolf a bit too much. This page generates a Priority 1 Error due to the use of <pre> tags where it assumed there was ASCII art vs. the HTML code I was displaying in the Formative Examples section. This should be a warning instead. It also generated a Priority 3 Error because it doesn't like the three validation buttons next to each other and states "Separate adjacent links with more than whitespace."

 

Contact

Feel free to Contact me