Fix missing form labels
Form labels missing means a field has no label a screen reader can use. Placeholder text is not a label.
People cannot tell what to type, and a wrong guess on checkout loses the order.
Steps
- Look for inputs with no label element and no aria-label.
- Connect the label's for attribute to the input id.
- Keep the label visible.
Failing example
A newsletter box with only a placeholder that says Email.
Better example
A visible label: Email address.
Shopify
In the Shopify theme, find the newsletter or contact input and add a label element whose for matches the input id. Placeholder text alone does not name the field.
WooCommerce
On WooCommerce checkout, do not hide labels with CSS. If you add a custom field, give it a label in the checkout field filter.
WordPress
In the form block or plugin, set the field label and leave it visible. Match the for attribute to the input id.
Wix
In the Wix form, set each field title and do not hide the title. Placeholder text inside the box is not enough.