The rules: a haiku “is a form of Japanese poetry, consisting of 17 moras, in three metrical phrases of 5, 7, and 5 moras respectively.” I think it’s legitimate for the sake of simplicity to translate “moras” with “syllables.” A reference to a season or nature is a bonus.

A crude example, my Japanese readers may forgive me:

Show us the studies /
says hixie, experts shout fail. /
It’s about people.

And another:

For assistive tech /
canvas is invisible /
like tears in the rain.

So here is my challenge: twitter a haiku about HTML 5 and tag it with #html5haiku. There aren’t any prizes yet apart from the innocent fun of participation, but perhaps somebody would like to donate something?

The main idea is to present leading innovators and their perspectives on eAccessibility from the technical, political, and economic side. Experts on seven panels will briefly describe their own work and their view of accessibility and then discuss the issues.

There’s an illustrious line-up of speakers including Deutsche Bahn, the European Commission, France Télécom, the German Federal Ministry of Labour and Social Affairs, Google, IBM, Microsoft, Mozilla, Opera, the W3C, the Web Standards Project, and Yahoo! talking about these topics:

• Accessible Web Applications
• Mobile Access — Device-independent or Accessible?
• Comparison of National Accessibility Guidelines
• Accessible Rich Internet Applications (ARIA)
• Web Standards and Accessibility in Higher Education
• Harmonising European Accessibility Guidelines
• The Business Value of Accessibility

If you have been following my posts in the last two years this will sound slightly familiar. Furthermore I’m honored to have Linda Mauperon, Member of Cabinet of the European Commissioner for Information Society and Media (Viviane Reding) as our keynote speaker. Please see the detailed description of the panels in the conference program.

We would like to take a look on accessibility from different perspectives presenting pioneering thinkers whose organizations have established accessibility in their business and communication long since — and making serious money with it. There should be something of interest for everybody among the topics: for techies, consultants, employees from universities and companies. The conference is limited to a maximum of 200 attendees. Registration opens next week.

Of course there are various gems under the hood of the website, too. Naturally it is extensively accessible (check the cool skip links), but it is also incredibly fast because Yahoo!’s best practices for frontend performance are regarded. There are separate style sheets for printing, for iPhones, and for handhelds. The CMS is WordPress µ, having the advantage of administrating both the English and the German version with the same installation.

You can see and download the slides at Slideshare (German). As I promised to write a detailed post about ARIA enhanced tab navigation for the Webkrauts web standards advent calendar (think of a German version of 24 ways) you will be able to enjoy an English tutorial soon. Never mind the references to Chris in the slides — I had to choose an example from my flickr pictures, and I believe there are too many presentations already with kittens.

The conference was surprisingly innovative: I half expected a crowd of suits as the event was co-organized by the Austrian Ministry of Health, Family and Youth, instead there were many young faces and a fair percentage of women. Things I have learned (and tweeted about) include:

• As of January 2009, websites sponsored by the Austrian Ministry of Health will only receive funding when they are accessible. That doesn’t come as a surprise as a European Ministerial Declaration in 2006 announced that accessibility and best practices could become mandatory in public procurement in 2010.
• Artur Ortega showed examples of Dirk Ginader’s accessibility features for Yahoo! Finance, including two input fields where the labels were dynamically updated after a currency was chosen. So a screenreader read “convert pound sterling to euros” instead of “convert currency to currency.”
• One reason for JavaScript enhanced HTML controls for Flash objects like Yahoo! video is that the Flash object cannot get tab focus when the wmode param is set to opaque or transparent. Still without that param it is impossible to tab into a Flash object in Firefox 3. Or did I overlook something?
• Designer Maria Putzhuber quoted an interesting delusion: 70% of designers believe that visitors are almost always able to maintain orientation while in fact just 10% of the visitors are able to achieve this. What do you think is the reason?

Deutsche Fassung

I started my conference program with a case study by the BBC. They did a redesign and managed to squeeze formerly 60 images into 3 sliding doors and sprites. Their home page is now under 300K and 30 HTTP requests. Nice to see Yahoo’s Exceptional Performance guidelines go mainstream. About 5% of their users access the site without JavaScript. They don’t get identical features, but they get identical care. For them accessibility isn’t a buzzword, it’s become a natural part of their daily work. So they were able to find out that blur() is not a friend with JAWS. Also the BBC plays well with the other kids: they joined the OpenID foundation, and with BBC backstage they open their content through an API. Another charming idea is their public beta where people can testdrive new features. About 60% have personalized their home page, although one of the speakers described the personalization features with “my mom’s head exploded.” They used agile development with 2 week sprints, run the website in 12 languages, but don’t have a CDN yet because of the license fees.

