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

Seen in the wild on https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer … I agree @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:

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

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.

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

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

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" 
       name="wallaby">
<label for="yayforwallaby">
  Yes, I want to buy a wallaby!
</label>

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!

Updates

• My colleague Aaron had a more detailed article last month
• Amelia Bellamy-Royds wrote a nifty upgrade to the script at the end.

I am currently on a trip in Singapore, Thailand and Sydney for the next 8 days and today I presented at JSConf Asia and a meetup in the Microsoft offices in Singapore.

JSConf Asia closing keynote

The closing keynote of the first day of JSConf Asia covered my worries that we are getting slightly overboard in our affection of JavaScript to solve every issue. It seems we have forgotten just how versatile a language it is and that how we use it depends very much on the environment we run it in. The slides are on SlideShare.

I also recorded a screencast of the keynote and published it on YouTube.

Microsoft Meetup

As the audience at the meetup was more mixed, and I was deadly tired, I thought it is a good plan to create a presentation that covers how we can learn JavaScript these days. It explains the use cases of it, resources how to easily run a node and express server and talks about Visual Studio Code and how to clean up old and outdated code. The learning JS meetup slides are also on Slideshare.

The screencast is on YouTube

This Thursday, my colleague Mike Harsh and Keith Rowe (@krow) from Microsoft’s Windows and Devices Group invite you to the Square Pig in London for some drinks and a chat. These two program managers are leading efforts to make Windows-based machines a better place for web development.

I’ve put up a small web site with the info of the meetup and there’s also a Lanyrd page. Many thanks also to London Webstandards for banging the drum.

Whilst I am not affiliated with this group and I can’t be there as I am on my way to JSConf Asia to present, I’d love to see a lot of people go and talk to them. This is a genuine offer to improve what Windows has for web developers and I already gave them quite a bit of feedback on the matter (I am a Mac user…).

I’ve been worried about our Mac fixation as web developers for a while. We preach about supporting all platforms as “it is the web” but a lot of our tooling and best practices are very Mac/Command Line centric.

I know this is a bit last minute, but as it is with London Pubs, you have to spring a grand to get the room for the evening, so please show up and at least make sure this expense ends in the form of food and drinks inside people who Microsoft can learn from.

I spend a lot of timing giving and listening to talks at conferences and I want to point out a few here I enjoyed.

At JSConfEU this year Stefanie Grewenig and Johannes Thönes talked about offline applications:

I thoroughly and utterly enjoyed this talk. Not only because their timing worked really well and the handover from presenter to presenter went smoothly. I was most impressed to see an offline matters talk based on project/customer delivery data instead of the ones we normally get. Most offline talks explain the need, show the technology and ask for us to get cracking. This one got cracking and showed how things were done and what problems you run into.

The slides are beautiful, the storyline makes a lot of sense and at no time you feel condescended to. The talk also shows that some “impossible to use in production” technologies like DOM storage do work if you use them in a sensible fashion.

As a bonus – it has the cutest rhino at 11:55:

Double this with Nolan Lawson’s “IndexedDB, WebSQL, LocalStorage – what blocks the DOM?” and you learn a lot about local storage issues and solutions in a very short amount of time.

Thanks Stefanie, Johannes and Nolan. I feel cleverer now.

With my talk decks needing more re-use in the Windows/Microsoft community, I am trying to use Powerpoint more and wean myself off the beauty of Keynote (and its random crashes – yes, all software sucks).

One thing I realised today is that Powerpoint thinks it is sensible to break words anywhere to go to a new line, not by word, or even syllable, but by character:

This is the preset! To get rid of it, you don’t need to summon the dark lord, but all you need to do is to unset the default. You can find this in:

Format ➜ Paragraph ➜ Line Breaks and Alignment ➜ uncheck: “Allow Latin text to wrap in the middle of a word”

Here’s a recording to show the difference:

Why this would be a preset is beyond me. Now I can breathe freely again.