A quick reminder on how and why to use labels in forms to make them more accessible

Yesterday the excellent Alice Boxhall of the Google Chrome team pointed out an annoying bug to me:

Seen in the wild on … <label for="tos-checkbox"><input type="checkbox" name="tos-checkbox">I agree</label> @codepo8

It seems the UserVoice page of Microsoft Edge has a checkbox that is inaccessible to screen reader users. The reason is a wrong implementation of a label. So, here is a quick reminder of how to use labels in plain HTML (without any ARIA extras) and why that’s a good idea.

Labels are there to connect an explanatory text with a form element. For a sighted user this can seem redundant – after all, the text is right next to the element. But once you use a screen reader you see that by not using labels, you make it impossible for people to use your forms.

The markup used in this demo is the following:

  <input type="checkbox" name="wombat"> 
  Yes, I want to buy a wombat!
    <input type="checkbox" name="quokka">
    Yes, I want to buy a quokka!
  <input type="checkbox" id="yayforwallaby" 
  <label for="yayforwallaby">
    Yes, I want to buy a wallaby!

On my Mac, using the in-built VoiceOver and Firefox, it is easy to test. Simply turn on VoiceOver Command+Fn+F5 and navigate using your keyboard by tabbing into the document. Here’s what that looks and sounds like:

In addition to the benefits for screenreaders, labels also make it easier for mouse or touch users to interact with your content. The following GIF shows that the options having labels enable the user to either click the tiny checkbox or the much larger text to check and uncheck.

showing how checkboxes with labels make the text clickable

Using labels isn’t hard. The simplest way is to nest the form element and the text inside the label:

    <input type="checkbox" name="quokka">
    Yes, I want to buy a quokka!

If you can’t do that, you need to connect the label and the form element using a for/id pairing. Remember, a form element’s id has no meaning to the form. The data sent to the server is what’s defined in the name attribute. The id is only good for scripting, CSS and as a fragment identifier/anchor. The following example shows how to connect the form element and the label:

<input type="checkbox" id="yayforwallaby" 
<label for="yayforwallaby">
  Yes, I want to buy a wallaby!

This is what’s broken in the UserVoice example: there is a for attribute on the label, but the form element has no id. Hence there is no connection between the two and the label becomes redundant.

Quick aside: if you wanted to write a test for that, remember that the for attribute in HTML elements can not be accessed as element.for as for is a reserved word. It needs to be htmlFor.

As a way to catch the mistake in the sign-up form, you could do the following:

