Label

Quick win

Found on 30% of audited stores.

Add a visible or programmatic label to every form input so assistive technologies can identify it for users.

What it is

Every form field on your site — search boxes, email sign-up fields, checkout inputs, contact forms — must have a label that describes what the field is for. A "label" in web terms is either a visible `<label>` element paired with the input, or a special accessibility attribute (like `aria-label`) that provides the same description invisibly. When a form field has no label at all, the browser and assistive technology have nothing to announce to the user about what that field is asking for. WCAG Success Criterion 4.1.2 requires all form controls to have a name that assistive technology can read out loud.

Why it matters

Screen-reader users — including customers with visual impairments — will hear something like "edit text, blank" when they reach an unlabelled field, with no clue what to type. This makes checkout, sign-up, and contact forms completely unusable for those customers, directly costing you sales and leads. From a legal standpoint, unlabelled form fields are one of the most frequently cited accessibility violations in ADA and WCAG-based lawsuits and demand letters targeting e-commerce stores. Google also uses accessible markup signals as a quality indicator, so fixing labelling issues supports your site's overall technical health. Fixing this is typically a quick code change that immediately improves usability for everyone, including mobile users who rely on tap-targets and auto-fill.

How to fix it

  1. Identify every unlabelled form field (search box, email input, phone, address fields, dropdowns, checkboxes, radio buttons) flagged by your scanner.
  2. For each field, decide on the best labelling method: (a) a visible `<label>` element linked via matching `for` / `id` attributes is the preferred approach; (b) wrap the input inside the `<label>` element (implicit label) if you cannot use `for`/`id`; (c) add `aria-label='Field description'` directly on the input for fields where a visible label is not desired (e.g. an icon-only search box); or (d) add `aria-labelledby='id-of-another-element'` to point to existing visible text.
  3. Ensure the label text is descriptive and unique — 'Email address' rather than just 'Email', 'Search products' rather than just 'Search'.
  4. Never rely on `placeholder` text alone as a label — placeholders disappear when the user starts typing and are not reliably announced by all screen readers.
  5. After implementing, validate using a free tool such as axe DevTools browser extension or WAVE to confirm the violation is resolved.
  6. Test manually with a screen reader (NVDA on Windows, VoiceOver on Mac/iOS) by tabbing through the form and listening to what is announced for each field.

Fix it on your platform

Pick your platform for the exact steps.

How to fix label on Shopify
  1. Go to Online Store → Themes → Actions → Edit code.
  2. Locate the relevant template file: for the newsletter form it is typically `sections/footer.liquid` or `sections/newsletter.liquid`; for the search box try `sections/header.liquid` or `snippets/search-form.liquid`; for checkout fields these are controlled by Shopify's native checkout (Plus only).
  3. Find the `<input>` element that is missing a label. Add a `<label for='field-id'>Description</label>` immediately before it, and add `id='field-id'` to the input. For inputs where you want a visually hidden label, add the CSS class `visually-hidden` (already defined in most Shopify themes) to the label element.
  4. For the search input specifically, add `aria-label='Search'` directly on the `<input type='search'>` tag if a visible label is not desired.
  5. Click Save, then preview the theme and verify with the axe browser extension.
