Label title only
Moderate effortFound on 4% of audited stores.
Add a visible text label to every form field so it is not labeled only by a hidden tooltip (title attribute) or supplementary description (aria-describedby).
What it is
Every input field on a web form — search boxes, email fields, quantity selectors, checkout fields — needs a visible label that sighted users can read and that assistive technologies like screen readers can announce. The `title` attribute (which appears as a browser tooltip on hover) and `aria-describedby` (which provides supplementary description) are not substitutes for a proper label. When a field relies only on these mechanisms, many users — including those using screen readers, voice-control software, or who simply have low vision — cannot tell what the field is for. This WCAG rule (label-title-only) flags any form field that lacks a proper visible label and depends solely on hidden or supplementary labeling methods.
Why it matters
Accessibility failures on checkout and search forms directly reduce conversions: if a customer cannot understand what to type into a field, they abandon the form. Legally, WCAG 2.1 Level AA compliance is required or strongly recommended in many jurisdictions (ADA in the US, EN 301 549 in the EU, AODA in Canada), and failing it exposes your store to complaints, audits, and litigation. Search engines also parse form labels to understand page content and site usability — a well-labeled search or newsletter form sends better signals than one Google's crawler cannot interpret. Fixing this issue improves usability for everyone, including mobile users who cannot hover to see tooltip text.
How to fix it
- Identify every form field that shows this violation — common culprits are search boxes, quantity inputs, coupon fields, newsletter sign-ups, and checkout address fields.
- For each field, add a visible `<label>` element whose `for` attribute matches the field's `id` attribute, and place it immediately before or above the input.
- If a visible label truly cannot be shown for design reasons (e.g. an inline search bar), use `aria-label` directly on the `<input>` element — this is explicitly accessible, unlike `title` or `aria-describedby` alone.
- Remove reliance on `title` as the sole label; you may keep `title` as supplementary tooltip text, but it must not be the only labeling mechanism.
- Re-test with a free browser extension such as axe DevTools or WAVE to confirm the violation is resolved.
- Repeat the check after any theme update or app install, as third-party widgets often re-introduce unlabeled fields.
Fix it on your platform
Pick your platform for the exact steps.
How to fix label title only on Shopify
- In your Shopify admin go to Online Store → Themes → (your active theme) → Actions → Edit code.
- Common problem files: sections/header.liquid (search input), sections/main-cart-items.liquid (quantity input), templates/customers/login.liquid, and any newsletter section.
- Open the relevant .liquid file, find the <input> element, and check whether a <label for='...'> with matching id exists above it.
- If missing, add a <label for='search'>Search</label> immediately before the <input id='search' ...>. For visually-hidden labels you still want read aloud, wrap the label text in a <span class='visually-hidden'> using Shopify's built-in utility class instead of relying on title.
- For search bars where a visible label is unwanted by the design, replace the title attribute with aria-label='Search' directly on the <input> element.
- Save and preview. Use the axe browser extension to verify no label-title-only violations remain.
How to fix label title only on WooCommerce
- Identify which template file contains the offending input: WooCommerce templates live in your child theme under woocommerce/ (e.g. woocommerce/global/quantity-input.php for quantity fields, woocommerce/checkout/form-checkout.php for checkout).
- Copy the file from wp-content/plugins/woocommerce/templates/ into your child theme's woocommerce/ folder to override it safely.
- Open the copied file and locate the <input> element. Add a matching <label for='input-id'>Quantity</label> above it (or use a visually-hidden class from your theme).
- For the site-wide WordPress search widget (<input type='search'>), edit your child theme's searchform.php and ensure a <label> wraps or precedes the input.
- Alternatively, install the free 'WP Accessibility' plugin (by Joe Dolson) — it automatically adds visible/screen-reader labels to the default WordPress search form and comment fields.
- Flush any page/object cache (Plugins → WP Super Cache / LiteSpeed / etc. → Purge All) and verify with the axe extension.
How to fix label title only on BigCommerce
- Go to Storefront → Themes → Advanced → Edit Theme Files (in the Stencil theme editor, or download the theme for local editing via the BigCommerce CLI).
- Locate templates/components/search/search-form.html for the search box, and templates/components/cart/item-quantity.html for quantity inputs.
- Add a <label for='search_query'>Search</label> paired with id='search_query' on the input, or add aria-label='Search' to the input if the design requires no visible label.
- For checkout fields, BigCommerce's Optimized One-Page Checkout is hosted — open a support ticket or use the Checkout SDK / Checkout JS SDK customization to inject labels, or configure a third-party checkout that is WCAG-compliant.
- Re-upload / push the theme and verify in the storefront using axe DevTools.
How to fix label title only on Wix
- Open the Wix Editor for your site. Click on the form widget or input element that has the issue.
- In the element settings panel, look for a 'Label' or 'Placeholder' option — ensure the Label field is filled in (not just the Placeholder, which disappears when the user types).
- For Wix Forms (the native app), click the form → Settings → Field Settings and turn on 'Show label' for every field; enter meaningful label text.
- For search bars added via Wix's Add menu → Search, the label is handled by Wix internally — update the accessible name by clicking the element → Settings → Accessible Name or 'Tooltip' field and providing a real text value in the aria-label equivalent.
- If you use Wix's Dev Mode (Velo), you can set element.accessibilityAttributes.label = 'Search' on any $w('#inputElement') in your page code.
- Publish the site and test with the WAVE browser extension.
How to fix label title only on Squarespace
- In the Squarespace editor, click the form block you want to fix → Edit → click on an individual field.
- Ensure the 'Label' option is enabled and contains meaningful text (not just a placeholder). Squarespace renders enabled labels as visible <label> elements in the HTML.
- For the site search block, Squarespace injects an aria-label automatically in most templates — test with axe to confirm. If it is missing, add a Code Block above the search block with a visually-hidden label, or use Custom CSS with a ::before pseudo-element workaround (limited).
- For advanced fixes, go to Pages → (page) → Edit → click any block → … → Edit Custom CSS, or use the global Design → Custom CSS panel to add a .visually-hidden utility class, then inject the label via Settings → Advanced → Code Injection (note: Code Injection is available on Business plan and above).
- After changes, publish and validate with axe DevTools.
How to fix label title only on Webflow
- Open the Webflow Designer. Click the Form Block containing the offending input, then click into the specific Input element.
- In the Element Settings panel (right side), find the 'Label' toggle — make sure it is turned ON and that the label text is filled in with a meaningful name (e.g. 'Email address', not just 'Email').
- If you need a visually-hidden label (screen-reader only), create a Label element, add a custom class (e.g. 'sr-only'), and in the Style panel set: position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
- For input elements where no label element is desired, select the Input in the Designer → Settings panel → add a custom attribute: Name = aria-label, Value = 'Search' (or the appropriate field name).
- Do NOT rely on the Placeholder field as a substitute for a label — placeholders disappear when the user starts typing.
- Publish and test with axe DevTools in the browser.
How to fix label title only on Adobe Commerce (Magento)
- Identify the .phtml template responsible for the input: common locations are Magento_Search/templates/form.mini.phtml (search), Magento_Checkout/templates/cart/item/renderer.phtml (quantity), Magento_Customer/templates/form/login.phtml (login).
- In your custom theme (app/design/frontend/<Vendor>/<theme>/), copy the template file from the module's view/frontend/templates/ path, maintaining the same directory structure.
- Open the copied file and add or fix the <label for='input-id'> element so it matches the input's id attribute. Use the $block->escapeHtml() helper for any dynamic label text.
- For the mini search form, the input typically has id='search' — ensure a <label for='search' class='label'><span>Search</span></label> precedes it; add the CSS class 'label' to style it visibly or hide it accessibly using Magento's built-in .visually-hidden / .hidden class.
- Run bin/magento setup:static-content:deploy and bin/magento cache:flush, then hard-refresh the storefront and test with axe.
How to fix label title only on Shopify Plus
- Shopify Plus stores use the same theme code structure. Access Online Store → Themes → Actions → Edit code.
- For checkout-specific fields (checkout.liquid is available on Plus only): go to Online Store → Themes → Actions → Edit code → `layout/checkout.liquid` and inspect any custom input fields for missing `<label>` elements.
- Apply the same label/aria-label fix described in the Shopify steps above, paying particular attention to custom checkout upsell or gift-message input fields added via scripts.
- Use Shopify's Theme Inspector or a browser accessibility tool (axe DevTools extension) to verify after saving.
How to fix label title only on Magento Open Source
- Follow the same process as Adobe Commerce (Magento) above — override the relevant PHTML template in your custom theme directory.
- After adding visible `<label>` elements or `aria-label` attributes, clear the Magento cache: Admin → System → Cache Management → Flush Magento Cache.
- Test on staging before deploying to production.
How to fix label title only on WordPress.org
- For theme-controlled forms (search, comments, newsletter), open your child theme's template files in Appearance → Theme File Editor or via FTP. Locate `searchform.php`, `comments.php`, or the relevant template part and add a `<label for="s">Search</label>` (or equivalent) before each unlabeled input.
- For plugin-generated forms (Contact Form 7, Gravity Forms, WPForms, etc.): open the form builder in the plugin's admin area, select the field, and enable 'Show label' or fill in the 'Field Label' setting. Never leave the label blank and rely only on placeholder text or a tooltip.
- If a label must be visually hidden for design reasons, use a CSS class like `.screen-reader-text` (built into most WordPress themes) on the `<label>` element rather than removing the label or using `title` alone — this keeps the label accessible to screen readers while hiding it visually.
- Save and verify with the axe browser extension or WP Accessibility plugin.
How to fix label title only on PrestaShop
- In your PrestaShop admin, go to Design → Theme & Logo → and use FTP to access your active theme's template files under `themes/YOUR_THEME/templates/`.
- Locate the relevant `.tpl` file — common files are `customer/authentication.tpl` (login/register), `checkout/checkout.tpl` (checkout fields), and `_partials/header.tpl` (search).
- For each `<input>` that has only a `title` attribute, add `<label for="FIELD_ID">Visible Label</label>` before the input and add `id="FIELD_ID"` to the `<input>` tag. For icon-only search bars, add `aria-label="Search"` to the input.
- Clear the PrestaShop cache (Advanced Parameters → Performance → Clear cache) and verify with an accessibility scanner.
Does your site have this issue?
Run a free SEOLZ scan to find label title only — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Label title only?
Every input field on a web form — search boxes, email fields, quantity selectors, checkout fields — needs a visible label that sighted users can read and that assistive technologies like screen readers can announce. The `title` attribute (which appears as a browser tooltip on hover) and `aria-describedby` (which provides supplementary description) are not substitutes for a proper label. When a field relies only on these mechanisms, many users — including those using screen readers, voice-control software, or who simply have low vision — cannot tell what the field is for. This WCAG rule (label-title-only) flags any form field that lacks a proper visible label and depends solely on hidden or supplementary labeling methods.
Why does label title only matter?
Accessibility failures on checkout and search forms directly reduce conversions: if a customer cannot understand what to type into a field, they abandon the form. Legally, WCAG 2.1 Level AA compliance is required or strongly recommended in many jurisdictions (ADA in the US, EN 301 549 in the EU, AODA in Canada), and failing it exposes your store to complaints, audits, and litigation. Search engines also parse form labels to understand page content and site usability — a well-labeled search or newsletter form sends better signals than one Google's crawler cannot interpret. Fixing this issue improves usability for everyone, including mobile users who cannot hover to see tooltip text.
How do I fix label title only?
Add a visible text label to every form field so it is not labeled only by a hidden tooltip (title attribute) or supplementary description (aria-describedby).
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- Forms tutorial — W3C WAI
- ARIA basics — MDN