• It explicitly associates text with a form element, so a screenreader doesn’t have to guess what text goes with what form element.
• For checkboxes/radio buttons, it gives the user a larger click area, which is useful for people with limited vision (or me, since I always end up missing them!)

You can find a number of simple usage examples on the W3C’s WCAG Techniques page for labels.

I recently discovered something new about the <label> element (new to me). I hadn’t realized that you can associate multiple labels to one form element. This is useful because it allows you to associate even more information with a form element. With it, I could write something like this:

<label for="box">1. </label>

<input type="checkbox" id="box"/>

<label for="box">This is some text with a 

<abbr title="full title name">shrt. title</abbr> other stuff inside.</label>

This isn’t the most useful example, but I think it demonstrates the general idea. [Note: normally, I wouldn't write out an explicit number, I would use an unordered list. But without major support for CSS counters, I find myself between a rock and a hard place.] My optimism was quickly quashed though, because, as Roger Johansson mentions, screenreaders tend to ignore two labels. I will have to do some of my own testing to find out more, but I find this very disappointing.

Another interesting application is to include labels for screenreaders, while using CSS to hide them from visual users. Just make your label a block element, give it a 0 width (to remove the width it would have taken in the document flow), and move it off-screen. You cannot simply display: none the label, as that usually hides it from screenreaders. I would like to look further into the end result using current technology (hoping for improved results since 2004), but I certainly believe this leaves no excuse for anyone NOT including labels in their forms.

Back to using one label again, I ran into a Firefox Bug where a link is included in a label element. When a link is clicked inside a label element that is associated with a checkbox, the checkbox becomes checked! Hit the back button, and the item will still be checked, with the visual check the only evidence anything happened. You can see how this would not be friendly to a screenreader (not to mention visual users!) IE and Opera both behave without checking the box. If you have a moment, please vote for this bug and help me get it fixed.

P.S. – when I mention “hoping” to test further, I mean when my Jaws activation FINALLY gets worked out.

First, the biggest. IE8 has been released in initial beta. The release was also included a general overview of IE8’s new features and fixes. It’s actually quite a lot of information to absorb all at once. I’ve skimmed a number of the IE8 whitepapers, and feel the biggest changes are W3C’s WIA-ARIA support, Acid2 compliance, the javascript selectors api, and their assertion of achieving CSS 2.1 compliance. Of course, the devil is in the details, and there is no company for which that statement is more true. They have a lot of work ahead, and we know they talk a good game. The big upside, however, is that they are actually talking about it. Out in the open. Big step, and I applaud them for that.

The other biggest buzz of the day was from Yahoo, in announcing the beta of their Fire Eagle service, an API for broadcasting your physical location to the web. I wouldn’t call it earth-shattering, but I think that there’s a good chance a number of cool things are built with it. Watch the video of it’s introduction, and then take a look here to quickly get an idea of the details. It would appear from the details that it was written in a highly usable way.

Of more direct importance to me, Google has announced their Contacts API. I despise when sites ask me to enter my username/password for other sites. The most offensive request is for Gmail. I don’t have any interesting emails, let me tell you… but I certainly don’t want to let others read them. The Contacts API is a safe way for distribution and use of your Gmail contacts, without threatening the security of your Gmail account or your other Google-stored information. With this, I should be able to sync my Gmail contacts with my desktop mail contacts. I’m very happy about that.

Heading up the long-since-overdue category, AOL has announced they’ve opened their Instant Messenger Protocol, OpenAIM. Finally. I remember ages ago when… well, it’s all in the past now. That’s one big wall that has been broken down between protocols, and hopefully Yahoo and Microsoft will fall in line. It will be great if other apps can finally use the features that have been limited to the AIM client for all this time. I use Adium and Pidgin most of the time (Adium, I believe uses Pidgin’s core), and look forward to seeing what they do with the new open protocol. (On a personal note, hopefully this doesn’t spell any negative news for my friends who work on AIM.)

And to round things off, here’s two smaller releases today (one based on IE8’s Activities):

• The Firefox Operator plugin (for Microformats) has already given a go at implementing Activities, which were announced at today’s IE8 overview.
• The New York Times has contributed a perl module to CPAN. Looks like a useful profiling tool, especially since it profiles line-by-line.

I’ve also been thinking about writing a Firefox extension. It’s about time that I play around with it, and I was thinking that a pretty simple app (like twitbin) would be a good place to start. No plans yet, but… ideas.

Speaking of ideas, when is twitter going to become open source and (then) de-centralized? That would be awesome…

Alright, now time to take the design and make it generic… woo hoo overloading!

Looks fine in Firefox 2 for mac/pc. Opera, has a small problem, I think due to a varied em interpretation (it’s different on each platform). I tried IE6, and of course, things were missing, but the design as a whole stood up. So a few “non-lazy” changes should do the trick. Having only spent 30 minutes and using :before and :after pseudo attributes, I was surprised IE didn’t send my PC up in flames.

It just occurs to me, it would be nice if I could add a little javascript (for fun, not practical usage). Not sure what I would add it to, however. Oh well, placed on my to-do list after the real design.

For those who are not familiar with Yslow, it is (again) a plugin for the firebug, the addon for Firefox. It tests a website based on 14 varying rules, from server settings to page construction. There are a few on the list that most people haven’t heard of, yet are rather important (I had never heard of an ETag much less known what to do with one). When Yslow came out, I took a peek at the best practices document which briefly explained each of the rules. I wanted to find out more, so I ordered the book. Unfortunately, High Performance Web Sites let me down for just that reason. I didn’t find out much more.

High Performance Web Sites starts off with a table listing alexa’s top 10 U.S. websites (substituting AOL.com for craigslist.org). Then, 14 chapters (one for each rule) are devoted to explaining the rule, and showing how many of the top 10 are implementing it. The final chapter steps through the 10 websites and shows what they do to reduce the load time of their websites.

My problem was that the book really didn’t offer any new information. Basically, the best practices document was explained in slightly greater depth…but only slightly. I was disappointed to find out that there were very few additional ideas in the book… apparently the 14 rules cover the possibilities of writing faster-loading websites (ahem). The chapter analyzing the ten major websites had a ton of room for furthering ideas, but offered a limited few.

I was most disappointed in the book because I had looked forward to more. The plugin itself, and the list of rules are both terrific. Having a concise set of tests to walk through is extremely valuable. I can not say the same for the book. I hope my money went towards further work, yet I wonder how that’s being filtered through O’Reilly (the publisher) and Yahoo (the official creator of Yslow). I recommend reading the Yslow best practices, and taking a look at the Yslow user guide instead.

Finally, I opened Opera for Windows and it brought up a post with all the categories and title set, but with an empty text box.  Guess I have to delete that post, and try again!  Boo!

While all of the other browsers that I tested… for both Windows and Mac display the default font (serif) set to .8em as glyphs that are 9 pixels tall, Firefox for Mac displays glyphs that are 8 pixels tall, but with 1 pixel of anti-aliasing on top. The difference of one pixel usually doesn’t mean much, but when dealing with font-sizes that small, it makes a big visual difference.

I submitted a Mozilla bug report which has not yet been picked up, but I’m not sure if there’s anything to be done, especially if the rendering engine is at all based on the system software (doubtful, since none of the other browsers work the same way). I wonder if the release of MacOSX Leopard is going to affect this.

Gotta love the Mozilla people, though. It’s such a relief that you can even submit a bug report for something like this. A chance for actual interaction, and a chance to better the product. I only wish Microsoft would pay a little attention.

Why this may be difficult: I don’t have a Mac to use at work.

I tried Vienna for mac, as it was free, and it worked on my laptop (since I had already packed up the other computers).  I liked it fair enough.  One of my problems was the keystrokes required to mark all the posts in one feed read, but… aside from that, I had no real problem.  (I learned a trick though, the listed keystroke is apple-shift-k, but really, all you have to press is k by itself!  Useful, but still on the right hand side… not ergonomic enough.)

Since the PC was the first computer unpacked other than the laptop, I thought that I would give a windows reader a try.  I settled on FeedDemon.  I like the stuff it does on its own… the type of display, the checking, and the default behavior of folders.  The thing I can not stand is the poor usability of the application.  The keystroke for marking all feeds in a folder as read is fairly similar to the browser reload… it’s control-shift-r.  My brain defaults to that occasionally.  The real problem is that it has a separate keystroke for marking all posts in one feed as read, which is control-shift-a.  Well, as my brain is hardwired for r, I have pressed that on more than one occasion when trying to mark all posts in a feed as read.  What does this do?  Well, it marks all posts in the folder I am in as read… and since I imported an OPML feed, it marks all of my feeds as read!!!  I’ve already done that at least 5 times.  Yes, it is trivial in the grand scheme of life, death, and taxes, but not insignificant for me.

I think that I am likely to go back to Vienna for the moment, with SharpReader (oldie with no bells-or-whistles, but it works the way I would expect) at work.  If Vienna can’t convince me pretty soon, I may have to go back to Sage.  (Further stating what a great plugin it is).

However, there were requirements for its behavior. The tabs were not allowed to wrap around to the next line. They also could not just drift off the right side of the page. Everything had to be shown. And it was alright for the individual tabs to wrap and grow taller. Basically, I was told the nav had to act like a table, just not in so many words.

Because I am likely more standards-driven than most doing similar work, I wanted to stick with the list. Doesn’t make any sense to have non-tabular data in a table, I thought. Within a few minutes, I had found a semi-solution. W3C recommends the display attribute having a “table-cell” property, which was just what I was looking for. Threw it in my code, hit reload in Firefox, and wham, there it was. Needed a slight bit of tweaking, but it was working for the most part. Then I alt-tab’bed over to IE7….

Nothing.

Low and behold, Microsoft hasn’t added that to IE. Of course not. Why would they? It’s only been in the recommendation since… you know, May 1998. At least! (I don’t have the heart to look any further back).

I am not “new” as my sister would say… I know how it is. I hadn’t expected it to be there, but the more work I had to do on an alternate table-based solution, the more it annoyed me. I keep hearing more and more about the CSS3 recommendation, adding more elements to HTML 5, and all of these other grand documents, which all currently amount to little-to-nothing. Maybe I am missing the point, but if 1998 is going to be ignored, why should 2008 be any different?

I am going to keep this rant short, the rant wasn’t really the point. The greater point is that was enough of a call-to-action for me. That’s what it took to realize I should start looking into what I can do about giving certain browsers a push in the right direction.  They seem to be lost.