Bruce Lawson’s personal site

Last year, the webkit developers have been adding some interesting experimental additions to CSS that gives some sexy effects such as animations, transitions and masks. There has been some discussion about whether we should add such effects into the full CSS spec when they’re already available in SVG: is it desirable or even correct to duplicate features across two technologies?

You might be forgiven for thinking that as a web standards wonk I would be dead against such mixing—surely separation of structure, markup, behaviour and animation is a holy grail for a standardsista?

But my take is that it’s perfectly fine to extend CSS this way. In fact, it’s highly desirable. My initial attraction to standards wasn’t because of philosophical purity, but because it seemed to me that there are practical benefits to use standards: maintainability; portability and simplicity. Sure, CSS has its complexities due to browser support, but at its heart it’s an extremely simple idea.

It reminds me of some of the discussions a few years ago when CSS support was new and some DOMscripting experts believed that JavaScript should be used instead of the :hover pseudoclass, because hover is “behavioural” rather than stylistic. They are probably right; :hover is about behaviour. But they lost the argument because it’s simpler to write a :hover rule than a JavaScipt event handler.

We poor web developers have enough to get our pretty little heads around, what with mark-up, CSS, script, server-side techniques, accessibility, without learning loads of spooky xml just to get a sexy bit of eyecandy going.

Nothing against SVG: it’s great for sexy animations (it’s so sexy that it’s an acronym of “Sleep with Voluptuous Girls”) and it’s perfectly possible already to use SVG to get a bit of menu bling, but I know that I’d much rather add a rule in CSS (that is ignored by browsers that don’t get it) than learn another language. (There’s little overhead to allowing both because browsers would be making use of the same code and routines to display the effects whether they are called from CSS or SVG).

What’s your take?

Opera Dragonfly alpha 2 released

David-not-Dave has been hard at work making Opera Dragonfly a better debugging toolbar for web developers. Alpha 1 was usable but clunky, but now he’s added commandline auto-complete, CSS editing, docked window mode, a debug menu, as well as many bug and stability fixes.

So may I cordially invite you to download Opera Dragonfly alpha 2 for your debugging joy? David will celebrate with another cocktail if you do.

I was pretty excited to go to this bash, as I’ve been out of the conference circuit for a while and was eager to find out what web professionals are talking about these days. The last time I was in Boston and saw Zeldman speak was in early 2003, and most of the questions were about the mechanics of xhtml and css (”Do all attributes need to be quoted?”, “What’s better? Floats or absolute positioning?”).

This conference was mostly design-oriented and “inspirational” rather than code-focussed, which meant a lot of it was over my head. Does this mean that five years later, most designers or developers are entirely at ease with xhtml and css?

My gut feeling in still a “no”: A List Apart readers are the top echalons of web professionals; back in the trenches, as recently as a year ago I was training up a young, but nevertheless tables-n-spacers IE-only developer until she saw the light. It jibed well with comments that Zeldman made in the keynote about there being a dearth of really good courses that teach people Standards-based development. (<teaser>And you can expect a big announcement about that in a week or so. </teaser>)

It was groovy to be in a place where everyone had heard of Opera. The big question was “when will Opera be on the iPhone?”. I don’t know, but it can’t come too soon for me, either!

For me, conferences are all about the people. My first breakfast begain with a gentleman named Todd Libby who told me that I “saved his life” by teaching him Conditional Comments (shh, Todd … my new employers have disappeared previous employees into a fjord for just mentioning proprietory stuff).

It was top to meet luminaries like Kimberley Blessing, Ethan Marcotte and Christopher Schmitt (and thanks for treating us to a huge American meal, Christopher).

I drank way too many beers with Scott Fegette, who was pimpin’ his Dreamweaver while I pimped my Opera, and it’s always a delight to hook up with old mates like Zeldman, PPK and Eric Meyer. Millsy and I went to dinner with Eric on the closing night, where we were privileged to see the baby photos of Rebecca, his newest arrival.

