A Tale of Two Forms (Part 2)

Last week, I wrote a brief article that demonstrated how to build a form with well structured, semantic markup. In that article, I started with a form built using HTML tables and built a from with light weight divs and form specific elements.

The main point of last week’s article was to demonstrate that semantic HTML and CSS could be used to create a form identical in appearance to one built using tables, which lend an inherent structure at the expense of accessibility and maintainability.

Of particular note last week was that both forms used the same amount of CSS, which I know came as a surprise to a number of my developer colleagues. You can review last week’s semantic form markup.

And while this conversion represented a step in the right direction, we can take the transformation of our original "tabular" form further by making it even more accessible and usable. To do this, we’ll add a few more descriptive HTML elements and attributes.

Attributes to make your forms more accessible

AccessKey

The “semantic” form we created last week really did the bare minimum as far as accessibility was concerned. By including few special HTML form attributes in our markup, we can grab some low hanging fruit and instantly improve the accessibility of our form. It’s a great first step. Here’s how:

For those users who have difficulty using a mouse, we can make it possible to navigate, interact with, and complete our form using only the keyboard. The two attributes that will aid with this are accesskey and tabindex.

Accesskey will allow users to activate the :focus state of any input using its associated value in combination with a browser specific key combination. In the above example, one could trigger the first name field in Chrome by typing: ctrl + option (alt) + f. We can clue users into this possibility by wrapping the appropriate character in a span tag and styling it a little differently, like so:

We can clue users into this possibility by wrapping the appropriate character in a span tag and styling it a little differently — The underlined F is a clue that this input is keyboard accessible.

<input accesskey="f" name="first-name" tabindex="1" type="text">

TabIndex

By ordering our inputs correctly using the tabindex attribute, we can insure that users will engage with our form’s inputs (or the elements on the rest of our webpage for that matter) in the correct order as they press the tab key. This becomes increasingly important as forms become complex.

WAI-ARIA

WAI-ARIA role attributes offer a semantic way for us to layer even more meaning into our form attributes. According to the W3C:

“These semantics are designed to allow an author to properly convey user interface behaviors and structural information to assistive technologies in document level markup.”

Using predefined roles, we can be ultra-specific about the intent of our HTML elements. In turn, this will help screen readers and other assistive devices enable impaired users to complete our forms. Implementing these roles is simple:

<form role="form">
		<input role="input" type="text">
</form>

Attributes to make your forms more usable

It should come as no surprise to you that most people don’t like filling out forms, which makes it hugely important that you reduce the amount of friction involved in filling them out.

Luckily, there are a few HTML attributes (some specific to HTML5) we can use, with little cost, to enhance the usability of our forms.

Placeholder

The placeholder attribute allows us to leave visible hints about how to complete a particular input. This comes in especially handy in situations where there might be a number of different ways to complete a field, like when asking for a user’s phone number.

Using the placeholder attribute, we can alleviate confusion, uncertainty and frustration by providing an upfront example for how we expect users to enter their phone numbers:

We can alleviate some confusion using the placeholder attribute

<input name="phone" placeholder="8004156309" type="text">

In addition to the placeholder attribute, we can aid users in filling out fields correctly by placing constraints on the values they input. Continuing with the phone number example from above, if your system expects inputs of a certain length, why allow the user to input more characters than what’s allowed?

MaxLength

Using the maxlength attribute, we can limit the number of characters a user can enter into a field specifying a value that corresponds to our system’s contraints, like so:

<input maxlength="10" name="phone" type="text">

With the HTML5 autofocus attribute, we can save our users some time (and a click) by offering the convenience of “pre-focusing” the first input of our form. While certainly not a show stopper, it’s a nice touch that can benefit those users who either have trouble with a mouse or prefer not to use one:

We can save our users some time (and a click) by offering the convenience of pre-focusing the first input of our form — We can save our users some time using the autofocus attribute.

<input autofocus name="first-name" type="text">

To Be Continued…

In Part 3, the final installment of this series, we’ll delve deeper into form design and examine a few layout techniques you can use to improve the efficiency and usability of your forms.