Full Shopify guide →Official Shopify docs ↗
How to fix label on Shopify Plus
  1. For storefront templates follow the same steps as Shopify above (Online Store → Themes → Edit code).
  2. For the checkout, go to Settings → Checkout → (scroll to) Checkout customization → Checkout branding. Shopify Plus allows custom checkout UI extensions; use the Checkout UI Extension SDK to add `aria-label` props to custom input components.
  3. If you have a custom checkout.liquid (legacy), edit it directly: add `<label for='...'> </label>` / `aria-label` to any custom fields you have added.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix label on WooCommerce
  1. Install and activate the free plugin 'WP Accessibility' (by Joe Dolson) — it automatically fixes several common labelling issues including search forms.
  2. For custom or theme form fields, go to Appearance → Theme File Editor (or use a child theme) and open the relevant template: `woocommerce/templates/checkout/form-checkout.php` or `woocommerce/templates/myaccount/form-login.php`.
  3. Add `<label for='input-id'>Descriptive text</label>` before each unlabelled `<input>`, or add `aria-label='...'` directly on the input tag.
  4. If using a page-builder form (Elementor, WPForms, Gravity Forms), open the widget/field settings and fill in the 'Label' field — these plugins output proper `<label>` markup when a label is provided.
  5. Save, clear caches (W3 Total Cache / WP Rocket), and re-test.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix label on BigCommerce
  1. Go to Storefront → Themes → Advanced → Edit Theme Files (Stencil CLI is recommended for larger edits).
  2. Open the relevant Handlebars template — search form is in `templates/components/common/header.html` or `templates/components/search/...`; contact form in `templates/pages/contact-us.html`; newsletter in `templates/components/common/subscribe.html`.
  3. Add a `<label for='input-id'>Description</label>` before the target `<input>`, and add `id='input-id'` to the input. For icon-only inputs add `aria-label='...'` on the input itself.
  4. Push the changes via Stencil CLI (`stencil push`) or save via the online editor, then verify.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix label on Wix
  1. Open the Wix Editor and click on the form widget that contains the unlabelled field.
  2. Select the specific input element and open its Settings panel. In the 'Field Label' or 'Placeholder' field, add a descriptive label. Wix renders the label text as a visible `<label>` element in the DOM.
  3. If you want the label hidden visually, use the label styling options to reduce its opacity or overlap it — do NOT delete the label text itself, as that removes the accessible name.
  4. For Wix Forms (the native forms app), go to App Market → Wix Forms → Manage Fields and ensure every field has a 'Field Title' entered.
  5. For custom-coded sections using Velo (Wix Dev Mode), add `element.label = 'Descriptive text'` or use `$w('#inputId').label = 'Description'` in your page code.
  6. Publish the site and validate with the axe browser extension.
Full Wix guide →Official Wix docs ↗
How to fix label on Wix Studio
  1. In Wix Studio, click on the form or input component on the canvas.
  2. Open the Properties panel on the right. Under 'Label', type a descriptive label for the field. Wix Studio outputs this as a proper `<label>` element.
  3. For inputs intentionally displayed without a visible label (e.g. search bar in a header), switch to Dev Mode and add an `aria-label` attribute in the element properties or via Velo code: `$w('#searchInput').setAttribute('aria-label', 'Search products')`.
  4. Publish and verify with axe DevTools.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix label on Squarespace
  1. For Squarespace Form Blocks: click Edit on the form block, then click the pencil icon on each field. In the field settings, ensure 'Label' is filled in — Squarespace renders this as a `<label>` tag.
  2. If you want to hide labels visually while keeping them accessible, go to Design → Custom CSS and add: `.field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }` — this hides labels visually but keeps them in the DOM for screen readers.
  3. For the Search Block (header/footer), Squarespace automatically provides an `aria-label` on the input; if a custom header overrides this, add the fix via Settings → Advanced → Code Injection (header code) to inject a small script that sets `aria-label` on the element.
  4. For Newsletter Blocks, open the block editor, ensure the Email field has a label entered in the form settings.
  5. Save and verify with the axe browser extension.
Full Squarespace guide →Official Squarespace docs ↗
How to fix label on Webflow
  1. Open your project in the Webflow Designer and select the Form Block or standalone input element.
  2. Click on the specific Input element. In the right panel under 'Label', ensure a Label element is present and connected to the input via its 'For' attribute matching the input's ID.
  3. To add a visually hidden label: add a `<label>` element in the form, set its text, then apply a custom 'visually-hidden' combo class with the CSS: `position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;`.
  4. For inputs where you only want `aria-label` (no visible label), select the input, go to Element Settings (gear icon) → Custom Attributes, and add `aria-label` with the descriptive value.
  5. Publish and test with axe DevTools.
