WebsightTheme
Forms
Labels, names and autofill hints on fields, selects, toggles and buttons. 7 automated checks Websight runs, each with a live example and a fix you can copy.
Form fields must have labels
labelEvery input and textarea needs a label that is programmatically tied to it, not just sitting nearby. A label element with a for attribute matching the field's id is the normal way. Without it, a screen reader announces the field as edit text and the person has to guess what to type. A placeholder does not count: it vanishes as soon as typing starts and many screen readers skip it.A form field should have one label, not severalform-field-multiple-labelsWhen two or more label elements have a for attribute pointing at the same field, screen readers have to pick. Some read the first, some the last, some both joined together. The person hears a different name depending on their software. Keep one label per field and put any extra hint in a separate element linked with aria-describedby.Select menus must have an accessible nameselect-nameA select element is a drop-down list of choices. Like a text field, it needs a name that says what the choice is about: Delivery day, Shop, Size. Without a connected label, a screen reader announces the control type and whichever option is currently showing, and the person has to work out from the options alone what they are picking.Input buttons must have discernible textinput-button-nameAn input element with type="submit", type="button" or type="reset" draws a button whose text comes from its value attribute. Leave the value out, or set it to empty, and the button has no name. Sighted people see a blank or a browser default like Submit; screen reader users hear button and nothing else.The autocomplete attribute must use a valid valueautocomplete-validThe autocomplete attribute tells the browser what kind of information a field collects: a given name, a postcode, an email address. The browser can then offer to fill it in, and assistive tools can add an icon or read the purpose aloud. The value has to be one of the defined tokens, spelt exactly. autocomplete="postcode" is not a token; autocomplete="postal-code" is. A wrong value is silently ignored, so the help never arrives.ARIA input fields must have an accessible namearia-input-field-nameWhen a div or span is given a form role such as textbox, combobox, listbox, slider or spinbutton, assistive technology treats it as a field. Unlike a real input, it cannot be named by a label element, so it needs aria-label or aria-labelledby. Without one the person hears edit text or combo box with nothing to say what it is for.ARIA toggle fields must have an accessible namearia-toggle-field-nameElements with role="switch", role="checkbox", role="radio", role="menuitemcheckbox" or role="menuitemradio" are toggles: they are on or off, checked or not. Screen readers announce the role and the state, but the person also needs to know what is being toggled. That name has to come from the element's text content, aria-label or aria-labelledby. Without it, they hear switch, off, and have to guess.Who these pages are for: the developer or site owner who has a scan result in front of them and wants to understand it, test it and fix it without a training course.
Keep going
Check your page for forms issues
Websight runs these checks on any page in Chrome and shows a draft fix for each element it finds.
Add Websight to ChromeFree scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.