Another case study about the LOHAS community Edenbee wasn’t that exiting, mostly because I knew the platform since beta and didn’t get quite why I should speak with other people about changing their lightbulbs. But it’s nice to keep track of your carbon footprint, a feature that uses the AMEE open API.

I was curious about HTML 5, so I went to the presentation of Lachlan Hunt and James Graham. Still I don’t see any advantage of having a bunch of new elements that are incompatible with older browsers when I can achieve the same with ARIA attributes. But I understand the rationale behind some of their decisions, although that doesn’t mean I come to the same conclusions.

For example people use a lot of “nav” and “menu” classes. To make their live easier, the WHATWG came up with the idea to create a nav element. A block level element, so you wouldn’t have to use those <div class="nav"> any more. But every time I use something like class="navigation" it will be an unordered list! I don’t need another div, I’m perfectly happy with my ul and role="navigation". It’s truly backward compatible, it’s semantic, I can use it today, and there isn’t a steep learning curve.

Then I went to two design talks by Andy Clarke and Dan Rubin, and though their designs were beautiful, the code examples were not. Imagine the flexibility of a newspaper article and compare that with the inflexibility of absolutely positioned paragraphs with fixed heights. Exactly. Apart from that Andy’s main inspiration came from comic books. It never hurts to throw in some colorful images.

Like in comic books, usability is not about getting from A to B, it’s about the experience of getting from A to B. In comic books the size of a panel and the amount of text strongly influences the reading speed. So you can emphasize content and add dynamics in your web design. That doesn’t mean necessarily that everything has to be in boxes. Emphasis can also be added by removing the boxes.

Dan Rubin used a lot of effects on his designs, like a noise filter to add texture on monochrome surfaces. Nice idea, though that implies the designer explaining the rationale of such a feature to the front-end engineers. They would either ignore it because they overlooked the subtle texture or because they assumed it would be just noise. Some less intrusive hint I will readily adopt was using a letter-spacing of −1 on headlines to prevent tiny rivers between letters.

What slightly worries me is that Dan talked about re-using patterns for some effects in Photoshop. Re-using patterns is the same in CSS, but re-usable effects in Photoshop can mean an unusable amount of work in CSS and lots of pictures making the website slow. What I miss so far is a common understanding of effects and patterns that are both easy to work with in Photoshop and in frontend programming.

The next day started with Nate Koechley’s keynote about professional frontend engineering. He chose the topic because he thinks this is critical to the advancement of the Internet, and I couldn’t agree more. As Frontend Engineers we write software with XHTML, CSS, JavaScript, and quite some amount of PHP. Douglas Crockford calls this “the most hostile software development environment imaginable,” and if you take a look at this graphic from Nate’s slides you will understand why. There are a number of knowledge areas that can be applied in a number of ways on three operating systems and half a dozen browsers in two rendering modes. If you ever wondered why you sometimes see little clouds of smoke coming out of your frontend engineering heads, that’s why.

There are four guiding principles:

1. Availability and accessibility for all users worldwide
2. Openness: share, learn, support, advocate
3. Richness: provide, but not too much
4. Stability

Then there are three core techniques: Graded Browser Support, Progressive Enhancement, and Unobtrusive JavaScript.If you haven’t heard about those concepts, please read about them now.

At that point the presentation turned into giving advice for quite a number of best practices and tips, like using JSLint, YUI Unit Testing, or YUI Profiler to enhance the quality of your code. Or serving cacheable assets from cookie-free domains. Or anticipated preloads: sneak in your new JavaScript and CSS files a week before the relaunch. Or did you know that the iPhone 2G can keep only 19 assets in cache, and that it doesn’t cache anything larger than 25K? Uncompressed 25K? Needless to say, Nate’s presentation was one of the conference highlights.

Later I heard a few things about building applications with existing frameworks and APIs, a timely comparison between JavaScript libraries held by no other than jQuery’s John Resig, some tips on internationalization by Richard Ishida, and a panel about accessibility. The one sentence that stuck most in that panel was: “Don’t be the guy with the problems, be the guy with the solutions.” In fact it’s very hard to be passionate about your job while being pragmatic and providing solutions instead of just saying “no.” Something Richard Schwerdtfeger wrote about in a different context:

Working in the accessibility field is extremely difficult. It requires very specialized skills — including incredible persistence. Accessibility is often viewed as additional work that is not always planned for. It requires a person who is tough, committed, patient, and caring to deliver an accessible solution that is usable to our customers. To do this you must have tremendous passion for your job as there is always someone or something to trip you up.

Combining passion and diplomacy is a goal many web evangelists still have to work on… In the meantime remember that accessibility is most likely to have a sustainable impact when it is supported by senior management, when there is an accessibility policy for a company, and when smart companies realize that there is money to be made by maximizing the target audience.

The four lessons include a view of the big picture, coding, usability and design challenges, and understanding the relationship with other W3C standards and activities. Your instructors are among the best: Stéphane Boyera is leading the W3C’s work on the mobile web in developing countries, Dominique Hazaël-Massieux is the Mobile Web Initiative’s Activity Lead, and Philipp Hoschka is the W3C’s Deputy Director and leading the Ubiquitous Web activities. For more information check the Mobile Best Practices recommendation.

So when Chris mentions JavaScript badges for del.icio.us, I think of Ed Eliot’s PhpDelicious or how to get similar results in WordPress. Naturally when he had the splendid idea to add captioning to YouTube videos with Google’s JavaScript API, I asked myself if there wasn’t a better way. There is, but to my surprise neither YouTube nor Yahoo! Video take advantage of that capability:

1. It’s common practice to implement text content in Flash via XML.
2. DFXP is a W3C XML standard for captioning videos.
3. There are free tools like MAGpie for creating captions, and they all support DFXP.
4. If YouTube or Yahoo! Video would allow users to upload and attach a DFXP file to a video, it would become dead easy for anybody to caption it. Not only for the filmmaker, captioning could be crowdsourced!

Just anticipating Joe Clark’s inevitable (and justifiable) objection: of course captioning is not an easy thing that anybody can do, to do it right it requires people with special training. But considering the number of videos on those platforms the only affordable and practical solution to provide any captioning at all is crowdsourcing. That can also be applied to the control of quality, accuracy, or reporting abuse.

Of course this would enhance primarily accessibility, but the XML files would further help search engines to index video content. And their marketing people would love such a feature for the positive PR!

Well, I submitted the suggestion both to Google and Yahoo!, you can vote on the Yahoo! Developer Network for it (Google is more closed-lipped). I’m curious who will be the first to offer that feature …

A little known W3C standard is the Platform of Internet Content Selection (PICS). You can tell from the poor layout that it’s a very old standard — in fact all of its parts are from 1996 and 1997. OMG, that’s ancient! That’s even older than HTML 4, CSS, or the Web Content Accessibility Guidelines!

PICS is a system for self-labeling. That raised some concerns about censorship in 1998, but governments who really want to censor their population’s internet access have found more effective ways to block content (I, for one, can recommend Tor as a countermeasure, also available as a Firefox extension, though I cannot guarantee your government approves it). So what remains is a meta element with information about your website, accompanied by a machine readable RDF/XML file.

1. <link rel="meta" href="/pics-label.rdf" type="application/rdf+xml" title="ICRA PICS label" />
2. <meta http-equiv="pics-label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://learningtheworld.eu" r (n 0 s 0 v 0 l 1 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 1))' />

Since in the nineties internet progress was driven by porn, PICS is mostly about child protection, although it can be used to describe a machine readable privacy statement and other things as well. Think of an early predecessor of the Semantic Web. Or in microformats it would be hPorn. Well, I assume very few of you run xxx sites, so why am I wasting your time with this post?

Because the PICS standard is most convenient when your website is not pornographic. The standard provides a way to label your website and distinguish between pictures of naked people as Greek ancient sculptures, in an educational or journalistic context, or as mere porn. But despite the name it’s not only suitable for rating pictures, it’s for text content or user-generated content as well, among other criteria. Plus the PICS label is recognized by Google, so it’s not about rushing ahead and self-censoring to please our overlords, it’s a measure to maximize the target audience and avoid mislead traffic. I believe a few of your clients may appreciate that. For example although this post uses quite a few trigger words, PICS provides a way to tell search engines and cybersitting software about the true nature of this article. I love that ability!

Also ARIA became a bit of a buzz since only three days before Microsoft announced support for it in Internet Explorer 8. So there is partial support in Firefox 1.5, more in Firefox 2.0, and full support including liveregions for dynamically updated content in Firefox 3.0. Also Opera 9.5 has it. It can be used today as it doesn’t break old browsers, they will simply ignore the new attributes. Don’t hesitate, you can do good with it right now.