Full Webflow guide →Official Webflow docs ↗
How to fix label on Adobe Commerce (Magento)
  1. Locate the relevant `.phtml` template file for the form — e.g. `app/design/frontend/<Vendor>/<Theme>/Magento_Checkout/templates/` for checkout fields, or `app/design/frontend/<Vendor>/<Theme>/Magento_Search/templates/form.mini.phtml` for the search form.
  2. Add `<label for='input-id' class='label'><span>Descriptive text</span></label>` before the `<input id='input-id'>` element. For visually hidden labels use Magento's built-in `.visually-hidden` utility class on the label.
  3. For the mini-search input, add `aria-label='<?= $block->escapeHtml(__('Search')) ?>'` directly on the `<input>` element.
  4. Clear the Magento cache: go to System → Cache Management → Flush Magento Cache, or run `bin/magento cache:flush` from the CLI.
  5. Verify with the axe browser extension on the storefront.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix label on Magento Open Source
  1. Follow the same steps as Adobe Commerce above — the template locations and cache-flush commands are identical.
  2. If you are not using a custom theme, create one first (never edit core files directly) so your changes survive upgrades.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix label on PrestaShop
  1. In your theme folder (typically `themes/<your-theme>/templates/`), open the relevant template — e.g. `checkout/_partials/steps/addresses.tpl`, `contact/contact.tpl`, or `_partials/header.tpl` for search.
  2. Add `<label for='field_id'>{l s='Descriptive text' d='Shop.Theme.Global'}</label>` before the corresponding `<input id='field_id'>` tag.
  3. For search, add `aria-label='{l s='Search' d='Shop.Theme.Global'}'` to the `<input>` element in `_partials/header.tpl`.
  4. Clear the PrestaShop cache via Advanced Parameters → Performance → Clear cache, then verify.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix label on Headless / Custom (I build in code)
  1. In your component or template file, ensure every `<input>`, `<select>`, and `<textarea>` has one of: (a) a `<label for='x'>` with a matching `id='x'` on the input; (b) the input wrapped inside a `<label>` element; (c) an `aria-label='...'` attribute on the input; or (d) `aria-labelledby='id-of-visible-text'` pointing to existing text.
  2. Create a reusable `<FormField>` (React), a `field` component (Vue), or a partial (any framework) that always outputs a label + input pair, making unlabelled fields structurally impossible.
  3. Add an automated accessibility test (axe-core, jest-axe, Playwright with axe) to your CI pipeline to catch regressions before deploy.
  4. Verify in a browser with the axe DevTools extension.
Full Headless / Custom (I build in code) guide →Official Headless / Custom (I build in code) docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find label — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Label?

Every form field on your site — search boxes, email sign-up fields, checkout inputs, contact forms — must have a label that describes what the field is for. A "label" in web terms is either a visible `<label>` element paired with the input, or a special accessibility attribute (like `aria-label`) that provides the same description invisibly. When a form field has no label at all, the browser and assistive technology have nothing to announce to the user about what that field is asking for. WCAG Success Criterion 4.1.2 requires all form controls to have a name that assistive technology can read out loud.

Why does label matter?

Screen-reader users — including customers with visual impairments — will hear something like "edit text, blank" when they reach an unlabelled field, with no clue what to type. This makes checkout, sign-up, and contact forms completely unusable for those customers, directly costing you sales and leads. From a legal standpoint, unlabelled form fields are one of the most frequently cited accessibility violations in ADA and WCAG-based lawsuits and demand letters targeting e-commerce stores. Google also uses accessible markup signals as a quality indicator, so fixing labelling issues supports your site's overall technical health. Fixing this is typically a quick code change that immediately improves usability for everyone, including mobile users who rely on tap-targets and auto-fill.

How do I fix label?

Add a visible or programmatic label to every form input so assistive technologies can identify it for users.

Authoritative references

Related Accessibility (WCAG) issues