It was over sushi that Eric inadvertently gave me the best joke of the conference by misunderstanding my crazy Limey pronunciation of the word “kudos” (as in my complimenting him “Kudos to you for such a good conference”) as “Q-DOS“, an ancient operating system. No wonder he looked so puzzled: “Crappy archaic O/S to you for such a good conference, Eric!”.

It wasn’t Q-DOS at all; it was well-organised, fun and enlightening.

Photos here

Q: What’s the difference between a rock guitarist and a jazz guitarist?

A: A rock guitarist plays three chords in front of thousands of people.

An Event Apart Boston is going swimmingly, but I’m taking a break to post this story from a BBC site that explains that the BBC has taken the decision to remove the hCalendar microformat from /programmes until

• either the BBC accessibility group does further testing and declares the abbreviation design pattern to be safe to use
• or the microformats community settles on an accessible alternative to the abbreviation design pattern

More at BBC radiolabs blog.

(More detail and backstory)

I’d had the tickets since before xmas so have been excited for months to see the first reunion gig since MBV stopped recording around 15 years ago.

As seems traditional these days, the support band were a bag of shit and the main band took far too long to come to the stage (what are they doing backstage? Finishing a game of monoploy?) and I was knackered, so starting to feel pretty grumpy.

But, as I’d hoped, they blew me away. The last time I saw them (in 1991) I was in a special frame of mind so my memories of that gig are hazy. I recall great visuals, a lot of noise and the band not interacting with the audience. As we entered the hall, Nongyaw and I were offererd free earplugs. I declined: what kind of wussy pink-knickers wears earplugs at a gig?

Answer: me, by the end of the evening.This gig’s chemical intake was restricted to 2 pints of Kronenbourg, so I trust my recollection. MBV are the loudest, noisiest bunch on the planet. Colm O’Coisig flails away on the drums like a madman, Debbie Googe on bass never takes her eyes off him, and Bilinda Butcher and Kevin Sheilds neither acknowedged the audience or each other.

My only criticism is that the vocals, which are never emphasised and only ever another instrument in the songs, were so far down the mix that sometimes they disappeared altogether. Nevertheless, all the hits were played, the visuals were splendid and the last song, You Made Me Realise had me putting my ear plugs in as the band just howled noise.

Fucking marvellous.

What a week! I’ve been sailling up a fjord, drunk Oslo dry with David-not-Dave, Millsy, Shwetank, Navjot and the other teams, and sung Elvis karaoke. It’s great to be part of a team of completely dedicated and brainy people. The team consists of a Japanese chap, a chinese-yank, a couple of Indian lads, a Belgian, several Norwegians, 4 brits, a czech guy, a vietnamese, an Indonesian, a German, an Aussie and a Swede. To all of you who made me feel so welcome and part of you, I thank you humbly. And sorry for my bad Elvis impressions.

Tonight there’s the Opera summer party, which apparently is legendary although I’m still hungover from last night. I can’t go too crazy, though, as tomorrow I’m flying back to the UK to be reunited with the family, and go and see My Bloody Valentine at the Roundhouse (I am so excited!) and then I’m up at 6 on Sunday to fly to the USA for An Event Apart.

Phew.

Here’s a set of pictures of the Opera team.

As Friday 13th is almost always lucky for me, I’ve waited until today to announce what is a major career and hopefully life change.

For the last four years or so I’ve been a jobbing web developer and content editor, most recently as one half of the web team for a large organisation in the legal sector. It’s been a real eye-opener, working to evangelise accessibility and and build using standards while juggling organisational imperatives, sub-optimal content management systems and inflexible backends (ooh madam).

