Form element accessible names


Types of names

A simple test: click on label, does it pass the focus to the element? If so it probably has a name.

But there are other ways of providing a name that do not have the focus passing effect.

Use developer tools in Chrome. Inspect the input, switch to Accessibility pane. Note - there is bug in Chrome 76 and 77 where explicit labels do not show up as a name.

1. Names?

2. And these?

3. Finally, how about?

4. Definitely no name!


Other naming

All of these seem like good ideas, but are not.

Placeholder

Some screen readers will use the placeholder to compute the name. Others may not. And everyone will be inconvinienced when the placeholder is complex and crucial to filling thing correctly. It is nice to have the the text always present.

Title

Screen readers may (or may not) read it when input receives focus.

Implicit labeling

This is when instead of <label for="id">Name</label> <input id="id"> we do <label><input>Name</label> - the label wraps the input

Click on label. It works!

... but your CSS framework might dissaprove!