CSSquirrel A look at web development and web design by Kyle Weems

On Wednesday I had the honor and pleasure of participating in a podcast recording session with HTML5 Doctor Bruce Lawson, Beginning Web Design author Ian Lloyd, and SitePoint’s Kevin Yank in a discussion about HTML5, and whether it’s just exploded over all our face.

The end product, “HTML5 is a beautiful mess” is now up at SitePoint. I’d be tickled pink if you took the time to listen.

As you may recall, I discussed ranted about this subject on Monday with the strip The HTML5 Show (AKA a Mess) and the related post.

Mostly, HTML5’s a mess in the political sense. The organizations behind it (W3C and WHATWG) are increasingly in conflict with one another. Additionally, in my opinion, Ian Hickson is increasingly disregarding any attempt at a legitimate process and simply putting what he pleases in the spec, as he pleases.

The podcast touches on that matter, and spins out to the state of the actual implementation of HTML5 itself, whether there’s a challenge in getting designers and developers to start using it, the issues of accessibility in <canvas>, and how delightful it’d be to move past plugins.

If I have one beef with the whole podcast, it’s the fact that I’m talking with a pair of Brits. Which, as every movie-going American knows, instantly sound more clever due to their crisp accents. Also, if the transcript is any guide, my sentences tend to roll off the rail quite a bit, inflicting casualties to adherents to the English language.

So, if you have the time, please go have a listen, and then please come on back here and post any thoughts you had at my butchery of verbs, the points that the participants brought up (or even better, the points we didn’t) and how lovely Bruce Lawson’s voice is.

On December 16th, 2009, I had the opportunity to do something I’d been meaning to do for a while. I gave a presentation (in front of an audience, even) about web standards! I was invited to speak at Refresh Bellingham, which was a great experience. Discussing the topics of CSS3, HTML5 and Mobile, I definitely bit off a larger chunk than I needed to (in the future I think I’ll pare the experience down to CSS3 and HTML5 unless it’s for a much longer time format), but by the end of the presentation I felt like I’d done a good job of entertaining the audience and maybe teaching some of them a thing or two.

And, by George, that was a really good feeling.

Entitled: “The Ghosts of Web Standards Present: CSS3, HTML5 and Mobile”, the whole thing ran about an hour and fifteen minutes. Fortunately people laughed at all of my jokes, so it wasn’t too torturous. I talked about the varying level of support in modern browsers for new CSS3 and HTML5 features (and how that shouldn’t matter), as well as my thoughts on the need to be ready for mobile devices today in our designs. If I did it again, I’d probably put more advanced CSS3 techniques and HTML5 tricks in, as I uncovered a whole slew of new things I’d not experimented with before while doing research for it.

Although the slides don’t contain the majority of my witty dialog (I’m so modest), I’ve put them up (after some corrections and modifications) for you to look at if you’d like. The background will flash into it’s proper place two seconds after the page loads, by design (I had some issues with the popdown request for the geolocation interfering with the way the background looked on the slide projector).

The Ghosts of Web Standards Present

Today’s comic is a week or so late to be timely, but I think it’s still topical. It showcases the squirrel about to be launched on a rocket that Hixie insists has reached an appropriate state, even if it seems everyone else degrees.

As you’re likely familiar with my opinion on this topic, I think you can predict the results.

On October 27, 2009, Ian “Hixie” Hickson, editor-for-life of HTML5 (yes, my bias is showing) decided that there were
“no outstanding emails or bugs on the spec”, and flipped the switch on the spec declaring it in Last Call. Just in time to meet the October deadline. Hooray!

As it stands, his status flip may be premature. Or, perhaps, his viewpoint of reality. If you look at the W3C’s HTML issue tracker, you can see it’s got a lot left on it. In response to comments about this difference between the W3C and WHATWG on whether HTML5 had actually reached Last Call, Ian commented “…we have different issues lists and different criteria for going to Last Call.”

Looking at what’s left to resolve, it’d seem the difference in criteria is that the W3C would prefer the job was done properly, as opposed to being done quickly.

I’m inclined to agree with Shelley’s thoughts. Maybe Ian is trying to reassert some control. Maybe he just isn’t concerned with issues like providing unsighted web users with the information they need to understand tables on a website. Either way, it creates the appearance of a move meant to serve himself, not others.

That’s not a reassuring quality to see in our leviathan.

Today’s comic imagines a scenario where Ian “The Leviathan” Hickson, HTML5 editor, “resolves” an issue as a plumber.

I’ve used quotation marks on “resolves” because the English language lacks punctuation to indicate sarcasm. I can only imagine what such a strange mark would look like, the black sheep that was expelled from the childhood home of Exclamation Point and Question Mark after a dispute with his stern father, Period. What would life on the streets do to such a symbol?

I considered using italics, but I didn’t want to look too sassy.

The @summary attribute has been the source of no little discomfort during the gestation process of HTML5, a token of sorts that is lauded, derided, despised and fought over in what seems like an endless battle. I discuss, in my own rambling fashion, my view of the civility of the issue here, which in turn references Bruce Lawson’s post on the topic, Alternate text in HTML5. It’s been the source of no small amount of contention, which I think John Foliot describes nicely over here.

Despite this, for some reason I’d (perhaps foolishly) thought that some sort of accord had occurred with @summary, allowing it to exist in HTML5 as a non-obsolete, conforming part of the spec (albeit with a great deal of snark involved).