It’s been a privilege to work with the other half of the team, John Rieger, who has a George Orwell-like dedication to clarity of thought and clarity of language, and who is a trained print journalist yet completely gets the web: accessibility, web standards, usability—the whole caboodle. As a team, we crazily tested in other browsers, commissioned Stuart Langridge to write us top-notch scripts (that will be open-sourced when he can be arsed), and relentlessly focussed on the visitor with our web Constitution. I’m proud of what we achieved, and wish I could link to the redesign we worked on for months (but technical gremlins delayed launch).

However, I’ve decided it is time to move on, and am just about to fly to Norway to meet up with my new colleagues at Opera Software where I shall be a Web Evangelist.

Why Opera?

• I’ve been promoting web standards for 6 years now, and the work that Opera does to promote standards will be a continuation of that. As the job ad says, “At Opera, we’re fighting for one web and open web standards, and we’re looking for an enthusiastic, passionate individual to help us in this fight!” and that, I hope, describes me.

  I like the fact that Opera practices what it preaches and will fight for it. I know that many thought Opera was wrong to complain to the E.U. about Microsoft’s abuse of web standards, but in hindsight, many see a link between Opera’s complaint and Microsoft’s change of heart over IE8’s standards compliance.

  To me, that’s a proven track record of success, a good outcome for all (Microsoft included), and I applauded them at the time for doing it.

• I like Opera products, and remember reading in The Bangkok Post in 1998 about this alternative to IE and Netscape that I could carry on a floppy disc. So I did – and it’s been my leisure browser ever since (because of keyboard accessibility, rendering speed, tabbed browsing, and latterly the speed dial feature).

• Opera will support my standards-based activities elsewhere, both financially and by giving me time to do them. This is important to them and really important to me, as I’ve found recently that having a full-time job, being a husband and father, singing in a band, going for my karate purple belt and telling the finest jokes on the web leaves no time to do the other stuff, like fighting the good fight in microformats, HTML5 and following up with the CSS3 call for suggestions.

  Although I’ll be travelling regularly to conferences and the like, when I’m not on the road I’ll be working from home, which means I can walk my daughter to school in the mornings and break from work to eat an evening meal with my family. So I’ll be able to devote more time to HTML5, to speaking engagements, to a hush-hush project with Patrick Lauke, Julie Howell and other accessibility luminaries, and still have a life.

• The bloke who invented CSS, Håkon Wium Lie, is Opera’s Chief Technology Officer, so the whole office is suffused with webby goodness.

• Oslo is cool.

• I’ll be working on a team that includes an old friend from glasshaus publishing, Chris Mills who is Opera’s Developer Relations Manager, and the crazed genius that is Opera’s Chief Web Opener, David “not Dave” Storey.

  (I note in passing that compared with my job title and David’s, Chris’ is rather prosaic; I hope we can get him retitled to “Psychedelic tweaker of web nipples” as he deserves nothing less).

I think that this means that I’ll be blogging about technical subjects even less as I travel to Norway next week and to An Event Apart Boston the week after, and then take some time getting my head round it all. But then there should be a lot more activity and work done soon enough.

Given the huge overlap between my professional and personal interests, I’ll continue to blog here, but will double-post web standards-related posts to the forthcoming Developer Relations Team blog on the Opera site and open comments there. Filth and jokes will live only here, so please stay tuned, and wish me luck.

Oh - and try out yesterday’s release of Opera 9.5, just for me. It’s got new developer tools, and supports WAI ARIA and loads of CSS3 loveliness.

There is an argument raging right now about the HTML5 spec’s proposal that alt text on the img element be optional. The rationale is (I think) that some authoring tools do not allow authors to add alt text, so alt should be not be required for conformance with the spec.

I disagree. As Gez Lemon says, “when an authoring tool doesn’t have anything useful to put in for the alt text, the tool shouldn’t put anything in. A good authoring tool will check for missing alt text and offer to assist the user in repairing the content”. If you choose to use a crap authoring tool, then you will author non-conforming code (should you even care). The conformance bar shouldn’t be lowered to cater for rubbish authoring tools—or ignorant authors.

