Skip to content

Commit 14e9ecd

Browse files
authored
Remove autofocus recommendation (GoogleChrome#6256)
Using `autofocus` may reduce usability/accessibility, and it doesn't have all that much (potential) benefit: • https://www.a11yproject.com/checklist/#global-code • https://brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus
1 parent c21c3de commit 14e9ecd

File tree

1 file changed

+2
-14
lines changed
  • src/site/content/en/blog/sign-in-form-best-practices

1 file changed

+2
-14
lines changed

src/site/content/en/blog/sign-in-form-best-practices/index.md

+2-14
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ authors:
55
- samdutton
66
scheduled: true
77
date: 2020-06-29
8-
updated: 2021-02-26
8+
updated: 2021-09-21
99
description: Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.
1010
hero: image/admin/pErOjllBUXhnj68qOhfr.jpg
1111
alt: A person holding a phone.
@@ -48,8 +48,7 @@ Here is an example of a simple sign-in form that demonstrates all of the best pr
4848
`<label>`, and `<button>`.
4949
* [Label each input with a `<label>`](#label).
5050
* Use element attributes to [access built-in browser
51-
features](#element-attributes): `type`, `name`, `autocomplete`, `required`,
52-
`autofocus`.
51+
features](#element-attributes): `type`, `name`, `autocomplete`, `required`.
5352
* Give input `name` and `id` attributes stable values that don't change
5453
between page loads or website deployments.
5554
* Put sign-in [in its own &lt;form&gt; element](#single-form).
@@ -212,17 +211,6 @@ password if necessary.
212211
This is where the magic really happens!
213212
Browsers have multiple helpful built-in features that use input element attributes.
214213

215-
### Help users start faster {: #autofocus }
216-
217-
Add an `autofocus` attribute to the first input in your sign-in form. That makes
218-
it clear where to start and, on desktop at least, means users don't have to
219-
select the input to start typing.
220-
221-
<figure class="w-figure">
222-
{% Img src="image/admin/27x2icJSXCMdfWOjVAdR.png", alt="Screenshot showing form input with autofocus.", width="500", height="451", class="w-screenshot" %}
223-
<figcaption class="w-figcaption">Autofocus provides clear visual focus on desktop.</figcaption>
224-
</figure>
225-
226214
## Keep passwords private—but enable users to see them if they want {: #show-password }
227215

228216
Passwords inputs should have `type="password"` to hide password text and help the

0 commit comments

Comments
 (0)