The progress element

The progress HTML element was introduced in HTML5 and is used to represents the completion progress of a task. Typically it is displayed as a progress bar but this can be overridden so is up to the web developer.

Developers should make sure it is associated with a label element, especially when the label is not immediately preceding it. To support older browsers that don't support the progress element, a textual description of the progress can be included within the element.

At the time of writing this article, support is pretty good for desktop with the exception of requiring at least IE10, mobile support isn't fantastic though.

The output element

The output HTML element was introduced in HTML5 and represents a calculated value belonging to a form. An example use case is client-side calculation on a shopping website's checkout page.

output vs samp

The purpose of output can be easily confused with that of the samp element; to represent a block of program output. The output element should not be used for this purpose.

Its name comes from the input element, since the typical use case for the element is to output the sum of several input element values. Perhaps something like computed would have been a more fitting name to reduce confusion.

The q element

The q HTML element is used to represent an inline quote. Now regular quotes ("") can represent this just fine, surrounding the quote in the q tag differs in that it explicitly indicates that the text is a quote, removing ambiguities that it could be emphasis, irony, etc.

In addition to explicitly stating that the text is a quote, it also provides a way to consistently style all quotes with minimal markup.

Usage

A quote

To use the q element, surround the quote with the tag. Ensure you do not add quotes in addition to the q tag or they will come through twice.

<p>Gandalf opened the doors to Moria by saying <q>Mellon</q>.</p>

The samp element

The samp HTML element is used to represent (sample) output from a program. It has been around since HTML1, though back it was simply used to markup a sequence of literal characters.

By default samp is an inline element so it won't break the flow of the page, this means that it can be used within a block of text without any problems.

Usage

Inline sample output

The samp element can represent a program's output within a paragraph or block of text by simply wrapping the output in the tag.

<p>The browser will say <samp>404 Page Not Found</samp>.</p>

The kbd element

The kbd HTML element is used to represent some form of user input. Typically it represents keyboard input (where its name comes from) but can be used to represent any type of input that can be represented in text, such as voice commands. While it may not be familiar to most web developers it has actually been part of HTML since the first proposal for a specification (HTML1 was 1993!), though the meaning has changed quite a bit since then.

Usage

There are a few different ways to use it as defined by the HTML5 spec.

Keystrokes

The kbd element by itself generally represents a keystroke.

<p>Press the <kbd>Space</kbd> key to continue.</p>

When chaining keys together, ideally you would nest each keystroke within their own kbd element.

<p>Press <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd> to save.</p>

Using relative directions in content on the web

You've all seen it before, you hit a webpage with a menu on the left and somewhere in the main section it says something like "for more look at the left menu".

Sure it's fine for the majority of us, but it is pretty bad practice for a couple of accessibility reasons. Firstly there is no concept of left and right for people using assistive technologies like JAWS to read the page for them. Secondly what if your website is responsive in some way or your content appears in different forms like an app or mobile site, you need to ask yourself if it is really left or right in all these cases.

Data-bind a Knockout.js model infinitely deep

This post will show you how to data-bind a hierarchical model that can go infinitely deep onto a page using Knockout.js. In this post, I will make a screen that will be used to build an organisation chart as an example, I chose this as it's a really simple example to illustrate the technique that I'll be using.

Model

First we create the model that we want to bind to the UI. Our model is of an employee that will have a name, a link to it's boss and array of employees (subordinates).

function Employee(name, boss) {
    this.name = name;
    this.boss = boss;
    this.employees = ko.observableArray([]);
}

Template

The template is used to display the model, our template will iterate over an array of employees, show their name and point back to itself to do it again with each of the employee's subordinates.

<div data-bind="template: { name: 'organisation-template', foreach: employees }"></div>

<script id="organisation-template"  type="text/html">
    <label data-bind="attr: { 'for': nameId }">Name:</label>
    <input data-bind="attr: { 'id': nameId }, value: name" />
    <div data-bind="template: { name: 'organisation-template', foreach: employees }"></div>
</script>

The nameId property on the Employee model is included to give the name textbox a unique id so that it can have a label. Accessibility is good!

function Employee(name, boss) {
    /* the rest of the code */

    this.nameId = ko.computed(function() {
        return name.split(' ').join('_')
                   .split('.').join('_');
    });
}

Let's also go ahead and add a little CSS so we can differentiate the hierarchy levels.

.employee {
    border:1px solid #ccc;
    padding:.3em;
    margin-bottom:.3em;
}