In the meantime Aaron Leventhal and his fellows were busy negotiating with members of the HTML5 working group to find a way of implementation without namespacing. So as of Firefox 3.0 it will be <img role="checkbox" aria-checked="false" /> instead of the previous namespaced notation aaa:checked="false".

Microsoft also thought about addressing the new attributes in the DOM, alas they did it the old proprietary way instead of sitting at a virtual or real table with the other browser vendors and thinking of a common way to do this. Opera’s Anne van Kesteren and the participants at the Browser Wars panel at SXSW were picking heavily on that subject. I believe the IE team got the message, but for the moment I would suggest to ignore the non-standard DOM attributes.

Thanks again to Gez, Becky, Lisa, and Shawn for their input and help. You made this a first-class experience!

Further reading

• W3C WAI-ARIA Overview
• Mozilla Developer Center ARIA FAQ
• A List Apart: Accessible Web 2.0 Applications with WAI-ARIA

Otherwise the draft’s abstract and introduction are vague and leave room for interpretation what this is exactly about. What I have understood is:

1. This module defines a new element with the name access.
2. The element can be used to define an access key for any other element.
3. Another usage could be as a skip link as there is a targetid and targetrole attribute.

For me it remained unclear whether this element belongs in the head like link elements, or in the body like anchors or label elements. Anyway, among other Common attributes it can have a title plus a few new attributes: key, targetid, targetrole, and activate.

• The key attribute is optional and defines an access key in a generic way. So far there was only the accesskey attribute for anchors and form elements, now any fancy Web 2.0 div element impersonating something else can receive focus by striking a key. Browser vendors are encouraged to emphasize the responsive character in a word, like underlining it. Also the working draft provides a description what user agents should do if there are conflicts with existing shortcut keys. So the team paid attention to the discussions about the reasonableness of the accesskey attribute.
• The targetid and targetrole attributes assign targets by id or role. There can be more than one of each, comma separated. I imagine that’s like tabbing through elements, but with a shortcut key.
• The last new access attribute is activate. I must admit I have no clear idea what “activate” could mean or what this attribute is good for. An element receives focus, so there should be a perceivable effect, some sort of feedback to the user. If an author does not want this, there are ways to suppress default renderings by CSS. If she doesn’t want the focus event to trigger something, there’s JavaScript to cancel it.

I thought of playing with the new element, but it’s too early for a test implementation. The working draft still lacks a XML Schema that could be used in namespaces. It would be possible to extend a DTD without much conflicts, alas the module doesn’t come in one box, but in two (again). So you would need to append both the qname module and the access module instead of simply adding the access module. I don’t understand the rationale for this separation, but I see it’s more painful for an author to implement it that way.

However, the access element provides a better and more generic functionality than existing alternatives, it fills the gap of missing access keys, and if I got it right it defines a standardized method for skip links, although this could be expressed clearer. Apart from the usual suspects there is Google’s accessibility specialist T. V. Raman on the team, and Richard Schwerdtfeger from the team that built more accessibility into Firefox, the Open Document Format, and IAccessible2 as an accessibility interface for screen readers. So my bet is we will see support for this element in our favorite browser as soon as this draft is more mature. Your turn, Microsoft.

In this post

• Jesse James Garrett
• Molly Holzschlag
• Mark Boulton
• Jon Hicks
• Hannah Donovan
• Shawn Lawton Henry
• Richard Ishida
• Andy Clarke

First off was Jesse James Garrett, the creator of the term AJAX, who held a keynote presentation with all the usual quotes, big stock photos, historical references to technical pioneers (this time the inventor of the Kodak film roll) and such (podcast). I’m afraid I can’t bear victorian black and white photos of technical pioneers in the context of web development any longer. OK, so this guy changed the way photos were made in 1885. Also web applications are a little more convenient now than server roundtrips. But where’s the common element? One made photography easier for the mainstream, the other is a much hyped technique with the potential to make things easier, but quite often people just blow it.

Don’t believe the hype. Most web applications still don’t innovate, they just copy desktop behavior. And who is really comfortable with the restrictions of desktop software anyway? If it’s only a matter of response rates, learn from Yahoo! how to minimize the amount of data being sent on server requests. If I can update a whole page in 1-2 seconds using smart caching and other techniques, there’s no need for an AJAX request except for immediate form feedback helping users to avoid errors. Film rolls have faded from the face of Earth, it really would be more interesting what’s next, after AJAX. Jesse talked about user-centered design, cited Tim O’Reilly with the paradigm to “design from the outside in.” But that only means: after having taken one usability step back, eventually we will move forward. Where to? Jesse failed to deliver that.