But as the argument has raged tediously this way and that, people have started to consider photo sharing sites and their use of alt. A site, like Flickr, where you can load up your photos and organise them is an authoring tool: it allows you to author a web page that’s a photo album. Photo sites should therefore confirm to the requirements of the Authoring Tool Accessibility Guidelines.

So, it’s argued by many who believe that alt text should be a mandatory attribute of the img tag, each of these sites should prompt the user for an alternative description of the photo they’re uploading.

But should they?

What’s alt text for?

Now this is really accessibility for beginners. It’s my first slide when I do “What is accessibility?” talks at conferences. But, like everything else in the merry world of accessibility, it’s not quite as simple as it seems.

The HTML 4 spec says

Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors specify alternate text to serve as content when the element cannot be rendered normally. Specifying alternate text assists users without graphic display terminals, users whose browsers don’t support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc. Source: HTML 4 spec

So let’s all agree that alt text is to “assist”. It’s there to help, not get in the way. Because of this, alt text describes the function of the image, not what it looks like.

It’s the same thought process as writing semantic mark-up. I use the Bruce Mantra: “It’s not what it looks like that matters, it’s what it is“.

Alt text for homepage links

A good example of this is the very common practice of having a corporate logo in the header of the page, which links back to your home page. The alt text here should not describe the image, but give its function, which—in this instance—is a link to the homepage.

So you don’t describe your logo with alt=”Bright red rampant unicorn pleasuring a walrus, with a nice ‘wet floor’-style reflection below to show we’re Web 2.0″, you simply write alt=”home”. If you don’t, you fail to assist the screenreader user, as they still can’t find the home link, and will soon get tired of hearing about unicorns and walruses at the top of every page.