.employee:last-child {
    margin-bottom:0;
}

Test data

Now let's create some test JSON to display on the UI initially, in practice this would normally come from a server.

var jsonModel = '{"employees":[{"name":"Jason Alexander","employees":[{"name": "George Costanza","employees":[{"name":"Art Vandelay"}]}]},{"name":"Michael Richards","employees":[{"name":"Cosmo Kramer","employees":[{"name":"H.E. Pennypacker"},{"name":"Bob Sacamano"}]}]},{"name":"Jerry Seinfeld","employees":[{"name":"Kel Varnsen"}]}]}';

Parse the JSON

Now we will create the model from the JSON model that was defined in the above section.

function OrganisationViewModel() {
    initialiseModel(this, jsonModel);
}

function initialiseModel(model, jsonModel) {
    parsedModel = JSON.parse(jsonModel);
    model.employees = ko.observableArray([]);
    addEmployees(model, parsedModel.employees);
    console.log(model);
}

function addEmployees(bossModel, employees) {
    if (typeof employees === "undefined")
        return;

    for (var i = 0; i < employees.length; i++) {
        var employee = employees[i];
        var employeeModel = new Employee(employee.name, bossModel);
        bossModel.employees.push(employeeModel);
        addEmployees(employeeModel, employee.employees);
    }
}

Data bind

Finally everything is ready to data bind!

ko.applyBindings(new OrganisationViewModel());

It should look like this now:

Add/delete buttons

We also want to be able to add and delete employees, start by creating the JavaScript functions and attaching them to the model. Notice that we're reusing the addEmployee function on OrganisationViewModel as well to create out root-level employees.

function addRule() {
    var newRule = new Rule('Fresh rule', this);
    this.rules.push(newRule);
}

function deleteRule() {
    var parent = this.parent;
    parent.rules.splice(parent.rules.indexOf(this), 1);
}

OrganisationViewModel.prototype.addEmployee = addEmployee;
Employee.prototype.addEmployee = addEmployee;
Employee.prototype.deleteEmployee = deleteEmployee;

To hook this is up the UI we need a

<button data-bind="click: addEmployee">Add employee</button>
<div data-bind="template: { name: 'organisation-template', foreach: employees }"></div>

<script id="organisation-template"  type="text/html">
    <div class="employee">
        <label data-bind="attr: { 'for': nameId }">Name:</label>
        <input data-bind="attr: { 'id': nameId }, value: name" />
        <button data-bind="click: addEmployee">Add employee</button>
        <button data-bind="click: deleteEmployee">Delete employee</button>
        <div data-bind="template: { name: 'organisation-template', foreach: employees }"></div>
    </div>
</script>

End result

And it's done! Click here to see a working example. It should look like this

Let me pinch-to-zoom your responsive site

When I was doing my latest redesign of the blog, I came to the point where I needed to implement the viewport meta tag so the design would scale correctly on different devices. After a little research I discovered several tutorials that said to use this:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />

I had a think about the user-scalable attribute, which so many tutorials seem to include. What it does is disables pinch-to-zoom on mobile devices, and I couldn't come up with a reason for RWD tutorials to include it. Really there is no reason why we should be disabling pinch-to-zoom on a responsive site, unless zooming would break the app itself. The ability to zoom in on images, text, links, etc. is really handy and I use it all the time. Disabling it introduces potential usability/accessibility issue, so please in the future if you can, omit the user-scalable=no value.

<!-- much better -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />

Make tags keyboard accessible with tabindex

HTML elements such as div, span, img, etc. don't normally accept input, but sometimes you'll want them to. For example if you have an image that does something when you click on it. If you want your site to be accessible it also needs to happen when you tab to the element and press enter.

There are two parts to this; giving the element a tab index and then hooking up the event. For the tab index simply set the tabindex attribute on the tag to 0 and the user will be able to navigate to the tag using the tab key. The following javascript snippet adds the event handlers using jQuery and shares the function (triggerExample) that is doing the work between both keydown and click events.

<img id="example" tabindex="0" src="..." />
 
 

$(document).ready(function () {
  $('#example')
    .click(triggerExample)
    .keydown(triggerExample);
});

function triggerExample(event) {
  if (event.keyCode == 13 || event.keyCode == 32 ||
      event.type == 'click') {
    doExample();
  }
}

function doExample() {
  alert('Image triggered');
}

Remember that you can always test what can be accessed with the keyboard by hitting the tab key.