Version 23 of Generating Accessible HTML

Updated 2003-11-11 14:28:37

I'm interested in writing a Tcl package to aid in the generation of HTML that is accessible to users with disabilities. I'm already well-versed in writing accessible HTML, especially web-based forms, but I'm unsure where to begin on the Tcl side of things:

Questions

• I'd like this package to work well with the existing HTML package, what are some things to keep in mind when subclassing (if that's the proper term) a package in Tcl?
• I'd like to generate the HTML through an XML interface, I'd prefer not to resort to puts except in cases where it's practical to do so. What XML interface(s) are useful (I think Tdom is one)?

Goals

• Should work equally well in a CGI context and with Tcl-based web servers like Tclhttpd.
• Needs to take the drudgery out of writing accessible HTML, which is quite tedious due to the overhead imposed by the additional tagging.
• A perl version is also required.
• Should comply with existing accessibility recommendations, such as those at the W3C.

- WJR

AM Have you had a look at the cgi.tcl package by Don Libes? This provides an excellent example to get started ...

WJR Yes, like HTML, many of cgi.tcl's methods can be used, but some methods output deprecated markup that attempts to define presentation, which should be represented in CSS.

AM Excuse my ignorance, but what does this type of HTML/CSS look like?

WJR Here's a sample web-based form that illustrates the kinds of entities and attributes required:

 <form action="#" method="get">

 <fieldset title="Example Form 1">
 <legend>Example Form 1</legend>

 <p>
   <label for="first-name" accesskey="n">First <span class="accesskey">N</span>ame:</label>
   <input type="text" name="first-name" value="First Name" id="first-name" tabindex="1" />
 </p>

 <p>
   <label for="last-name">Last Name:</label>
   <input type="text" name="last-name" value="Last Name" id="last-name" tabindex="2" />
 </p>

 <p>
   <label for="fave-color">Favorite Color:</label>
   <select name="fave-color" id="fave-color" tabindex="3">
     <option value="Select an option" selected="selected">Select an option</option>
     <option value="Red">Red</option>
     <option value="Yellow">Yellow</option>
     <option value="Blue">Blue</option>
     <option value="Green">Green</option>
   </select>
 </p>

 <p>
   Your Pet:
   <input type="radio" name="pet" value="Dog" tabindex="4" id="Dog-el" />
   <label for="Dog">Dog</label>
   <input type="radio" name="pet" value="Non-dog" tabindex="5" id="Non" checked="checked" />
   <label for="Non">Non-dog</label>
 </p>

 <p>
   <input type="submit" class="form-button" value="Save" tabindex="6" />
   <input type="reset" class="form-button" value="Reset" tabindex="7" />
 </p>

 </fieldset>
 </form>

Given CSS, compliant browsers will render it something like this:

[http://jrankin.ath.cx/tclerswiki/example-form-1.png