Form instructions with aria-labelledby
Bind multiple ids inside aria-labelledby to link form instructions to inputs. For example, aria-labelledby="date-label date-instructions" links both a label and an instruction paragraph to the input field.
accessibility/forms
14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Semantic form elements
Use semantic form elements: form, label, input, textarea, and button. Place labels on top or to the left of form fields. Link labels to inputs using for and id attributes. Include autocomplete="on" on the form element to apply to all inputs.
Label with for and id best practice
Explicitly set labels with a matching id using for attribute, rather than wrapping inputs inside label tags. This approach is better supported by assistive technology.
aria-label for accessible names
Use aria-label attribute on form inputs to provide an accessible name for screen readers. This can be used as an alternative to label elements.
aria-labelledby for visible labels
Use aria-labelledby to provide an accessible name when the label text is visible on screen. Pair it to other elements by their id. You can link multiple ids together, such as aria-labelledby="billing name", and this is useful when the label text is already present in the document.
useId() for reusable form components
When using aria-labelledby or aria-describedby in reusable components, generate IDs with useId() instead of hard-coding them. This keeps each component instance's id values unique while still linking visible text to form controls.
aria-describedby for form descriptions
Use aria-describedby to provide additional information that users might need about an input. Link it to an element by id, such as a paragraph describing criteria or format requirements for the input.
Placeholder accessibility pitfall
Avoid using placeholders as the sole label for form inputs. Placeholders do not meet color contrast criteria by default, and when color contrast is fixed they look like pre-populated data. Provide all information users need to fill out forms outside the inputs themselves.
Form instructions with aria-describedby
Attach form instructions to inputs using aria-describedby, linking to an element containing the instruction text. For example, aria-describedby="dob-instructions" links to a paragraph with format instructions.
Visually hiding labels with CSS
Use CSS to visually hide labels while keeping them available for assistive technology: position absolute, overflow hidden, white-space nowrap, margin 0, padding 0, height 1px, width 1px, clip rect(0 0 0 0), clip-path inset(100%).
aria-hidden="true" usage
Use aria-hidden="true" to hide elements from assistive technology while leaving them visually available. Do not use on focusable elements; use only on decorative, duplicated, or offscreen content.
Form button type attribute
When using buttons inside a form, set the type attribute to prevent unwanted form submission. Use type="button" for cancel buttons and type="submit" for submit buttons.
Functional image input for forms
Use input type="image" to create functional images that act as submit buttons. Include an alt attribute describing the image for accessibility.
Icon button accessibility
For buttons with only icons, add aria-hidden="true" to the icon element and include a visually hidden span with text describing the action. For example: <button><i aria-hidden="true"></i><span class="hidden-visually">Search</span></button>