You may notice that I have a new little banner running on the top right corner of this site… Some folks got a lovely idea recently that for one day, all supporting sites will run without and client-side scripting.

As time has gone by, more and more sites have come to depend on javascript for their basic functionality to work and in my opinion it’s a shame. I admit that even my portfolio (which was thrown together in about 2 days) was dependent for a little bit, but that quickly changed as soon as I started actually using my brain about a year and 1/2 ago.

Why this is such a good idea

It’s a responsible thing to do. If a developer cares about their users or their client’s users, they will build apps using “traditional” methods (GET POST and the like) and then add any client-side scripting to compliment the already functional app or website. Progressive enhancement in my opinion should be a standard, at least unofficially by now.

I hope developers everywhere step-up, and do what they need to to “make it right” and participate on July 7th 2007

http://www.scriptlessday.com/ They’re on twitter as well.

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

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.