var labels = document.querySelectorAll('label');
for (var i=0; i<labels.length; i++) {
  if (labels[i].htmlFor) {
    if (!document.getElementById(labels[i].htmlFor)) {
      labels[i].style.background = 'firebrick';

Now, go forth and label the web!


View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Data attributes rock – as both CSS and JavaScript know them

Currently my better half Kasia is working on a JavaScript training course and wanted to explain the concepts of JavaScript with a game. So we sat down and did a simple game example whilst she was fretting over the structure of the course. As she wanted to explain how to interact with the DOM in JavaScript rather than using Canvas we had some fun using CSS animation in conjunction with simple keyboard controls. More on the game in due time, but here is a quick thing we found to be extremely useful and not really used enough in the wild – the interplay of data attributes, CSS and changing states.

Defining a player element

We wanted to make the game hackable, people playing with HTML could change it. That was more a request by me as Mozilla has the Webmaker project and there will be a lot of game hacking at Mozfest in November.

In order to define a player element the semantic fan in me would do something like this:

<div id="player">
		<li class="name">Joe</li>
		<li class="score">100</li>

This makes sense in terms of HTML, and is accessible, too. However, in terms of accessing this in JavaScript, it is quite annoying as you need three element matches. Also in terms of maintenance it means three elements. In JS you’d need to do something like:

var player = document.querySelector('#player'),
    name   = document.querySelector('#player .name'),
    score  = document.querySelector('#player .score');

In order to change the score value, you’d need to change the innerHTML of the score reference.

score.innerHTML = 10;

Aside: yes I know there are lots of HTML templating solutions and I am sure dozens of jQuery solutions for that, but let’s stick to vanilla JS as this was about teaching that.

A HTML5 player element

Instead of going through these pains, we found it to be much easier to go with data attributes:

<div id="dataplayer" data-name="Joe" data-score="100">

The clever thing here is that HTML5 already gives us an API to change this data:

var player = document.querySelector('#dataplayer');
// read
alert('Score:' + player.dataset.score);
alert('Name:' +;
// write
player.dataset.score = 10;
// read again
alert('Score:' + player.dataset.score);

Re-using attribute values

Another benefit of using data attributes is that CSS gets them. Say for example you want to show the colour of the score value in red when it reaches 10. In the first HTML using a list you’d need to do the testing in JavaScript and add a class to have a different display. You could of course also change the colour directly with the style collection but that is awful in terms of maintenance. It can cause reflows in your rendering and also means another thing to explain to maintainers.

function changescore(newscore) {
	if (newscore === 10) {
	} else {
#player .low {
	color: #c00;

Aside: jQuery has contains(‘foo’) to match elements with the text in their node content in the selector engine, but it has been deprecated as a CSS standard, so that is not the way to go.

When using data attributes you don’t need that – all you need is an attribute selector in CSS:

#dataplayer[data-score='10'] {
	color: #c00;

To display the scores you can use generated content in CSS:

#dataplayer::after {
	content: attr(data-name);
	position: absolute; 
	left: -50px;
#dataplayer::before {
	opacity: 0;
	content: attr(data-score);
	position: absolute; 
	left: 100px;

Check out the following fiddle to see all in action:

The only downside I can think of is that only Firefox allows for transitions and animations on generated content. All in all we found data attributes incredibly useful though.

Comments? Here are the threads on Google+ or Facebook.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Browser benchmarks are gamed – so why not make them a game?

Tomorrow the Core Mobile Web Platform Community Group is meeting the Mozilla space in London to discuss the future of browser benchmarking. Sadly I won’t be able to attend as I am at Create the Web London on the same day and flying to Amsterdam for Fronteers later. However, I think this is a good opportunity to mention some things I have thought about which my colleague Jet Villegas will also mention tomorrow morning for me.

Here is what I am worried about: browser benchmarks are very hot, but fail to deliver data that will help us make the web the main development platform.

Benchmarks are becoming marketing material

My main concern is that browser benchmarks as a whole are a very academic and “close to the metal” exercise. Creating and wiping an empty canvas or creating and destroying thousands of objects gives you results, but it doesn’t mean that real product needs are met by optimising for these use cases. Jet will talk about some issues that actually do bring up false positives unless you test in a real browsing and using the browser scenario.

Even worse is that the press is hungry for browser news and loves when big corporates shoot at it each other. That’s why a lot of benchmarks are flawed from the very start to give a better result for one browser or platform or another. They’ve become a marketing tool, rather than helping us building better products with the web. Above all though, they are very, very boring.

Making benchmarking fun again

Let’s wind back the clock a bit to 1997. You might not have heard of this but back then Final reality was all the rage. It was a product of the demo scene (closely related to the much acclaimed Second reality) and a very cool thing to watch back then. You can check the YouTube video to see what it looked like.

This pushed the limits of the video card, the sound system and the CPU and the amazing thing was that it was a benchmark. After the demo ran all the way through you got a report on how well your hardware did in the test. These reports were not only bragging rights amongst overclockers but also used by admins to test out if hardware works in 10 minutes that would have taken ages with conventional test methods.

So why don’t we do something similar now?

The benchmarking game

How about that instead of an automated script we’d have a game? This already happens in some games that are built by browser makers.
Bananabread – the 3D shooter that is converted from C++ to JavaScript and runs in the browser has a BananaBench which gives you data of how well the browser performed after you played:

bananabread in action

However, this aims too high as sadly enough there is a lot of hardware out there that still chokes on WebGL and not everybody wants to play a 3D Shooter (I can’t be bothered, to be fair).

So how about this: a platformer or 2D shooter that gets incrementally more technically challenging to the platform the longer you play and offers extra levels to browsers and environments that support certain technologies and offers simpler ones to others.

Imagine a game that tests performance and reports it back after each level running on Facebook and being promoted in the Android (and Apple, yeah, a boy can dream) stores. People could play the game without being the wiser that they are actually helping us get real information from users on a large variety of devices on real (and flawed) connections and on browsers that are not 100% allocated to doing one task but have other tabs open and junk in their caches and RAM.

Why not?

Reporting everywhere

My other colleague Rob Hawkes is currently testing a lot of HTML5 games and compares the performance of different browsers on different mobile OS with these. This is great and a lot of work. I found that a lot of demos and also game demos have a developer mode that shows the FPS and the general performance. Wouldn’t it be great to have a database of this data instead of just seeing it on the screen for tweaking while we develop? There are systems like scoreloop who centralise the scores of games, why not the performance? This could be a whole new market in the HTML5 space.

Apps could of course benefit from that, too. Taking a well-used piece of software and adding performance reporting of – for example scroll-lists – would give us a lot of good information from our users rather than data built and reported in a lab environment. We could do Benchpress instead of WordPress?

Got ideas or want to contribute? Check out the thread on Google+ and on Facebook.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Google IO 2012 Notes – lots of them

OK having fulfilled my tourist guide duties with my UK colleagues, I got time to write up a quick report about Google IO. So here goes:

Disclaimer: These are my personal views, I was fortunate enough to be invited for the event on an “influencer” ticket.

For the TL;DR folk:

Google did a tremendous job with the conference, the organisation was impressive, their messaging concerning the web less “use Chrome” and more “here is cool web tech Chrome supports” and they released all the things I hoped and feared about: Chrome for Android and IOs. There was a massive amount of great tech talks and most are available online. Big web announcements were Chrome for Android and IOs and lots of updates to Android, Google+ and search on Android.

Now, more detailed info for those not conditioned by 5 second cuts in music videos:

Event organisation

Overall I was very impressed with the conference organisation. But of course there are some snags. Here are what worked and what annoyed:

Worked well:

  • Value for money – on a very literal level – is ridiculously good. Just the hardware giveaways (more later) are giving your money back three-fold.
  • Before the keynotes they showed demos submitted to chromedemos on stage – this must have made quite some people proud
  • Lots of great content, a lot of it live streamed and already available on YouTube – I guess it helps owning that)
  • Amazing AV equipment in the rooms and especially in the big keynote hall (the three screens made me drool and want to talk there, but it also would mean I have to make prettier slides)
  • Food was adequate and ample, and drinks and coffee were available throughout the event
  • The staffing of the “business hours” tables was very good and it was no problem whatsoever to get your questions answered (this might be as I knew a lot of them though). The Chrome booth was stacked with all the people in the devrel team and Chrome engineers, no boothbabes in sight. Actually, none at all. This was a Google event with Google experts – an impressive feat to pull off.
  • Lots of places to charge your hardware – a lot of the rooms have rows and rows of outlets and there were massive Android figures standing around with all kind of cables to charge a plethora of devices.
  • Every talk had a cardboard box with “+1” cards to throw in at the exit of the talks to vote for it. I loved that idea as it was physical, showed the 1 character of Google and gave them a mechanism to measure the success of the talk (that a few speakers I talked to never saw people changing the boxes is a bit worrying though). There was no scanning of your badge on the way in to the room as it was last year – I guess they gave up on that.
  • Every talk was transcribed live on big screens for the hard of hearing – this is not cheap and hard to pull off, but a wonderful little touch.

Worked less well:

  • The insane amount of attendees (around 5500) lead to a lot of queuing up for the keynotes and swag pickup (which needed both the conference badge and a photo ID which lead to even more delays). The first day we did a loop-the-loop around the keynote room to get in and the second day we had a long and random queue in the foyer. Maybe letting people in earlier would have fixed some of the issues.
  • The repeat of the “amazing suprise” of the first keynote (people sky-diving onto the building wearing Google Glass) which was sold as a behind the scenes turned out to be probably the most boring Mythbusters episode ever. The reason for the repeat jump was that Google paid for two days of rights to fly over the Moscone centre to make sure the weather was good and as this is not a cheap feat they wanted to make the most out of it. They should have let me jump with the people on the second day – maybe in the Firefox costume (or as an Android, or just me).
  • The Google+ presentations were weird. Whilst presenting the new Events feature (which is much better than what Facebook offers) and trying it out at the afterparty went down well, the obviously non-impressive numbers of Google+’s growth compared to competitors seemed not needed to me. I guess the focus is on fact soundbites for the press, but when they are easy to be slashed, why bother? Maybe I am just sick of the numbers game
  • The official app for the event was laggy and didn’t get updated in time. I missed a few talks because of that. It also had the wrong hashtag when you tweeted from it (which I edited before sending off but I doubt a lot of people did which must have skewed the twitter numbers).
  • Schedule display was patchy at times and I found far too much going on in parallel. Maybe shorter sessions would have allowed a better experience.
  • The last day was very much empty and felt like an extra day for networking with not much organised content. Good idea but seeing that lots of people didn’t bother going defeated the networking purpose a bit.

Overall impressions

  • The technical messaging was fair and interesting. Whilst last year a lot smacked of “look at those numbers aren’t we awesome and you should use us” this year was much more about “look what is possible and how we support it”
  • Google released a lot of products and services in direct competition with smaller players (Tripit, Shazam, and released a few products blatantly aimed at Amazon (Kindle competition, offering Infrastructure as a service), Apple (Siri competition) and Microsoft Office (Docs upgrade to allow for collaborative writing and offline use – which only will work in Chrome).
  • There was quite some snark aimed at Microsoft in the keynotes (“try doing that with Sharepoint and spreadsheets”) and of course there were “and another thing” and “xyz isn’t cool abc is cool” sightings.
  • In comparison to last year the keynotes were more polished and seemed less “please use this”. There was more self-assurance on stage. However, quite some of it seemed too scripted for my taste and had a lot of “this is my favourite thing ever” which gets unbelievable after a while. I liked that the man showing Google Now and the lady presenting the design ideas behind Glass were scared as heck on stage and thus showed real emotions and were much more believable. The keynotes are online: Day1 Day 2
  • The after party was much simpler than last year – Train was a very fitting band for San Francisco and Paul Oakenfold can’t have been cheap (but I had to spend a lot of time explaining US folk who he is). The alcohol ran out rather quickly, but that might actually be a good thing. There were a lot of entertainment things but less of a “maker faire” flair than last year.
  • Google IO allowed for a lot of people to be in town, which meant that outside events cropped up, like a beer.js in the thirsty bear and some other quick meetings about Web Components with people from a lot of browsers and large companies.

Great releases

  • Google Hangouts are very much focused on using WebRTC now and seem to be quite a competitor to proprietary and installable solutions. The message that “WebRTC is available in IE via Chromeframe” made me spit coffee and laugh though – sadly it is not that easy.
  • Google Chrome for Android and IOs is great, shame that the former is as an opt-in for phone service providers and will not be backfilled to Android older than ICS. The slickness of the presentation of Chrome was impressive though – history syncing over devices is incredibly useful. Now I want that with my apps state on Android (a boy can dream)
  • Speaking about Android, the atomic app update in Jelly Bean is what was a benefit of web apps vs. native apps that is going away now – instead of needing to download the full APK you now download the changed parts. Time to change my presentations :/
  • Google Drive got some impressive new features including automatic OCR and face/sights detection in photos.
  • Google’s collaboration with Subatomic and Cirque de Soleil
    Movi.Kanti.Revo – (keynote section) is probably one of the coolest tech demos I have seen in the last year. It uses the camera and movement detection to navigate an interactive dance and performance experience.
  • Google compute engine could be a real threat to Amazon’s EC2. You can fire up lots of virtual machines for computation in a very simple manner

Talks I’ve seen and can recommend

  • The web can do that? is Eric Bidelman’s overview of cool new web technologies delivered in a very matter-of-fact way. Great talk!
  • GRITS: PvP Gaming with HTML5 was a very well delivered talk on HTML5 gaming and the GRITS blueprint game you can download and learn from.
  • The Web Platform’s Cutting Edge is a wonderful introduction to web components and the need for them (also mentions X-Tag, so, like, win!)
  • Turning the web up to 11 covers all the details of the Web Audio API – this has great demos and tools but can be a bit daunting
  • The Mobile Chrome summit was a great meeting with all the big names in mobile web development asking the Chrome team questions. Notes will be out soon, and I wish they’d implement my suggestion of building Chrome Frame for Android 🙂

Talks I will watch and sadly enough missed

Free stuff

  • Google once again showered the conference attendees with free hardware: a new Galaxy Nexus phone running Android Jelly Bean, a Nexus Seven (geek credit++ from me on that name) tablet, a Nexus Q (which I left as a present here as it is the approximate weight, shape and usefulness of a cannon ball in my hand luggage as most of the Google Play streaming content is not available in the UK), and a Chromebox. Google painted themselves in a corner a bit with that – there is no way IO can be a non-giveaway conference ever again.
  • Other swag was a lovely Google IO shirt, stitched HTML5 badges, Sticker sheets with the HTML5 logo and related technology icons and Android figures filled with Jelly Beans.

Was it worth it?

Expletive yeah! I will be back next year.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Video training shoots with Microsoft – get the slides and code to present them yourselves

A few days ago I was in Miami, Florida, as my old Ajaxian colleague Rey Bango invited me to record a few videos with him on HTML5 topics for Microsoft’s Channel 9 developer programme.

Rey Bango and me on the beachFilming on the beach
Video shoot on the beach

Originally we planned to have presentations with live coding examples – each 15 minutes long by Rey and me on our own. Thinking it over, we found it more natural to do them together and so to say show the presentation and code examples to each other in a chat format. Rey and Chris

Rey covered development tools and how to test across different browsers and I was asked to talk about Building for real standards and Modern Web Development.

The first session we recorded was about “Building for real standards”. In this we talk about what a standard means, how this applies to HTML5 and discuss problems and pitfalls to avoid. The slides are available on Slideshare and there is also a version with presenter notes.

The second session was about “Modern Web Development”. In this we talked about developing for an unknown environment using Progressive Enhancement, what the differences are to Graceful Degredation and we show how Responsive Design can lead to a future friendly product. The slides are available on Slideshare and there is also a version with presenter notes.

If you want to present these talks yourself, I uploaded the slides in various formats and the code examples with lots of explanations on how to present them to GitHub:

All in all this was a great experience and I can’t wait for the videos to be out. It is good to see that there are people in Microsoft who really care about web standards and cross-browser development. We wanted to record a lot more footage of us discussing more topics but sadly enough one of the harddrives crashes so we had to re-shoot all the sessions on the last day. In retrospect this made the sessions better as we got less formal and kept them shorter. The final products should be around 20 minutes each.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

If you have 20 minutes today – use them watching this

I like TED. You find educational, interesting and inspiring stuff there. A lot is timely, some things are there for the “wow” factor and others are just good to learn some tricks from great speakers in case you find yourself in the situation to have to speak in front of people yourself.

Once in a while, however, you come across a talk that just leaves you gaping and feeling a better person after watching it. Not that you did anything yourself, but it changes you thinking that you won’t have to change the world, but it would be a good idea for yourself to be better tomorrow than you were today.

Bunker Roy’s Learning from a barefoot movement is one of those videos.

I don’t want to give away too much, but let me tell you that if you listen and you see the consequences of what he says and the differences that he made with what he did (or actually inspired others to do) in these 20 minutes you’ll learn a lot of great things about:

  • Empowering people
  • Finding the right sources for information
  • Gender differences and why women are wonderful
  • Sustainable systems
  • Human communication
  • Group structures and the power of democracy
  • How every learner is a teacher
  • Finding solutions within
  • Why poverty and illiteracy is not the end

Lean back, put on some earphones and go for it:

Isn’t it amazing just how we ended up being bored with literacy, having a free education system (no matter how misguided or broken) and creature comforts? Isn’t it amazing how we arrogantly claim that our scientific endeavours and money will find a way to sustain this planet? The solutions are out there – in the places and communities we think we need to help to get to our level, but in reality we can learn a lot from.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)