A key factor to understand why browsers are such a pain is to remind yourself that they are just a piece of software, said Molly Holzschlag, now working for Microsoft (podcast). In fact very complex software. She compared the pros and cons of different browsers and what we can learn from them: short iteration circles and automated updates from Firefox, a strong brand and user identification from Opera. Otherwise she recommended that if you really need a feature in IE, make yourself heard. Put pressure on Microsoft to get priority. Just telling them you “want” something like multiple background images or WAI ARIA support won’t be enough. Your voice and your friends’ might weight more than that of the W3C, because you are their customers, their userbase.

Mark Boulton’s presentation about typography gained more momentum after a while (podcast). He explained why Verdana is lighter than Arial, and that you should blur your design to identify the optical gray gradient of a page. Then he continued to talk on grids and how to design to a vertical rhythm, a topic well known from print but rather unrecognized in web design until last year. Quite fashionable are headlines in a serif font for a better structure, and paying attention to small details like using the correct quotation marks or dashes can make a difference.

Jon Hicks showed us how to be a creative leech sponge (podcast). Get your inspiration everywhere — with two exceptions. Do sketches, keep those you draw during phone calls, take photos of typefaces, keep photos gone bad just for the color effects, collect labels from clothes, get leaflets (the “all you can eat buffet for designers”; get even the bad as you might need to mimic bad design some day). Get inspiration from book covers, graphic novels, books for children, magazines, patterns, prints, or packaging design. Blogs and flickr groups also help you to get inspiration, delivered right to your desktop through their RSS feed. The two exceptions? Other websites and logos, because there’s a high risk you will come up with a copy instead of an original idea. They are too close to the desired product so there’s no room for creative transformation.

Once you have collected inspirational material, it needs to be cataloged. That can be done in a sketchbook, but iPhoto, Yojimbo, or flickr will do the job.

Catalysts against a creative block (the dreaded blank page) can be deadlines, changing your environment and going for a walk or drive, going to bed, some peace and quietness (in the bathroom, where you keep the magazines for inspiration), taking a shower, or traditional techniques like brainstorming, mindmapping, criticizing and learning from bad examples, or moodboards. If your clients are adventurous enough, they can even do their own.

Some people are angry about Last FM’s sell-out to CBS, but Hannah Donovan didn’t make the impression that a petty-minded corporate spirit has taken over (yet). She talked about lessons you learn in a startup, like getting started, getting out the product very quickly (before others do it), taking small iteration steps with the rapid development technique Scrum, and using broad brushstrokes as a designer. Perfectionism is no priority for startups. Also she recommended that designers and developers work on a team (really) and hold 5 minute stand-up meetings every morning, “that makes a world of difference.” That actually means sharing a room, you know.

Shawn Lawton Henry works for the W3C WAI and the MIT, naturally she talked about accessibility (podcast). That’s something most people take as “what you can get away with,” but it’s really about people. So it’s important to understand how people with disabilities use the web. Technical standards like the Web Content Accessibility Guidelines 2.0 (WCAG) only supply a shared definition of requirements. Because they are not going to change for a while you better take the time to review the current version. However, the WCAG Techniques document will be adaptable and more flexible. There will be subversions, and although there’s no issue tracker at the moment, you will be able to submit additional techniques to meet the WCAG requirements as they are intended to grow with time.

I didn’t take notes on Richard Ishida’s presentation about I18N because I was familiar with the slides already, but I was deeply impressed by this man (podcast). Richard lives and breathes internationalization. He speaks about a dozen languages and doesn’t let a chance pass to practice them. He is the perfect personification as head of W3C I18N activity. I only wish he had said a few things about the I18N tag set because it’s a mighty tool for translations and fairly new.

On a related subject Andy Clarke asked designers worldwide if they thought their country or region got a distinctive design style, and he compared international websites of global players (podcast). While most of them just work, they could do better by adapting to the local customs and style. Culturalization is the key, anything else is modern imperialism. Check his presentation (PDF, 18 MB).

Somehow it was different than last year. Of course I came home full of inspiration, but this time it was more like deepening knowledge, while last year for example the concepts of microformats or browser performance were totally new for me. I met more people than in 2006, and I feel some of them can become my friends. That’s a new experience at a conference. I even found some parallels with Joe Clark. No, I’m not a “sarcastic gay vegan,” but we both don’t drink, prefer tea, and can be quite pedantic… I even linked to his website without rel=nofollow now, what an improvement! Anyway, I’m looking forward to meet some of my new friends in Brighton at d.construct.