Microformats & Semantic structure (was RE: Best practices for screen readers)

[Slightly off topic]

Andy Mabbett wrote:

> You can mark up a phone number (indeed, a whole address) using
> semantic
> hCard microformat markup:

Uhm... Hang on here.  Microformats are not (AFAIK), in and of themselves,
semantic containers.  Rather, they are a 'standardized' series of class
declarations that can be added to elements in your page (as any element can
take a class), that have had "extended" meaning conveyed to them by virtue
of the fact that they are using a common, publicly shared class name.

In other words, if you are using Microformat notation to mark up contact
information, then each of the bits of information that you have can be
further marked with a class name that has already been publicly agreed to
and "shared".  

For example:

<div class="vcard">
	<h3>Contact Details</h3>

	<div class="fn"><a class="email" id="ctlContactEmail"
href="mailto:jfoliot@stanford.edu">John Foliot</a></div>
	<div class="title">Academic Technology Specialist - Online
Accessibility</div>
	<div class="org"><a href="http://soap.stanford.edu"
class="url">Stanford Online Accessibility Program</a></div>
	<div class="adr"><span class="street-address">560 Escondido
Mall</span>, <span class="extended-address">Meyer 181</span>, <span
class="locality">Stanford</span>, <span class="region">CA</span>, <span
class="country-name">USA</span>, <span
class="postal-code">94305</span></div>
	<div class="tel"><span class="type">Work</span> <span
class="value">(650) 862-4603</span></div>
</div>



The container div above has a class of "vcard" - as such I can style it any
way I want in my CSS if I wanted to: 

.vcard {
     margin-left:-999px; /* heh heh */
}


However, because I specifically used the class name of 'vcard' (as opposed
to say, 'contact') for that <div> I added a recognized Microformat class
name to my DOM structure - which means that other Web-2 type applications
can parse my DOM tree looking for "common" class names and then grab
associated data and interact with it. 

Visit http://soap.stanford.edu and go to the bottom of the page.  There is a
link there (Add SOAP to your Address Book) that passes the url of that page
(which includes the code snippet from above in it) to the technorati website
(for further processing), spitting out information in the generally
standardized hCard/vCard format - it can be opened and saved in
Outlook/Outlook Express, Thunderbird, and other mail clients/contact
management tools that support vCard.

So what is happening is that I am extending the usefulness of the content,
but it is not "semantic" in the truer structural sense of the concept.  The
microformats/vCard notation does not have the same relevance or weight as
paragraph (<p>) or list (<ul>) does - heck, in the example above I used
<div>s and <span>s for the classes, and <div> or <span> themselves have *NO*
semantic meaning.  <div class="paragraph"> does not equal <p>; an important
consideration for Adaptive Technologies.

Cheers!

JF

******************
* Microformats
  http://microformats.org

* Microformats Cheat Sheet 
  http://suda.co.uk/projects/microformats/cheatsheet/ 

* Microformats Bookmarklet 
  http://leftlogic.com/info/articles/microformats_bookmarklet  
 (which lead me to the most excellent Firefox plug-in "Tails" -
https://addons.mozilla.org/firefox/2240/ - SLICK!!) 

* More Microformats highlighting 
  http://www.hicksdesign.co.uk/journal/more-microformats-highlighting

Received on Friday, 6 October 2006 19:14:50 UTC