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

Today’s comic features the year 1991, where a time-traveling Jeremy Keith, a younger John Foliot sporting a ponytail and Vanilla Ice are involved in a pivotal moment of history that would make or break Sir Tim’s invention of HTML.

I am reliably informed by those involved that my version of events is remarkably close to the truth. -cough- Really.

Two things made today’s comic possible. The first is this glorious snapshot of history: John Foliot hanging with Vanilla Ice. You’ll note Foliot had that brilliant mustache even in the early nineties. I also couldn’t help but notice Ice’s immaculate eyebrows.

The second is this post by Jeremy Keith on the subject of Hypertext History, where he discusses wwilfing his way to the early history of HTML and gazing upon the source code of the very first document published on the web. What’s really neat is his discovery that the page essentially validates as HTML5. Gadzooks!

Lest ye think he or I are saying Sir Tim was some sort of web prophet predicting HTML5, consider this response by Zeldman on that very topic. The fact is, HTML5 is meant to stretch backwards to be compatible with the best practices of the past while embracing the future. If that spec works so well with the earliest pages, then job well done, folks.

Both the first website and Teenage Mutant Ninja Turtles 2 appeared to the world in 1991. I was fourteen, a coding geek, and a massive TMNT fan. But even at that young age, something didn’t quite sit right with Vanilla Ice’s random musical segment inserted into my turtle movie experience. Yet, as today’s comic implies, maybe that was for the best. Maybe Ice did us all a favor. Or maybe not.

Take a gander and decide for yourself.

HTML5 is a mess.

That was a phrase in my Refresh presentation in December, when I was speaking of the dueling organizations jockeying for control of the spec.

At the time of my writing, I did not know how clean it was by comparison to its status today.

Today’s comic features Hixie the Leviathan interrupting a Muppet-show like meeting of the W3C HTML5 group. Blame the parody of Henson’s creations on the commentary of one Mr. Jeremy Keith. Tweets like this are candy for people like me. The comic also features Sam Ruby, John Foliot, Manu Sporny, Jeremy Keith and Bruce Lawson as Muppet parodies.

The fact is that it seems that Ian “Hixie” Hickson, the HTML5 editor, has taken his ball and gone home. He’s started splitting out the HTML5 spec on the W3C side of things into a shredded mess, by his own words with the hope that if the W3C spec becomes a giant mess, people will drift to the WHATWG spec by default. He’s petulantly insisted that microdata (his own creation) is part of HTML despite the recent W3C work that resulted in it being moved out of the spec. He states that the WHATWG spec trumps the W3C spec, so the latter organization has to get over itself and get back with the program. He’s implied that he’d prefer authors (that’s web designers/developers) stop using HTML5 features as much as they have because it’s causing problems. (This further reinforces my belief that Hixie is following an Implementer > Author > User mentality instead of the User > Author > Implementer mentality that HTML was built upon.) He’s made HTML versionless, insisting that HTML5 is a snapshot that he’s already gone past, and is sitting as monarch for life on the continuing evolution of the spec.

All this from a guy who’s catch phrase seems to be “I don’t understand.” Which is, to me, a dangerous trait in a person empowered with absolute rule over the spec.

In short, like Jeremy, I’m frustrated with a lot of the recent HTML-related issues from the front of advocacy. I’ve tried to sell HTML5 (and it’s grab-bag of toys) to co-workers, peers in web design, total strangers, and friends who didn’t escape a conversation early enough. I want to see it used more, so the browsers speed up implementation of juicy features, so I can use it even more excessively, and so on.

But if people don’t even know if HTML5 exists anymore, or the status of the organizations working on it seem to be out of whack, why would they bother using the <video> tag or exploring <canvas>? We need to give people something to work with. Which means we need to not have insane grandstanding by a single individual.

But hey, this is just one squirrel’s view: HTML5 is a mess.

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.

Like probably every developer/designer who is getting confident with mad HTML skills, CSS styling, and JS wrangling, once I got to the point of consistently making semantic, validating pages, I figured I’d had a handle on what a proper web page needed to be so that anyone, with any browser, could properly experience. That would free me to move onto more important subjects like figuring out how to outshine everyone else on the newest, baddest CSS3 styling possible.

Then, at Web Directions North, I attended Derek Featherstone’s Accessibility Beyond Compliance presentation. By the end of it, I could spot at least a dozen things I was doing wrong, very wrong, with my coding. I figured there was even more that wasn’t correct. Accessibility, which I understand as making the web accessible to people with sensory or cognitive disabilities, was a topic that I’d taken horribly for granted. I assumed if it validated, it’d work out. That was naive, to say the least.

