HTML5 “autofocus” attribute (was: Scope of search / reduce scope / about "this")

[Thomas 'PointedEars' Lahn]

[X-Post comp.infosystems.www.authoring.html, comp.lang.javascript;
F'up2 comp.infosystems.www.authoring.html]

Thomas 'PointedEars' Lahn wrote:

> Danny wrote:
>> see if this helps
>> http://www.wufoo.com/html5/attributes/02-autofocus.html
>
> This is not the Web, you should not post only URLs as
> suggestions/solutions. The approach suggested there is
>
> <input autofocus type=text>
>
> It is a good point, though. The relevant specification is: [HTML5 CR]

It turns out that (at least in Chromium 25.0.1364.160 Debian 7.0 (186726))
the “autofocus” attribute causes the same usability issues as the focus()
method when called in a “load” event listener: The document cannot be
scrolled using the arrow keys. [Also, the control thus focused may still
not be visible. This would need to be worked around with the
scrollIntoView() method, which may not be available or functional, in a
“load” event listener.]

So this attribute is best avoided as well.

Instead, the following approach is recommended:

<input type="search" name="search" id="search" accesskey="x"
placeholder="Description (shortcut: Access Key + X)"
title="More verbose description (shortcut: Access Key + X)">

The “accesskey” attribute, which allows to use a keyboard shortcut so that
the control receives the input focus, was introduced with HTML 4 [1] and is
also supported in HTML5 (CR) [2]. The actual shortcut that focuses the
control varies among browsers. In Chromium 25.0.1364.160 Debian 7.0
(186726) with a QWERTZ keyboard layout, it is <Alt> + <Shift> + <case-
insensitive value of the “accesskey” attribute>.

The “placeholder” attribute and [the “type” attribute value further show the
affordance [3] of the control. They can be augmented with a suitable
“cursor” CSS property value.] Should the “placeholder” attribute not be
supported (HTML 4), the “title” attribute (HTML 4+) can provide the
description, perhaps (but not necessarily) as a tooltip [4, 5]. [It is
also common and recommended to put a short, unobtrusive (e.g, darkgray)
descriptive text above, next to, or below the control [6]; but whether this
is suitable for you depends on the viewport dimensions and other factors.]


[1] <http://www.w3.org/TR/REC-html40/interact/forms.html#adef-accesskey>
[2] <http://www.w3.org/TR/2012/CR-html5-20121217/editing.html#the-accesskey-
attribute>
[3] <http://www.nngroup.com/articles/top-10-application-design-mistakes/>
[4] <http://www.w3.org/TR/REC-html40/struct/global.html#adef-title>
[5] <http://www.w3.org/TR/2012/CR-html5-20121217/dom.html#the-title-
attribute>
[6] <http://www.nngroup.com/articles/forms-vs-applications/>
--
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.