I just wanted to share with the world some thing which I have just created for a project that I am working on. It is a form which is for inputting an address. I decided that it would be quite good to make it as accessible as possible, so I turned to that great site accessify.com and their wonderful Quick Form Builder. I used the address elements as described in the vCard format, which are also microformat (hCard / adr) friendly. I then used the W3C XHTML Validator and the W3C CSS Validator to make sure that all is in order with XHTML 1.0 Strict and CSS validation. I then further enhanced accessibility by doing very rigorous accessibility checks with achecker.ca adding any elements and attributes that it recommended.

The resultant code looks a bit like this:

<form id="address" action="#YOUR-ACTION-GOES-HERE" method="post">
<div><label title="Post Office Box (if applicable)"  for="txt_PostOfficeBox">Post Office Box</label>
<input id="txt_PostOfficeBox" name="txt_PostOfficeBox" type="text" tabindex="1" /></div>
<div><label title="Street Address (first line)" for="txt_StreetAddress">Street Address</label>
<input id="txt_StreetAddress" name="txt_StreetAddress" type="text" tabindex="2" /></div>
<div><label title="Extended Address (second line)"  for="txt_ExtendedAddress">Extended Address </label>
<input id="txt_ExtendedAddress"  name="txt_ExtendedAddress" type="text" tabindex="3" /></div>
<div><label title="Locality, City, Town or Village" for="txt_Locality">Locality</label>
<input id="txt_Locality" name="txt_Locality" type="text" tabindex="4" /></div>
<div><label title="Region, Province, State or County" for="txt_Region">Region</label>
<input id="txt_Region" name="txt_Region" type="text" tabindex="5" /></div>
<div><label title="Post Code or Zip Code" for="txt_PostalCode">Postal Code</label>
<input id="txt_PostalCode" name="txt_PostalCode" type="text" tabindex="6" /></div>
<div><label title="Country or Nation" for="txt_CountryName">Country Name</label>
<input id="txt_CountryName" name="txt_CountryName" type="text" tabindex="7" /></div>
<div><input type="submit" value="Submit form" tabindex="8" /></div>
</form>

It is:

  • XHTML 1.0 Strict Valid
  • CSS Valid (and unobtrusive - as all styling is in a separate CSS file)
  • Accessible to WCAG 2 AA standards, and probably to a few other standards (it partially adheres to Section 508, because I’ve decided not to set the value attributes)
  • Semantically enhanced through Microformat (adr) class names (i.e. it is therefore <acronym title=”Plain Old Semantic (X)HTML”>POSH</acronym>)

I’ve got an independent page showing this example available:

Of course if you’re making the address form as part of a larger form then I would recommend surrounding the address sub-form with the HTML “fieldset” tag.

If we all used address code such as the above then we would be able to ensure conformance with standards (code, accessibility and location standards), it would allow our websites to become machine readable and malleable and would enhance the users experience. That is, of course my opinion, but it does sound quite useful to me. Of course my above form elements could probably be enhanced in several ways, but this was good enough for me and for the project that I am working on.

Oh - on a separate note, its almost Christmas. So if I don’t make a blog post before then a Great Yule, a Merry Christmas, plenty of Seasonal Greetings and a Happy New Year to all!

Daniel