Since then, I’ve been trying to get more familiar with the topic while simultaneously keeping up to date with everything else that makes the web work. Trying best suits what happens. I’ll admit, I’ve been thinking of it as a low priority, which I knew was the wrong attitude. But I’ve made efforts to ensure my JS-powered interactivity makes use of the right tags (buttons instead of spans, for example), although I’m still unsure of how to announce the change of a page (like a AJAX-based popup) to a screen-reader. It was incremental, but I was improving.

With this site, with the comic, I’ve been slower. After all, a comic is at it’s heart a visual medium. Would a blind person want to sit through the annoyance of having the joke described to him, like the co-worker’s bungled re-telling of a standup joke he heard last night?

I started reading a lot about HTML 5, and the arguments that it’s birthing process has spawned. One of the banners that differing “sides” of the involved parties frequently have been waving is accessibility, or the perceived lack thereof, or the problems with different scenarios of implementing it. One of the voices I’d see the most was John Foliot, who’s graced this comic a couple times now. I’ve even been lucky enough to have him provide me with a technique for making an accessible summary of a comic for this site.

I have not yet implemented that technique. How much do I suck? After today’s comic, I will be doing so (exact implementation time this week varies).

What brought this topic back to my mind was a string of comments on last week’s comic, which discussed the “pick an icon” custom CAPTCHA that my comment-system makes use of. If you haven’t posted here before, it provides three images, and asks you to click on one to confirm that you’re not some horrid robot. I had thought about blind users when I made it, and ensured each image had descriptive text that didn’t named the image’s object, but provided enough prose about it to let them know what they were seeing.

In the comment discussion, some problems with how that system was interacted with came up, including challenges for screen-readers that I hadn’t anticipated, and the issue of the cognitively-disabled, which I hadn’t even thought about. One well-meaning commentator, in my defense, said something to the effect of “Well, you can’t always make it work for everyone.”…

I didn’t care for that, even though I know he didn’t mean ill by it. The thing is, I like the web, a lot. It’s a huge part of my job, my hobbies, and my ability to communicate and learn about all sorts of things in the world I can’t afford to go visit in person. How would I interact with it if I was suddenly stricken blind? Would I be satisfied with my experience surfing on a screen-reader, listening to pages as they were written?

Yesterday, I closed my eyes, and tried to just make use of Microsoft’s Narrator program, starting with the task of activating the program from scratch while blind. I was able to get it going, but after about two minutes of trying to do anything with my computer, I shut it off in frustration.

Today’s comic, which technically stars John Foliot, is an exploration of that frustration, and hopefully shaking people out of the passive assumption that it’s OK if their website isn’t working for a small subset of surfers.

It also reflects a challenge for myself. I need to implement a summary system for the comic for blind readers. I need to update the CAPTCHA to better serve blind/low-vision readers and make it easier for the cognitively-challenged to understand while still being confusing to a robot. I probably need to do more than that, but I don’t even know what other challenges the site represents yet.

Check out your site. If you had to listen to it, would it be usable? If not, what are you going to do about it?

I can’t help but be shocked at times at the drama and ugliness that builds up around the HTML5 effort. Good men and women, thinking that they can make a difference, time and again enter the dangerous mailing lists of the W3C and WHAT WG only to be ignored at best or belittled and chewed to pieces. These are zones (allegedly) of collaboration, but instead seem more at times like zones of war.

Go ahead and take a look for yourselves.

I’d think that this was just me overreacting, but when I tweeted on Sunday about my thoughts on the drama in the lists, I got a number of responses that illustrate that I’m not alone in my perception.

Jin Yang indicated that popcorn was a good snack while watching the drama unfold. After I made a bar brawl analogy, David Peterson suggested that whiskey might help them calm down, and that his two year old has progressed farther in the manners department. John Foliot provided some perspective sharing that this “us & them” mentality is a relatively new thing. And Manu Sporny joked that the W3C and WHAT WG originated as community theater groups.

Naturally, his joke was comedy, not fact. But I couldn’t help but think, what if…? So today’s comic portrays Manu Sporny and the Squirrel attending a fateful showing of Our American Cousin.

I want to say that I do see a lot of polite dialogue in the lists. I’m just amazed at how much bad behavior (sometimes well dressed, mind you) makes it into the discussions. Here’s hoping the good outweighs the bad by the time Last Call rolls around.

(As a closing note, I like the term Dundrearyisms.)