Last week I was in a meeting with a current client who put together a nice little presentation on webstandards and accessibility. Their corporate standards are very progressive and they don't let anything slide. This is a very grateful situation, as I've found it pretty rare that a client is savvy enough to say "We need all of your deliverables to be W3C compliant, accessible and semantic".

Going through their IA documents (which are estensibly just wireframes) I was still left with a few important questions. This site has alot of articles as it's the web-based version of a print publication, and many articles have images inline with the text content, just like a magazine. And one of my questions was, "How can I wite xhtml for images with captions in a semantic and meaningful way?". Part of understanding the most appropriate approach to this problem is understanding what a caption is and how it relates to an img.

What is a caption?

I decided to go to one of my favorite places and look it up.

cap–tion [kap–shuhn]
-noun

1. a title or explanation for a picture or illustration, esp. in a magazine.
2. a heading or title, as of a chapter, article, or page.

Interesting eh? So it looks like a caption is two things, and technically heading tags (ie. <h1>, <h2>, <h3>, <h4>, etc…) are all considered captions. So how does a caption relate to an image?

A caption is the definition of an image

Since we use <caption> (and alt attributes) to describe what is represented visually in an image, we can surmise that a definition list (<dl>) is going to be the most appropriate solution to this issue. By using definition lists we can define the relation ship between the image is the definition's title (<dt>) and the text is the definition's definition (<dd>)

This is my new 1978 Honda CB750 F2 cafe racer.

So as you can see, providing image captions this way allows you to group and associate the content together without requiring a wrapper <div> for positioning or referencing. and if there isn't a caption available, the image can still sit within the <dl> and <dt> tags for a logical inclusion of a caption at a later time.

It turns out that Darren Brierton write this article back in Feb of '05 about this very same topic. He goes to mention in a comment to his own post that definition list's aren't limited to one <dt> element followed by one <dd> element.

The semantics of definition lists is implicit rather than explicit. A <dl> element can contain any old mish-mash of <dt> and <dd> elements and still be valid. It might not, however, make any sense

Jonathan Snook over on Digital Web wrote a lovely little article on what i like to call Oopy (Object Oriented) JavaScript. Oopy JavaScript is much over looked subject for most folks unless they write their own library, extend someone elses and/or happen to know what they're doing in general. Writing JavaScript in an Object Oriented way requires a slightly different approach over Java or other typically Oopy-friendly languages simply do to the fact that Classes are not specified for ECMAScript v3. Macromedia when releasing actionscript 2 jumped ahead of the game by providing much needed class and namespace implementation. where as with JavaScript, we basically have to fake it by using wrappers to keep our object references organized.

Jonathan goes to talk further about the use of prototype property and other than letting us create references to the guts of an object's template, it reduces the risk of memory leaks due to the browser being saved from having to duplicate any objects needlessly.

We can add to the template’s prototype at any time, and the new properties will automatically be available, even on object’s we’ve already created. Let’s rearrange the last example to demonstrate:

PLAIN TEXT

CODE:

1. function Animation(element){
2.    this.animationLength = 30;
3.    Animate.element = element;
4.  }
5.  var animateLogin = new Animate(loginform);
6.  
7.  Animation.prototype.onStart = function() {
8.    alert("The animation is beginning!");
9.  };
10.  Animation.prototype.onEnd = function() {
11.    alert("The animation is ending!");
12.  };
13.  
14.  animateLogin.onStart();

Even though we create the new Animation before we define the onStart and onEnd methods, we can still use them! This is a huge advantage of the prototype-based approach.

So alright kids, get crackin!

This next monday On Monday October 2 I will be giving a presentation to the lovely folks at ULTRA16 on Progressive Enhancement, Accessibility, Semantics and also how to make it happen with Flash. After monday, the presentation will be available here for anyone who may have interest.

Dictionary.com was redesigned recently. I'm not sure if there's anything new going on behind the scenes, but it certainly has a bit of that (dare i say it) trendy 2.0ish look and feel that's slightly reminiscent of blogger.com. Maybe it's just the blue masthead and tabs, I dunno, I can be a retard some times.

re·de·sign (rd-zn)  Pronunciation Key   tr.v. re·de·signed, re·de·sign·ing, re·de·signs To make a revision in the appearance or function of. rede·sign n.

Maybe I never noticed this in all my years of using dictionary.com to make sure that I'm not spelled the word "Weird" "wierd", but they also seem to now have premium content... interesting.