(If you put no alt text at all, a screenreader user will hear either the filename of the image, or the URL of the link. This is no great problem if the filename is “logo.gif” or your homepage is “index.html”, but it can be a right bugger with big CMS-generated sites. Imagine listening to this example I picked at random from eBay today (line breaks inserted):

<a href="http://cgi.ebay.com/ws/eBayISAPI.dll?
ViewItem&item=280234051028%0D%0A%09%09&ssPageName=
MERC_VI_RCRX_Pr4_PcY_BID_Stores_IT
%0D%0A%09%09%09%09%0D%0A%09%09%09%09
&refitem=280235709798&itemcount=4&refwidgetloc=active_view_item
&usedrule1=CrossSell_LogicX&refwidgettype=cross_promot_widget
&_trksid=p284.m184&_trkparms=algo%3DCRX%26its%3DS%252BI
%252BSS%26itu%3DISS%252BUCI%252BSI%26otn%3D4">
<img src="http://thumbs.ebaystatic.com/pict/280234051028.jpg" ></a>

So far, so uncontroversial.

Alt text for graphs

Here’s a slightly less clear-cut example, but still pretty uncontroversial. You have a graph that shows that Rampant Unicorn Inc has a 97% market share, while Flaccid Faun Inc only has 3%, so it’s easy to write the alt text.

But what should you do if the surrounding article makes it clear in the text? If the graph is a supplementary visual that gives the same information again, I give it null alt text (alt=”") because repeating the market share figures in alt text is unlikely to assist a screenreader user; in fact, it’s likely to irritate them. Why repeat yourself?

Alt text on photos in articles

Here’s a greyer area still. You have a news item on your corporate site about your C.E.O. being knighted by the Queen and include a photo of him beaming proudly. Does the photo add any information to the piece? I believe that it doesn’t so it needs null alt text rather than alt=”Rampant Unicorn CEO, Bruce Lawson, beams proudly”.

We’re in the territory where it’s very difficult to make rules. In the CEO knighthood example, the image is just decoration: eye-candy to break up the slabs of text. It’s easy to imagine a different situation; a news story about some celebrity plastic surgery with a before and after photo would be carrying information in the images and would probably require alt text.

In this situation, the function of the image is related to the visual content. The “before” picture might say “Bruce Lawson, a portly gentlemen with grey hair and a defeated expression, looking every day of his 29 years” while the “after” picture might say “Bruce Lawson, wearing a dayglo pink diamanté dress, a tiara on his blonde beehive hair, his lips enhanced by collagen and painted glossy red, shows his fabulous new 40 DD bustline”.

The function of images on photo sharing sites

We’ve established that alt text is related to the function of the image and that occasionally it’s necessary to describe an image to explain how it supports the surrounding text or fits into its wider context.

But what is the function of a picture on a photo sharing site? There is no narrative context for the pictures - they are posted as visual artefects, complete in and of themselves.

What is the function of a set of pictures of the same event or same person? It’s certainly possible to write alt text for each picture, describing each image and how it differs from the other, similar pictures.

Take a look at my photos of some punk kids on flickr.

That’s a picture of a small boy with mohican hair and dark glasses - and, at a pinch, that could be the rudimentary alt text. But the function of the picture is its visual content, so wouldn’t we need to discuss the freckles, the slightly gawky grin, the chocolate smudge around his mouth?

Here’s a picture taken slightly later, from a slightly different angle, of the same child:

How would the alt text differ here? How would you write alt text for each subtly different shot if you had taken dozens of pictures?

Crucially: even if people had enough time, imagination and motivation to craft individual alt texts for each photo they upload (and no-one has), does it actually help a person with a visual impairment enjoy that photograph (assisting the user is what the spec describes as the purpose of alt text, remember)?

It’s worth looking at a post to the public HTML mailing list by Michael A Squillace, a blind participant:

Responding, here, as a totally blind web content consumer and not as a member of the IBM Human Ability & Accessibility Center, you can put all of the alt tags on flickr that you desire - I’m still not going to visit it because photos are inheritly visual entities. For the dozen or so photos that have received thousands of views (and that, presumably, resemble the news broadcast rather than the private telephone call), 100 or 150 characters of alt text is not going to make the photo any more useful to me. Are we next going to suggest that all of the songs available on the web need closed caption so that deaf folks can enjoy them, too? As someone who is blind, I realized a long time ago that photography, driving, and painting are endeavors in which I am simply not going to engage and I think it detracts from the conversation about the real utility of alt to concentrate on what I see as, indeed, an edge case. Of course, I am only one person and I’m sure that many of my colleagues and fellow PWDs will vehemently disagree with me. (Source: W3C HTML list)

I’m about to get my arse roasted by flames when I publish this, but that’s why I use null alt text for the vast majority of my pictures in galleries.

Or am I evil and wrong?

Why does Windows Vista hide everything? Where the hell did it put Ubuntu when I installed it as a service running within Windows?

Why the hell does it take about 900 key strokes to install anything because of stupid security access messages?

Why did my screen go blank and I had to reboot? Why are trackpads so shit?

Why are all mail servers different with their incomprehensible authentication options and their SSL messages that would baffle Stephen Hawking?

Why can’t I get all my emails from Eudora on my old machine, import them into a mail client on Vista, that allows me to sending emails from multiple personalities (so emails *to* this domain go out from this domain, while emails to my gmail account go out as that)? Does such a thing exist? Why can’t I find it?

Why have I spent a day doing nothing except wrestle with a new laptop that was supposed to save me time?

Why does Windows Vista Home Premium (hah!!) randomly forget that my HP C5180 printer is installed on the network, whereas the creaky five year old Windows XP machine doesn’t? Like I really want to reinstall the fucking printer drivers every time I print an email.

Why won’t things JUST FUCKING WORK??????

ARRRARAHTTGAGHGGAGDYSADHGSHGDHASDHGGDGGGGGGGGGHHHHHHHH!!!!!

Thanks. I wish I could say I feel better for that.

Q: What do you call a French man wearing plastic sandals?
A: Phillippe Philloppe.