Label form fields when a visible label will not fit
A title attribute on a form control gives it an accessible name, and W3C lists that as sufficient for the rules covering non-text content, structure, and name and role. It is a fallback, though, and its condition is stricter than the shorthand people repeat. The rule is not that a visible label would be inconvenient. The rule is that sighted users must still be able to work out what the control is for from something visible on the page. That might be the button next to it, the column it sits under, or the design around it. Take that away and title-only naming fails whatever the markup says. The technique is also scoped out where it is not needed, because a control already named by its own value, its alt text or its element content sits outside H65 entirely. Reach for a real label first, every time, and use title where the layout genuinely cannot hold one.
How we find it in an audit
A scanner finds controls with no accessible name from any source, which is the easy half. Then a person asks the two questions no automated test can. Whether a visible label could have fitted here, and whether the title matches the purpose the visible design already implies. A title that contradicts the layout fails the test even though the field technically has a name.
How affected users experience it
A screen-reader user landing on an unnamed field hears edit text and nothing else, so the only way to learn what goes in it is to fill it in and find out. With title set to Search products they hear the name and carry on. It is worth saying who else a title reaches, because it is not nobody. Screen magnifier users can get it as a tooltip. Keyboard users and phone users cannot, which is why a real label still wins.
Passes vs. fails
Passes
<input type="text" name="q" title="Search products">
<button>Go</button>Fails
<input type="text" name="q">
<button>Go</button>How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Element marked as decorative is not exposedA tool can check this
- Image accessible name is descriptiveA tool finds candidates, you decide
- Image button has non-empty accessible nameA tool can check this
- Image has non-empty accessible nameA tool can check this
- Link has non-empty accessible nameA tool can check this
- Object element rendering non-text content has non-empty accessible nameA tool can check this
- SVG element with explicit role has non-empty accessible nameA tool can check this
- Image not in the accessibility tree is decorativeA tool can check this
- ARIA attribute is defined in WAI-ARIAA tool can check this
- ARIA state or property has valid valueA tool can check this
- Element with role attribute has required states and propertiesA tool can check this
- Form field has non-empty accessible nameA tool can check this
- Headers attribute specified on a cell refers to cells in the same table elementA tool can check this
- Role attribute has valid valueA tool can check this
- ARIA global properties not used where prohibitedA tool can check this
- ARIA required context roleA tool can check this
- ARIA required owned elementsA tool can check this
- ARIA state or property is permittedA tool can check this
- Table header cell has assigned cellsA tool can check this
- Button has non-empty accessible nameA tool can check this
- Element with aria-hidden has no content in sequential focus navigationA tool can check this
- Element with presentational children has no focusable contentA tool can check this
- Menuitem has non-empty accessible nameA tool can check this
- Summary element has non-empty accessible nameA tool can check this
- Iframe element has non-empty accessible nameA tool can check this
- Iframe elements with identical accessible names have equivalent purposeA tool finds candidates, you decide
Other ways to satisfy this rule
39 guides on this site are filed under 1.1.1 Non-text Content. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- ARIA6sufficientName icon-only controls with aria-label
- ARIA9sufficientAssemble one label from several text pieces
- ARIA10sufficientName images and charts with aria-labelledby
- ARIA15sufficientLink complex images to longer descriptions
- C9sufficientPut decorative images in CSS backgrounds
- G68sufficientDescribe the purpose of live-only streams
This guide is our interpretation of W3C technique H65: Using the title attribute to identify form controls when the label element cannot be used. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.