I’d recently learned that not only was peace not occurring, but that @summary had found itself into the middle of another fracas. It seems that in an attempt to get HTML5 to reach Last Call status on schedule, Ian is marking unresolved issues in the bug tracker as “WONTFIX”, insisting that people with problems talk to the chairs, and moving on.

One such example of this in action is available for your reading pleasure in this W3C bug report. For those of you in a hurry, I’ll sum it up: People (such as the PFWG) have issue with @summary being marked in the HTML5 validator as “obsolete but conforming” along with a warning message.  Ian Hickson, man of action, disagrees with the PFWG’s opinion, won’t change the (inaccurate) flag, and has decided that the issue (among others) is resolved and simply marking it “WONTFIX.” Apparently it will keep this status, despite the large amount of opposition to this stance.

This is, as John Foliot puts it (in the same report)  “An affront to the web accessibility community that existing accessibility solutions that the current editor disagrees with have the status of WONTFIX simply because the editor disagrees.”

I’m not sure, in the end, if @summary does or does not deserves the bad rap Ian’s trying to attach to it. But I do know, though, that I’m tired of seeing one “benevolent dictator” being capable of deciding the future of the open web single-handedly by sidestepping all the prior discussions and opposing views regarding HTML5 with a simple “WONTFIX” status.

As I first discussed here, and then officially announced here, I’ve been upgrading CSSquirrel with accessibility features to help make this site more accessible for the vision-impaired. I first considered the idea several months back, when John Foliot approached me with a code sample that I could use to give the comic an alternative long description for screen readers. I’ll admit that I didn’t act on it at the time, though, because it seemed like a low priority. How many blind people read comics?

I realized the mistake in my complacency when I received my first blog comment from a blind user here, where he was testing his ability to post despite the CAPTCHA that was present. At that point I realized that if even one person was visiting my site and incapable of at least knowing what was happening in the comic, they were getting a severely degraded experience, which was a disservice on my part.

My growing awareness of how frustrating such a thing would be is borne out in my Squirrel in the Dark post. As a result of this, I went about adding an aria-describedby attribute to my comic’s image tag. Later, based on feedback from a JAWS-10 user and with another suggestion by John, I doubled up with the addition of the longdesc attribute to the image. In both cases, the value for the attributes is an URL for a separate transcript page.

Thinking all was well, I congratulated myself and went back to poking fun at the HTML5 process and spent a lot of time drawing people in spandex.

Of course, it wasn’t that easy.

First, a new accessibility problem had reared its ugly head. When I built the site’s CAPTCHA, I had actually taken vision-impaired users into consideration and provided description text of each image to allow them to select the proper one for the CAPTCHA (mind you, not including the word that the CAPTCHA asked you to match with the image). However, when someone tabbed through the page’s links and fields, the tabbed indexing would go out of order, going through the other input fields for the comments at a different time than the CAPTCHA itself, making the whole affair confusing.

Secondly, I learned that the aria-describedby element isn’t meant to direct to other pages (which I think is a bit silly of a limitation, but I’m not an expert at these things), but rather should contain the ID of an element on the page containing a description. It’s quite a difference, and one I’ll admit I made by failing completely to do enough homework on the matter in advance.

I’d thank Henri Sivonen for his “bug report” on the aria-describedby issue, but he chose to use the issue to draw a comparison to the Super Friends‘ list of concerns (and its initial posting to a blog instead of the WHATWG mailing list) and neglected to mention it to me directly. So instead I’ll thank Laura Carlson for drawing my attention to my error, Arve Bersvendsen for sharing his opinions on alternate techniques, and Steven Faulkner for suggesting a way to use aria-describedby to link validly to off-page content. I know others contacted me about the error, but I’m sorry to say I don’t remember all the names at the moment.

My solution, therefore, was what Steven suggested in the W3C mailing list. The aria-describedby attribute on the image tag now has a value that is the ID of an anchor on the page. That anchor then links to the comic’s transcript page. The anchor is hidden by CSS to avoid distracting sighted users. You can examine a recent comic, like this one on the Super Friends, to see it in effect (if you’re on a normal browser you won’t notice much unless you view the page source).

The CAPTCHA’s messed up tabbing issue turned out to be an easy fix as well. Stéphane Deschamps pointed out in a comment that there was tabindexes on the form’s fields, which was causing the tab order to go screwy. I didn’t know these existed, having failed to examine the blog software’s default fields very much. Now that he’s pointed it out, I’ve taken them off, hopefully making the CAPTCHA less burdensome.

As I’ve stated in the past, I’m a non-expert at pretty much everything that doesn’t involve vector squirrels. However, I have an appetite for absorbing as many web-related skills as possible to help better the web through direct effort or comic-related advocacy. One of these areas of the web that I realize that I need a great deal more knowledge about is accessibility, and it’s a deficit that I seem to share with almost every designer or developer I meet.

Having admitted my deficiency, I’d like feedback on this issue, if you have it. Does the updated aria-describedby technique for serving the transcript actually use the attribute properly? Is the CAPTCHA usable by vision-impaired visitors with approximately the same level of annoyance all people feel when they use a CAPTCHA? Is there another feature on the site that causes accessibility issues that I haven’t mentioned or considered?

To those who contact me with these problems, thank you. I’m in your debt.