Every Wix Studio fix we catalog

Add descriptive alt text to every product and content image so search engines and screen readers can understand what the image shows.

On Wix Studio

1. In Wix Studio editor, click the image element → open the Settings panel (gear icon) → find the 'Alt Text' field → enter your description → Done.
2. For Wix Stores products inside Wix Studio: Dashboard → Store Products → [select product] → click the product image → edit alt text in the image settings → Save.

<!-- BEFORE (missing alt — bad) -->
<img src="/images/red-leather-bag.jpg">

<!-- AFTER (descriptive alt — correct) -->
<img src="/images/red-leather-bag.jpg" alt="Red leather crossbody bag with gold buckle clasp">

<!-- Decorative image (intentionally empty alt — correct) -->
<img src="/images/divider-line.png" alt="">

Add descriptive alt text to every product and content image at the template level so search engines and screen readers can understand all images on the page.

On Wix Studio

1. In Wix Studio, click an image element → open the Properties panel on the right → enter alt text in the 'Alt Text' field.
2. For Wix Studio ecommerce product images, follow the same Dashboard → Store Products CSV workflow described for Wix above.
3. If using Wix Studio's CMS (dynamic pages), edit the connected dataset and add/populate an 'Image Alt Text' field, then bind it to the image element's alt text property in the editor.

<!-- Informative product image — describe what the image shows -->
<img src="/images/red-running-shoes-side-view.jpg"
     alt="Red canvas running shoes, side view, white rubber sole"
     width="800" height="800">

<!-- Decorative image — empty alt tells screen readers to skip it -->
<img src="/images/divider-wave.svg"
     alt=""
     role="presentation"
     width="1200" height="40">

Shorten your meta description to 150–160 characters so Google displays it in full instead of cutting it off with "…" in search results.

On Wix Studio

1. In Wix Studio, open the Pages panel, hover over the target page, click the three-dot menu → 'SEO'.
2. Edit the 'Meta description' field in the SEO settings panel, staying under 160 characters.
3. For dynamic product/collection pages, update the description pattern in the SEO Settings of the relevant CMS collection.
4. Click Apply / Publish.

<meta name="description" content="Award-winning Bang & Olufsen headphones, speakers and TVs. Visit our Malaysia showroom at The Gardens Mall, Level 2. Free shipping on orders over RM500.">

Expand your meta description to 120–160 characters so Google displays a compelling, complete snippet in search results that drives more clicks to your store.

On Wix Studio

1. In Wix Studio, select the page in the Pages panel → click the Settings icon (⚙) next to the page name → open the 'SEO' tab.
2. Update the 'Description' field to 120–160 characters → Save.
3. For ecommerce product pages, manage meta descriptions via the Wix eCommerce product editor under the 'SEO' section of each product.

<meta name="description" content="Shop the official Nike national team jerseys — advanced Dri-FIT heat tech meets bold heritage design. Free shipping on orders over $75. Explore the full collection now.">

Add a self-referencing canonical tag to every page so Google knows which URL is the definitive version of that content.

On Wix Studio

1. Wix Studio (advanced editor) also outputs canonical tags automatically for all pages.
2. To set a custom canonical: open the page in Wix Studio editor → click the page settings (gear icon) → SEO tab → scroll to 'Additional Tags' → add `<link rel='canonical' href='YOUR_PREFERRED_URL' />`.
3. For programmatic pages (e.g., dynamic collection pages built with Wix Velo/CMS), use Velo's `wixSeo.setLinks()` API in the page's code to set the canonical dynamically: `import wixSeo from 'wix-seo'; $w.onReady(() => { wixSeo.setLinks([{ rel: 'canonical', href: 'https://www.yourstore.com/preferred-url' }]); });`
4. Verify via Google Search Console URL Inspection.

<link rel="canonical" href="https://www.yourstore.com/your-page/" />

Add a single, descriptive H1 tag to every page that currently lacks one, clearly stating the page's main topic.

On Wix Studio

1. Open the Wix Studio editor and select the page needing an H1.
2. Click the main heading text element (or add one via the '+' Add panel → Text → Heading 1).
3. With the element selected, open the text style dropdown in the toolbar and choose *'Heading 1'* to ensure it is tagged as `<h1>`.
4. For Wix Stores product pages managed through Studio, the product title widget automatically outputs an H1 — ensure the product name is descriptive under Wix Stores → Products.
5. Publish and verify using browser Dev Tools or a headings inspector extension.

<h1>Women's Running Shoes</h1>

Write and add a unique meta description (120–160 characters) to every page that is missing one, so Google can display an accurate, compelling snippet in search results.

On Wix Studio

1. In Wix Studio, open the site → Pages & Menu panel → hover over the page → click the SEO icon (magnifying glass) → fill in the 'Meta Description' field.
2. For collection/dynamic pages, open the dynamic page template → SEO panel → use the field-connection feature to bind the description to a CMS dataset field.
3. For Wix Stores products inside Studio: Dashboard → Store Products → click the product → SEO section → 'Meta Description'.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Shop our full range of handmade leather wallets. Free shipping on orders over $50. Slim, durable & personalised — order yours today.">
  <title>Handmade Leather Wallets | YourStoreName</title>
</head>

Add an og:description meta tag to every page so that social media platforms display a compelling, accurate preview when your pages are shared.

On Wix Studio

1. In Wix Studio, select a page in the left panel and open its SEO settings via the page menu.
2. Under 'Social Share', enter a custom description — this becomes the og:description.
3. For dynamic collection pages, use the dataset binding or Velo code (wixSeo.setMetaTags) to set og:description dynamically from item fields.
4. Publish and test with Facebook's Sharing Debugger.

<head>
  <!-- Open Graph / Social Sharing -->
  <meta property="og:type"        content="website" />
  <meta property="og:url"         content="https://www.example.com/page-url/" />
  <meta property="og:title"       content="Page Title – Brand Name" />
  <meta property="og:description" content="A concise, compelling summary of this page in 100–160 characters that encourages clicks." />
  <meta property="og:image"       content="https://www.example.com/images/social-preview.jpg" />
</head>

Add an og:image meta tag to every page so that social media platforms and messaging apps display a rich, branded image preview whenever someone shares your store's link.

On Wix Studio

1. In Wix Studio, open the Pages panel → hover over the page → click the three-dot menu → 'SEO & Social'.
2. In the Social Sharing section, upload a 1200×630 px image for that specific page.
3. For dynamic pages (e.g. product or blog templates), use the dynamic SEO settings panel to bind the og:image to a dataset field so each item gets its own image automatically.
4. Set a site-wide fallback image in the Dashboard → SEO → Social Share → Social Sharing Image.
5. Publish and validate using Facebook's Sharing Debugger.

Add an og:title meta tag to every page so your store's title appears correctly when shared on social media platforms like Facebook, LinkedIn, and Pinterest.

On Wix Studio

1. In Wix Studio, open the site editor and select the page you want to fix from the Pages & Menus panel.
2. Click the page settings (gear icon) → SEO tab → set the 'Page Title' field. Wix Studio maps this to the og:title tag automatically.
3. For dynamic pages powered by a CMS dataset (e.g. a Products collection), click the dynamic page settings → SEO tab → use the dynamic field connector to bind 'Page Title' to the relevant collection field (e.g. 'Title' or 'Name').
4. For full custom control, use the Wix Studio 'Custom Meta Tags' section (in the SEO tab of page settings) to manually add: property: og:title | content: [your title or dynamic field].
5. Publish the site and validate with the Facebook Sharing Debugger.

<head>
  <!-- Other head tags -->
  <meta property="og:title" content="Amazing Product Name | Your Store Name" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://www.yourstore.com/page-url" />
  <meta property="og:description" content="Short description of this page for social sharing." />
  <!-- Other head tags -->
</head>

Add a unique, descriptive title tag (30–60 characters) to every page that is missing one.

On Wix Studio

1. In Wix Studio, open the Pages panel → hover over the page → click the settings (gear) icon.
2. Select 'SEO' from the panel that appears → edit the 'Page title' field.
3. For store products: access the site Dashboard → Store Products → select the product → SEO section → 'Page title'.
4. Publish the site for changes to go live.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slim Bifold Leather Wallet | BrandName</title>
</head>
<body>
  <!-- page content -->
</body>
</html>

Remove all but one H1 tag from each page so every page has exactly one clear, descriptive primary heading.

On Wix Studio

1. Open the page in Wix Studio Editor. Click any text element and check the text role/style in the Design panel on the right — set only one element to H1.
2. For CMS (dynamic) pages such as product or blog templates, open the page template and ensure the connected dataset title field renders as H1 while all other headings render as H2 or lower.
3. Publish and verify with browser DevTools.

<!-- CORRECT: One H1 per page -->
<h1>Blue Running Shoes – Men's Lightweight Trainers</h1>

<!-- Major sections use H2 -->
<h2>Product Details</h2>
<p>Breathable mesh upper, responsive foam midsole...</p>

<h2>Customer Reviews</h2>
<!-- Sub-sections within a major section use H3 -->
<h3>Top Review: 5 Stars</h3>
<p>Best shoes I've ever bought!</p>

<!-- WRONG: Multiple H1 tags — do NOT do this -->
<!--
<h1>Blue Running Shoes</h1>
<h1>Product Details</h1>
<h1>Customer Reviews</h1>
-->

Remove or replace the noindex directive on any page you want to appear in Google search results.

On Wix Studio

1. In Wix Studio, open the Pages panel → hover over the page → click the three-dot menu → SEO Settings → confirm 'Index this page' is enabled.
2. For Advanced SEO tags: Pages panel → SEO Settings → Advanced → check the 'Additional meta tags' field for any `noindex` robots tag and delete it.
3. Global SEO settings: Dashboard → Marketing & SEO → SEO Settings → review any site-level robot directives.

<meta name="robots" content="index,follow">

Write a 100–200 word description for every category page explaining what products it contains and who they are for, so Google can rank it for category-level keywords.

On Wix Studio

1. In Wix Studio, go to the CMS panel and open the dataset connected to your category/collection pages.
2. Add a rich-text or long-text field named 'Category Description' if one does not exist.
3. Fill in the description for each category row in the CMS dataset.
4. On your dynamic category page template in the Studio editor, add a Text element, click 'Connect to Data', and bind it to the 'Category Description' field.
5. Position the text element above the product grid in the page layout.
6. Publish the site.

<section class="category-description">
  <h1>Women's Waterproof Hiking Boots</h1>
  <p>
    Our women's waterproof hiking boots are built for trail runners, weekend
    trekkers, and serious mountaineers who refuse to let wet weather slow them
    down. Every pair in this collection features a fully sealed waterproof
    membrane, aggressive rubber outsoles for grip on loose or muddy terrain,
    and reinforced ankle support to protect against sprains on uneven ground.
    Whether you're day-hiking a local forest trail or taking on a multi-day
    alpine route, you'll find boots here rated for every conditions and
    experience level. Lightweight options keep pack weight low on fast-and-light
    adventures, while insulated models keep feet warm below freezing. Browse the
    full range below to find your perfect fit.
  </p>
</section>

Expand your category page description to at least 100 words of genuinely helpful, keyword-rich content that explains what shoppers will find in that category.

On Wix Studio

1. Open your project in Wix Studio and go to the category dynamic page (typically set up under CMS > Collections).
2. Select the text element bound to the category description field, or add a new Rich Text element and connect it to the Description field in your CMS collection.
3. Edit the CMS collection entry for each category to include 100+ words of description text.
4. Use the Wix Studio responsive editor to ensure the text block displays correctly on mobile and desktop.
5. Publish when complete.

<section class="category-description">
  <h2>Shop Our Women's Running Shoes</h2>
  <p>
    Discover our curated collection of women's running shoes, designed for every
    type of runner — from casual joggers to marathon enthusiasts. Whether you
    need extra cushioning for long-distance road running, a lightweight racer
    for speed training, or a grippy trail shoe for off-road adventures, you'll
    find the perfect fit here.
  </p>
  <p>
    We stock top brands including Brooks, ASICS, New Balance, and Hoka, all
    rigorously tested for comfort, durability, and performance. Each pair is
    available in a wide range of widths and sizes, so you never have to
    compromise on fit. Browse by surface type, cushion level, or pronation
    support to narrow down your ideal shoe in seconds.
  </p>
  <p>
    Not sure where to start? Check out our
    <a href="/guides/running-shoe-guide">Running Shoe Buying Guide</a> or
    explore our <a href="/collections/running-accessories">Running Accessories</a>
    collection to complete your kit.
  </p>
</section>

Add a structured specifications table or list to every product page so shoppers, search engines, and AI tools can instantly find and use key product details.

On Wix Studio

1. In Wix Studio, open the product page via the Pages & Menus panel.
2. Use the drag-and-drop canvas to add a Grid or Table component below the product description block.
3. Bind the table columns to CMS collection fields if you manage specs through the Wix CMS, or enter values manually per product using the Additional Info section in the Wix Stores product editor (same path as standard Wix).
4. Use Velo (Wix's JavaScript API) if you need to pull spec data programmatically and render it into the table element.
5. Publish and verify on both breakpoints.

Add a structured-data author field (schema.org Person) to every article or blog post so AI engines and Google can identify and trust who wrote the content.

On Wix Studio

1. In Wix Studio, open the project and navigate to the Blog Post page template.
2. Use the SEO panel (accessible per-page or via the global site settings) to add custom JSON-LD structured data for the Article/BlogPosting type including the author.
3. Fill in the contributor/author profile details (display name, bio, social links) in the Members/Contributors settings so Wix can reference them.
4. For full control, use Velo (Wix's developer platform): in the page's .js file, dynamically inject a <script type='application/ld+json'> tag using $w.onReady and the wix-data API to fetch author metafields.
5. Validate with the Rich Results Test.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "How to Choose the Best Running Shoes",
  "datePublished": "2024-03-10T09:00:00+00:00",
  "dateModified": "2024-06-20T14:00:00+00:00",
  "author": {
    "@type": "Person",
    "name": "Alex Johnson",
    "url": "https://www.yourstore.com/about/alex-johnson",
    "sameAs": [
      "https://www.linkedin.com/in/alexjohnson",
      "https://twitter.com/alexjohnson"
    ]
  },
  "publisher": {
    "@type": "Organization",
    "name": "Your Store Name",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.yourstore.com/assets/logo.png",
      "width": 300,
      "height": 60
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.yourstore.com/blog/how-to-choose-running-shoes"
  }
}
</script>

Restructure page content to lead with a direct, concise answer, use question-format headings, and add FAQ structured data so search engines and AI assistants can surface your answers prominently.

On Wix Studio

1. Open the page in Wix Studio editor; click the first text/content element and rewrite it as a 160-character answer summary.
2. Rewrite H2/H3 text elements as questions using the text style selector in the toolbar.
3. For FAQ schema: click the page background → Page Settings → Advanced → Custom Code → add the FAQPage JSON-LD before the </body> tag.
4. Alternatively use the native FAQ / Accordion widget from the Add Elements panel; Wix Studio outputs FAQPage schema for this widget automatically.
5. Publish and test with Google's Rich Results Test.

<!-- Answer-first page structure template -->

<!-- 1. Direct-answer summary (≤160 characters) -->
<p class="answer-summary">
  [Product Name] does [core benefit] by [key mechanism] — ideal for [target customer].
</p>

<!-- 2. Question-format H2 subheading -->
<h2>What does [Product Name] do?</h2>
<p>Direct 1–2 sentence answer here. Then expand with supporting detail below.</p>

<!-- 3. Another question-format heading -->
<h2>Who is [Product Name] designed for?</h2>
<p>Direct answer. Then elaborate.</p>

<!-- 4. FAQ section (visible on page — required for FAQPage schema) -->
<section id="faq">
  <h2>Frequently Asked Questions</h2>

  <h3>How long does shipping take?</h3>
  <p>Standard shipping takes 3–5 business days. Express options are available at checkout.</p>

  <h3>What is your return policy?</h3>
  <p>We accept returns within 30 days of delivery on unused items in original packaging.</p>

  <h3>Is [Product Name] compatible with [common concern]?</h3>
  <p>Yes. [One-sentence direct answer with any important caveats.]</p>
</section>

<!-- 5. FAQPage JSON-LD (copy the JSON-LD snippet above and paste here or in <head>) -->

Add BreadcrumbList structured data (JSON-LD) to every page so Google can display your site's navigation path directly in search results.

On Wix Studio

1. Open Wix Studio and navigate to the relevant page.
2. Click on the SEO panel (top toolbar) and then 'Advanced SEO Tags' to access the structured data input field.
3. Paste the complete JSON-LD BreadcrumbList block; use Wix Studio's dynamic data binding or Velo code panels to pull page-specific values (page title, URL) into the schema dynamically.
4. Apply the pattern to all relevant page templates (Product Page, Category Page, Blog Post) via the template editor so it rolls out site-wide.
5. Validate using Google's Rich Results Test.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Women's Clothing",
      "item": "https://www.example.com/womens-clothing/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Dresses",
      "item": "https://www.example.com/womens-clothing/dresses/"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Blue Wrap Dress",
      "item": "https://www.example.com/womens-clothing/dresses/blue-wrap-dress/"
    }
  ]
}
</script>

Add FAQPage schema markup to any page that contains a Frequently Asked Questions section so Google can display your answers as rich results directly in search.

On Wix Studio

1. In Wix Studio, open your site's dashboard and navigate to Settings → Custom Code.
2. Click '+ Add Custom Code', paste your JSON-LD <script> block, name it 'FAQPage Schema', select the specific page(s) it applies to, set placement to 'Head', and click Apply.
3. Publish the site and validate the live URL in Google's Rich Results Test.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Frequently Asked Questions | Your Store</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "What is your return policy?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "We accept returns within 30 days of purchase. Items must be unused and in their original packaging."
        }
      },
      {
        "@type": "Question",
        "name": "How long does shipping take?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Standard shipping takes 5–7 business days. Expedited options are available at checkout."
        }
      }
    ]
  }
  </script>
</head>
<body>
  <h1>Frequently Asked Questions</h1>
  <h2>What is your return policy?</h2>
  <p>We accept returns within 30 days of purchase. Items must be unused and in their original packaging.</p>
  <h2>How long does shipping take?</h2>
  <p>Standard shipping takes 5–7 business days. Expedited options are available at checkout.</p>
</body>
</html>

Add HowTo structured data (JSON-LD) to any page that walks customers through a multi-step process, so Google can display your instructions as rich results in search.

On Wix Studio

1. Open Wix Studio and navigate to the target page.
2. Click the page name in the layers/pages panel > Page SEO Settings > Advanced SEO tab.
3. Paste your complete JSON-LD HowTo block into the 'Structured Data Markup' or custom head code area.
4. Publish and validate with Google's Rich Results Test.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>How to Complete Your Task | Your Store</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "HowTo",
    "name": "How to Complete Your Task",
    "description": "Follow these steps to complete your task easily.",
    "totalTime": "PT10M",
    "step": [
      {
        "@type": "HowToStep",
        "position": 1,
        "name": "Prepare your materials",
        "text": "Gather everything you need before you start: list materials here."
      },
      {
        "@type": "HowToStep",
        "position": 2,
        "name": "Complete the main action",
        "text": "Describe exactly what the user should do in this core step."
      },
      {
        "@type": "HowToStep",
        "position": 3,
        "name": "Verify the result",
        "text": "Explain how the user confirms the task was completed successfully."
      }
    ]
  }
  </script>
</head>
<body>
  <!-- Your how-to page content -->
</body>
</html>

Add LocalBusiness JSON-LD structured data to your store so search engines and AI answer engines can surface your business name, address, phone number, and hours in rich results and direct answers.

On Wix Studio

1. In Wix Studio, open the site editor and select the page you want to add schema to (start with the homepage).
2. Click the page settings icon → SEO → Advanced SEO.
3. Locate the 'Structured Data Markup' text area and paste your complete JSON-LD object.
4. Save and republish the site.
5. Validate with Google's Rich Results Test.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Your Store</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Store",
    "name": "Your Business Name",
    "url": "https://www.yourdomain.com",
    "logo": "https://www.yourdomain.com/logo.png",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "123 Main Street",
      "addressLocality": "Springfield",
      "addressRegion": "IL",
      "postalCode": "62701",
      "addressCountry": "US"
    },
    "telephone": "+1-217-555-0100",
    "openingHoursSpecification": [
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
        "opens": "09:00",
        "closes": "18:00"
      }
    ]
  }
  </script>
</head>
<body>
  <!-- page content -->
</body>
</html>

Add an Organization schema markup block to your store's homepage (and/or sitewide template) so search engines and AI assistants can definitively identify your brand.

On Wix Studio

1. In Wix Studio, click the site name in the top bar → Site Settings.
2. Go to 'Advanced' → 'Custom Code', then click '+ Add Custom Code'.
3. Paste your complete <script type='application/ld+json'>…</script> Organization block, set placement to 'Head', scope to 'All pages'.
4. Click Apply and publish.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Acme Store",
  "url": "https://www.acmestore.com",
  "logo": {
    "@type": "ImageObject",
    "url": "https://www.acmestore.com/images/logo.png",
    "width": 250,
    "height": 250
  },
  "sameAs": [
    "https://www.facebook.com/acmestore",
    "https://www.instagram.com/acmestore",
    "https://twitter.com/acmestore",
    "https://www.linkedin.com/company/acmestore",
    "https://www.youtube.com/c/acmestore"
  ],
  "contactPoint": {
    "@type": "ContactPoint",
    "contactType": "customer service",
    "email": "hello@acmestore.com"
  }
}
</script>

Add a `sameAs` array to your Organization schema, linking to your verified social profiles, Wikipedia page, LinkedIn, and other authoritative sources so search engines can confidently identify your brand as a known entity.

On Wix Studio

1. In Wix Studio, open the site dashboard → Settings → Custom Code.
2. Add a new custom code snippet in the '<head>' section, paste the Organization JSON-LD (with `sameAs`), set it to 'All pages'.
3. Publish the site and verify with Google's Rich Results Test.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Your Brand Name",
  "url": "https://www.yourdomain.com",
  "logo": "https://www.yourdomain.com/images/logo.png",
  "sameAs": [
    "https://www.linkedin.com/company/your-company",
    "https://www.facebook.com/yourpage",
    "https://twitter.com/yourhandle",
    "https://www.instagram.com/yourhandle",
    "https://www.youtube.com/@yourchannel",
    "https://en.wikipedia.org/wiki/Your_Brand",
    "https://www.wikidata.org/wiki/QXXXXXXX"
  ]
}
</script>

Remove or replace any ARIA `role` attribute that is not permitted on the HTML element it is applied to — in particular, do not add `role="textbox"` (or other interactive roles) to elements that already have a native semantic role which conflicts with it.

On Wix Studio

1. Open Wix Studio and navigate to the relevant page.
2. Select the element. If it is a custom component or HTML embed, click Edit Code to access its markup.
3. Remove or replace the invalid `role` attribute, or swap the element for the appropriate native HTML tag.
4. Save and republish; re-audit with axe DevTools.

<!-- ❌ WRONG: role="textbox" is not permitted on <select> -->
<select role="textbox" name="country">
  <option value="us">United States</option>
</select>

<!-- ✅ FIX A: Remove the invalid role — <select> already has the correct native semantics -->
<select name="country">
  <option value="us">United States</option>
</select>


<!-- ❌ WRONG: role="textbox" on a <div> with no keyboard/input handling -->
<div role="textbox" class="fake-input">Enter your name</div>

<!-- ✅ FIX B: Replace with a real <input> element -->
<label for="name">Your name</label>
<input type="text" id="name" name="name" placeholder="Enter your name">


<!-- ❌ WRONG: role="textbox" on a <p> element -->
<p role="textbox">Some editable text</p>

<!-- ✅ FIX C: If you need an editable region, use contenteditable + the permitted role -->
<!-- role="textbox" IS permitted on elements with contenteditable, like a <div> -->
<div role="textbox"
     contenteditable="true"
     aria-multiline="false"
     aria-label="Your name">
</div>

Add a visible or programmatic accessible name to every dialog element so screen readers can announce what the dialog is about when it opens.

On Wix Studio

1. In Wix Studio, enable Dev Mode from the top toolbar.
2. Select the panel, popup, or lightbox component that acts as a dialog.
3. In the Properties & Events panel, check whether an aria-label field is available directly on the component (Wix Studio is expanding native ARIA support — check the latest release notes).
4. If no native field exists, use the page's JavaScript code panel to target the rendered dialog element after it opens and set aria-label or aria-labelledby programmatically, similar to the Velo approach for standard Wix.
5. Test using axe DevTools in your browser while previewing the published or staged site.

<!-- Preferred: point to the dialog's own heading -->
<div role="dialog" aria-modal="true" aria-labelledby="cart-dialog-title">
  <h2 id="cart-dialog-title">Shopping Cart</h2>
  <p>You have 3 items in your cart.</p>
  <button type="button">Close</button>
</div>

<!-- Alternative: use aria-label when there is no visible heading -->
<div role="dialog" aria-modal="true" aria-label="Shopping Cart">
  <p>You have 3 items in your cart.</p>
  <button type="button">Close</button>
</div>

Remove `aria-hidden="true"` from any element that contains focusable children (links, buttons, inputs), or remove those focusable children from the keyboard tab order so they cannot receive focus while hidden from assistive technology.

On Wix Studio

1. Open Wix Studio editor and navigate to the page with the issue.
2. Use the Velo IDE (Dev Mode) to access the page's JavaScript. Add an onReady handler that finds the hidden container and sets tabindex='-1' on its focusable children when it is in the aria-hidden state.
3. For custom-coded panels or menus built with Wix Studio's layout tools, locate the component's show/hide logic and update it to toggle both aria-hidden and tabindex='-1' together.
4. Publish the site and verify with axe DevTools in Chrome.

Add a descriptive accessible name (aria-label, aria-labelledby, or a visible <label>) to every ARIA input field so assistive technologies can identify it.

On Wix Studio

1. Open Wix Studio and select the page containing the unlabeled input.
2. Click the input element, then open the Properties & Events panel on the right. Look for the 'Accessibility' section and fill in the 'ARIA label' field with a descriptive name.
3. For Wix Studio's native form widgets, ensure the 'Label' field is populated in the component settings — Studio auto-generates the accessible name from the visible label text.
4. For custom-coded components using Velo, add $w('#elementId').accessibility.ariaLabel = 'Your label'; in the relevant page or site code.
5. Publish and verify with axe DevTools.

<label for="customer-email">Email address</label>
<input type="email" id="customer-email" name="email" autocomplete="email">

Add a descriptive accessible name (via aria-label, aria-labelledby, or a visible <label>) to every element with role="meter" so screen readers can announce what the meter represents.

On Wix Studio

1. Open the project in Wix Studio and select the meter component.
2. In the Properties panel, look for the Accessibility section and set the Aria Label field to a descriptive string (e.g., 'Average customer rating').
3. If editing via code (Velo), open the element's properties in the Code panel and set element.accessibility.ariaLabel = 'Average customer rating';
4. For custom HTML widgets, embed a <meter> element with full ARIA attributes via the HTML Component and set aria-label there.
5. Use the built-in Preview mode and the axe DevTools browser extension to confirm the label is announced correctly.

<!-- Option A: aria-label directly on the element -->
<meter
  role="meter"
  aria-label="Average customer rating"
  aria-valuenow="3.8"
  aria-valuemin="0"
  aria-valuemax="5"
  value="3.8"
  min="0"
  max="5">
  3.8 out of 5
</meter>

<!-- Option B: aria-labelledby pointing to an existing visible element -->
<h3 id="rating-heading">Average customer rating</h3>
<meter
  role="meter"
  aria-labelledby="rating-heading"
  aria-valuenow="3.8"
  aria-valuemin="0"
  aria-valuemax="5"
  value="3.8"
  min="0"
  max="5">
  3.8 out of 5
</meter>

<!-- Option C: visually hidden label for div-based meters -->
<span id="stock-label" class="visually-hidden">Items remaining in stock</span>
<div
  role="meter"
  aria-labelledby="stock-label"
  aria-valuenow="4"
  aria-valuemin="0"
  aria-valuemax="20">
</div>

<!-- CSS for visually-hidden helper class -->
<style>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

Add the required child ARIA roles (e.g. `role="option"` inside `role="listbox"`, or `role="group"`/`role="option"` inside `role="combobox"`) so every composite ARIA widget contains the child roles the ARIA specification demands.

On Wix Studio

1. In Wix Studio, open the page containing the broken widget in the editor.
2. If the widget is a custom component, open the Components panel, select the component, and use the Dev Mode panel to add or correct ARIA attributes via JavaScript (same Velo API as standard Wix).
3. For Studio-native 'blocks' that output incorrect ARIA, use the Settings → Accessibility panel (where available) or file a bug with Wix Studio support.
4. For full control, insert a Custom Embed block containing hand-authored HTML with the correct role hierarchy.
5. Verify with axe DevTools after publishing.

Wrap every ARIA role that requires a parent container (e.g. `menuitem`, `option`, `listitem`) inside the correct parent element carrying the matching ARIA role (e.g. `menu`/`menubar`, `listbox`, `list`).

On Wix Studio

1. In Wix Studio, select the affected component on the canvas.
2. Open the Properties & Events panel and look for ARIA/Accessibility attribute fields to set the parent role directly.
3. If no direct ARIA attribute field is available, open the Custom Code editor (Site → Settings → Custom Code) and add a JavaScript snippet that wraps the orphaned child elements in a correctly-roled parent element after DOM load.
4. Use the HTML Embed or Custom Element feature to rebuild the component with fully correct ARIA structure if the issue is in a custom-built widget.
5. Publish and verify with the axe browser extension.

<!-- INCORRECT: menuitem with no required parent -->
<nav>
  <a href="/shop" role="menuitem">Shop</a>
  <a href="/about" role="menuitem">About</a>
  <a href="/contact" role="menuitem">Contact</a>
</nav>

<!-- CORRECT: menuitem children wrapped in role="menubar" -->
<nav>
  <ul role="menubar">
    <li role="none"><a href="/shop" role="menuitem">Shop</a></li>
    <li role="none"><a href="/about" role="menuitem">About</a></li>
    <li role="none"><a href="/contact" role="menuitem">Contact</a></li>
  </ul>
</nav>

<!-- CORRECT: option children wrapped in role="listbox" -->
<div role="listbox" aria-label="Select a size">
  <div role="option" aria-selected="false">Small</div>
  <div role="option" aria-selected="true">Medium</div>
  <div role="option" aria-selected="false">Large</div>
</div>

<!-- CORRECT: tab children wrapped in role="tablist" -->
<div role="tablist" aria-label="Product details">
  <button role="tab" aria-selected="true" aria-controls="panel-desc">Description</button>
  <button role="tab" aria-selected="false" aria-controls="panel-reviews">Reviews</button>
</div>
<div id="panel-desc" role="tabpanel">Description content here.</div>
<div id="panel-reviews" role="tabpanel" hidden>Reviews content here.</div>

Audit every ARIA attribute on your pages and correct any that have invalid or mismatched values so assistive technologies can interpret them correctly.

On Wix Studio

1. Open Wix Studio and navigate to the page with the failing element.
2. Select the element on the canvas, then open its Accessibility Settings panel to review and correct any label or description values that map to ARIA attributes.
3. For custom code using Velo, open the Code panel for the page or site, find the relevant $w() call where the ARIA attribute is set, and correct the value.
4. Publish and verify with the axe browser extension.

<!-- WRONG: aria-expanded with a number instead of boolean string -->
<button aria-expanded="1">Menu</button>

<!-- CORRECT: must be exactly the string "true" or "false" -->
<button aria-expanded="false">Menu</button>

<!-- WRONG: aria-describedby pointing to an ID that doesn't exist -->
<input type="email" aria-describedby="email-hint" />
<!-- (no element with id="email-hint" on the page) -->

<!-- CORRECT: the referenced element must exist in the DOM -->
<input type="email" aria-describedby="email-hint" />
<p id="email-hint">We'll never share your email with anyone.</p>

<!-- WRONG: aria-checked with a non-standard value -->
<div role="checkbox" aria-checked="yes">Subscribe</div>

<!-- CORRECT: aria-checked accepts "true", "false", or "mixed" -->
<div role="checkbox" aria-checked="false">Subscribe</div>

<!-- WRONG: aria-hidden with an invalid value -->
<span aria-hidden="hidden">decorative icon</span>

<!-- CORRECT: aria-hidden accepts only "true" or "false" -->
<span aria-hidden="true">decorative icon</span>

Add valid `autocomplete` attribute values to every form field that collects personal information, using the exact tokens specified by the HTML standard.

On Wix Studio

1. Open Wix Studio Editor for your site and enable Dev Mode (toggle in the top bar).
2. Select the input element in the canvas or locate it in the Layers panel.
3. In the Properties & Events panel on the right, switch to the Code tab; you can set element attributes programmatically using $w('#inputId').setAttribute('autocomplete', 'given-name') in the page's code file.
4. Alternatively, open the relevant page's code file (Page Code panel at the bottom) and add $w.onReady(function(){ $w('#firstNameInput').setAttribute('autocomplete','given-name'); }); for each field.
5. Preview the page and test autofill in the browser.

<!-- Name fields -->
<input type="text" name="fname" autocomplete="given-name" />
<input type="text" name="lname" autocomplete="family-name" />
<input type="text" name="fullname" autocomplete="name" />

<!-- Contact fields -->
<input type="email" name="email" autocomplete="email" />
<input type="tel" name="phone" autocomplete="tel" />

<!-- Address fields (shipping) -->
<input type="text" name="address1" autocomplete="shipping address-line1" />
<input type="text" name="address2" autocomplete="shipping address-line2" />
<input type="text" name="city" autocomplete="shipping address-level2" />
<input type="text" name="state" autocomplete="shipping address-level1" />
<input type="text" name="zip" autocomplete="shipping postal-code" />
<select name="country" autocomplete="shipping country"></select>

<!-- Address fields (billing) -->
<input type="text" name="billing_address1" autocomplete="billing address-line1" />
<input type="text" name="billing_zip" autocomplete="billing postal-code" />

<!-- Payment fields -->
<input type="text" name="ccname" autocomplete="cc-name" />
<input type="text" name="ccnumber" autocomplete="cc-number" />
<input type="text" name="ccexp" autocomplete="cc-exp" />
<input type="text" name="cvc" autocomplete="cc-csc" />

<!-- Account fields -->
<input type="email" name="login_email" autocomplete="email" />
<input type="password" name="current_pass" autocomplete="current-password" />
<input type="password" name="new_pass" autocomplete="new-password" />
<input type="text" name="otp" autocomplete="one-time-code" />

Add a descriptive, screen-reader-accessible name to every button on your site so assistive technology users know what each button does.

On Wix Studio

1. Open your project in Wix Studio. Select the button component on the canvas.
2. In the Properties panel on the right, look for the 'Accessibility' section and enter a descriptive label in the 'ARIA Label' field.
3. If editing a custom-coded section, open the code panel and add aria-label="Descriptive name" directly in the JSX or HTML of the component.
4. Use Velo (the Wix dev environment) for dynamic buttons: e.g. $w('#myButton').setAttribute('aria-label', 'Open cart');
5. Publish and validate with the axe browser extension.

<!-- PATTERN 1: Icon-only button — add aria-label directly on the button -->
<button type="button" aria-label="Open search">
  <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24">
    <path d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"
          stroke="currentColor" stroke-width="2" fill="none"/>
  </svg>
</button>

<!-- PATTERN 2: Button with an <img> icon — give the img a descriptive alt -->
<button type="button">
  <img src="/icons/cart.svg" alt="View shopping cart" width="24" height="24">
</button>

<!-- PATTERN 3: Button labelled by visible text elsewhere on the page -->
<h2 id="newsletter-heading">Subscribe to our newsletter</h2>
<!-- ... form fields ... -->
<button type="submit" aria-labelledby="newsletter-heading">Subscribe</button>

<!-- PATTERN 4: Visible text button — just ensure the text is real HTML text -->
<button type="button">Add to Cart</button>

<!-- PATTERN 5: Quantity stepper buttons -->
<button type="button" aria-label="Decrease quantity">−</button>
<input type="number" value="1" aria-label="Product quantity">
<button type="button" aria-label="Increase quantity">+</button>

Increase the contrast ratio between your text color and its background color to meet the WCAG 4.5:1 minimum, so all users — including those with low vision — can read your content clearly.

On Wix Studio

1. In Wix Studio editor, click the text element → Text Settings → change the color using the hex picker to an accessible value.
2. To change globally, open the Design panel → Color Palette and update the relevant palette swatch to a darker accessible color — this updates all text using that swatch site-wide.
3. Publish the site.

/* BEFORE (fails WCAG 1.4.3 — ratio 4.47:1 on white) */
.secondary-text {
  color: #777777;
}

/* AFTER (passes WCAG 1.4.3 — ratio ~7.0:1 on white) */
.secondary-text {
  color: #595959;
}

Ensure every `<dl>` (definition list) element contains only properly nested `<dt>` and `<dd>` children, with no stray text, divs, or other elements placed directly inside it.

On Wix Studio

1. Open Wix Studio and enable Dev Mode (toggle in the top bar).
2. In the Pages & Panels sidebar, locate the page or section containing the malformed `<dl>` and open its code.
3. Correct the HTML/JSX structure in the custom code block, ensuring only `<dt>`, `<dd>`, or wrapping `<div>` elements are direct children of `<dl>`.
4. Publish the site and verify with the axe browser extension.

<!-- ✅ CORRECT: only <dt> and <dd> as direct children -->
<dl>
  <dt>Material</dt>
  <dd>100% Organic Cotton</dd>

  <dt>Weight</dt>
  <dd>180 GSM</dd>

  <dt>Care Instructions</dt>
  <dd>Machine wash cold</dd>
  <dd>Tumble dry low</dd>
</dl>

<!-- ✅ ALSO CORRECT: <div> wrappers for layout/styling -->
<dl>
  <div>
    <dt>Material</dt>
    <dd>100% Organic Cotton</dd>
  </div>
  <div>
    <dt>Weight</dt>
    <dd>180 GSM</dd>
  </div>
</dl>

<!-- ❌ WRONG: stray <p>, <span>, or plain text directly inside <dl> -->
<!-- <dl>
  <p>Product Details</p>
  <dt>Material</dt>
  <dd>Cotton</dd>
</dl> -->

Add a descriptive, non-empty `<title>` element to every page so browsers, screen readers, and search engines can identify it.

On Wix Studio

1. In Wix Studio, open the site and select a page from the Pages & Menus panel.
2. Click the SEO icon (or Page Settings → SEO tab).
3. Enter a descriptive title in the 'Title tag' field.
4. For CMS/collection pages, switch to the 'Dynamic' tab and use field variables (e.g. `{Title} | My Store`) to auto-populate titles.
5. Publish the site and verify the title appears in the browser tab.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Women's Running Shoes – Acme Sports</title>
</head>
<body>
  <!-- page content -->
</body>
</html>

Find every empty heading tag on your store and add visible, descriptive text (or remove the tag entirely) so screen readers and search engines can interpret your page structure.

On Wix Studio

1. In Wix Studio, open the relevant page and open the Layers panel from the left toolbar to see every element, including hidden ones.
2. Identify any Text elements set to Heading style (H1–H6) that contain no text. Click each and either add descriptive text or delete the element.
3. For component/section templates reused across pages, edit the base component and fix the heading there so the fix propagates everywhere it is used.
4. Use the built-in Accessibility Wizard (Site → Accessibility Wizard) to surface and step through remaining issues, then republish.

<!-- ❌ WRONG: empty heading — announced as 'heading' with no label -->
<h2></h2>

<!-- ✅ CORRECT option 1: add visible, descriptive text -->
<h2>Featured Products</h2>

<!-- ✅ CORRECT option 2: visually-hidden text (visible to screen readers, hidden on screen) -->
<!-- Add this CSS once in your stylesheet: -->
<!--
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
-->
<h2><span class="sr-only">Featured Products</span></h2>

<!-- ✅ CORRECT option 3: aria-label when removing the tag is not possible -->
<h2 aria-label="Featured Products"></h2>

<!-- ✅ CORRECT option 4: not a heading at all — use a div instead -->
<div class="decorative-divider"></div>

Add visible or screen-reader-accessible text to every empty `<th>` table header cell so assistive technology users can understand what each column or row represents.

On Wix Studio

1. In Wix Studio, select the Table or Data Grid component on the canvas.
2. Click the component settings (gear icon) and locate each column's 'Header Label' or 'Title' field — fill in any that are blank.
3. For custom-coded sections using Velo (Wix Dev Mode), open the relevant page or component .jsx file in the Velo IDE and add `aria-label` or text content to any empty `<th>` elements in the JSX.
4. Publish and test with axe DevTools.

<!-- OPTION 1: Add visible text (best for most cases) -->
<table>
  <thead>
    <tr>
      <th>Feature</th>
      <th>Basic Plan</th>
      <th>Pro Plan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Storage</td>
      <td>5 GB</td>
      <td>50 GB</td>
    </tr>
  </tbody>
</table>

<!-- OPTION 2: Visually hidden text (for top-left corner cells) -->
<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>
<table>
  <thead>
    <tr>
      <th><span class="sr-only">Feature name</span></th>
      <th>Basic Plan</th>
      <th>Pro Plan</th>
    </tr>
  </thead>
</table>

<!-- OPTION 3: aria-label directly on the th element -->
<table>
  <thead>
    <tr>
      <th aria-label="Feature name"></th>
      <th>Basic Plan</th>
      <th>Pro Plan</th>
    </tr>
  </thead>
</table>

Restructure your page headings so they follow a logical, sequential order (H1 → H2 → H3) with no levels skipped.

On Wix Studio

1. Open Wix Studio and select the page to edit from the Pages & Menus panel.
2. Click each text element used as a heading; in the text-formatting toolbar, open the text-style dropdown and select the correct heading level (Heading 1 through Heading 6) based on the element's role in the content hierarchy.
3. For section or widget components, double-click into the component to edit it and update the heading level on any title text elements inside.
4. Publish the site and verify with the axe DevTools browser extension.

<!-- ONE H1 per page: the primary page title -->
<h1>Women's Running Shoes</h1>

<!-- H2 for major page sections -->
<h2>Filter by Category</h2>

  <!-- H3 for sub-sections within an H2 -->
  <h3>Shoe Type</h3>
  <h3>Brand</h3>

<h2>Featured Products</h2>

  <!-- H3 for individual product titles within the H2 section -->
  <h3>UltraRun Pro 5</h3>
  <h3>TrailBlaze X2</h3>

<h2>Customer Reviews</h2>

  <h3>Top Rated This Month</h3>

    <!-- H4 for sub-items within an H3 — only go deeper when content genuinely nests -->
    <h4>Review by Sarah M.</h4>
    <h4>Review by James T.</h4>

Add a valid `lang` attribute to the `<html>` element so browsers, screen readers, and search engines know what language your page is written in.

On Wix Studio

1. In Wix Studio, navigate to the site's Settings panel and set the primary language under Language & Region.
2. Wix Studio injects the `lang` attribute automatically based on this setting.
3. For multilingual sites, use the built-in Multilingual tool to ensure each locale gets the correct `lang` value.
4. Verify with View Source after publishing.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Your Page Title</title>
</head>
<body>
  <!-- page content -->
</body>
</html>

Add a valid BCP 47 language code to the `lang` attribute on your site's `<html>` element so browsers and assistive technologies know what language your content is written in.

On Wix Studio

1. In Wix Studio, the `lang` attribute is controlled by the site's language settings, not directly editable in the canvas.
2. Open your site in Wix Studio → click the Site Settings (gear icon) → Language & Region, and confirm the primary language is set correctly.
3. For multilingual sites, use the Wix Multilingual panel to ensure each language has a valid locale assigned.
4. Publish the site and verify via page source. If the attribute is still invalid, escalate to Wix Studio support.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

Add descriptive alt text to every meaningful image, and mark purely decorative images with an empty alt attribute or role="presentation".

On Wix Studio

1. Click an image on the canvas → click the 'Settings' icon in the floating toolbar → locate the 'Alt Text' field → enter a descriptive value → click Done.
2. For images inside repeaters or CMS-connected galleries, connect the alt text field to a CMS text field: click the image → Connect to Data → map the 'Alt Text' property to the appropriate CMS field.
3. Use Wix Studio's built-in SEO panel (Site → SEO → SEO Settings) to review pages with missing image alt attributes.

<!-- Meaningful image: describe the content -->
<img src="red-leather-bag.jpg" alt="Red leather crossbody bag with gold clasp" width="600" height="400">

<!-- Image used as a link: describe the destination/action -->
<a href="/sale">
  <img src="summer-sale-banner.jpg" alt="Shop our summer sale — up to 40% off">
</a>

<!-- Decorative image: empty alt, screen readers skip it -->
<img src="decorative-swoosh.svg" alt="" role="presentation">

<!-- WRONG — never omit alt entirely on an <img> -->
<!-- <img src="product.jpg"> -->

<!-- WRONG — never use filename or generic words -->
<!-- <img src="IMG_4821.jpg" alt="image"> -->

Remove or clear the alt text on images whose description is already provided by visible text immediately surrounding them, so screen readers don't read the same information twice.

On Wix Studio

1. In Wix Studio, click the image element on the canvas → open the Properties panel on the right → find 'Alt Text' and clear the field if surrounding text duplicates it.
2. For images inside CMS-connected repeaters or collections: go to the Content Manager → select the relevant collection → find the image field's associated alt-text field and clear redundant entries.
3. Publish the site and re-test with axe DevTools browser extension to confirm the fix.

<!-- CORRECT: image inside a link that also has visible text -->
<a href="/products/red-sneakers">
  <img src="red-sneakers.jpg" alt="" width="300" height="300">
  <span>Red Sneakers</span>
</a>

<!-- INCORRECT: alt repeats the visible link text -->
<a href="/products/red-sneakers">
  <img src="red-sneakers.jpg" alt="Red Sneakers" width="300" height="300">
  <span>Red Sneakers</span>
</a>

<!-- INCORRECT: alt attribute missing entirely (screen reader reads filename) -->
<a href="/products/red-sneakers">
  <img src="red-sneakers.jpg" width="300" height="300">
  <span>Red Sneakers</span>
</a>

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

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.

<!-- Method 1: Explicit label (recommended) -->
<label for="user-email">Email address</label>
<input type="email" id="user-email" name="email" autocomplete="email">

<!-- Method 2: Implicit (wrapped) label -->
<label>
  Email address
  <input type="email" name="email" autocomplete="email">
</label>

<!-- Method 3: aria-label (use when no visible label is desired, e.g. icon-only search) -->
<input type="search" name="q" aria-label="Search products">

<!-- Method 4: aria-labelledby (point to existing visible text on the page) -->
<h2 id="newsletter-heading">Subscribe to our newsletter</h2>
<input type="email" name="subscribe" aria-labelledby="newsletter-heading">

<!-- Visually hidden label (visible to screen readers, hidden on screen) -->
<style>
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>
<label for="search-input" class="visually-hidden">Search products</label>
<input type="search" id="search-input" name="q" placeholder="Search...">

Move your site's `<header>` element (or `role="banner"` landmark) so it is a direct child of `<body>`, not nested inside another landmark region.

On Wix Studio

1. In Wix Studio, open the Editor and select your Header section.
2. In the panel on the right, verify the semantic tag is set to 'Header' (not duplicated inside a Section or Article element).
3. Ensure no parent container of the header has a conflicting ARIA landmark role applied via the Element Settings panel.
4. Publish and test the live site with axe DevTools.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Store</title>
</head>
<body>

  <!-- CORRECT: <header> is a direct child of <body> -->
  <header>
    <a href="/"><img src="/logo.svg" alt="My Store home"></a>
    <nav aria-label="Primary">
      <ul>
        <li><a href="/shop">Shop</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main id="main-content">
    <!-- page content here -->
  </main>

  <footer>
    <!-- footer content here -->
  </footer>

</body>
</html>

Move your site's footer element (or role="contentinfo") so it is a direct child of the page body, not nested inside another landmark region.

On Wix Studio

1. In Wix Studio, open your site and navigate to the page layout.
2. Ensure the Footer section is placed in the designated Footer slot of the layout (not embedded inside a Main Content or Section block).
3. If you have custom HTML components or Velo-injected markup with role="contentinfo", open the code editor and verify that markup is rendered as a sibling of <main>, not a descendant.
4. Publish your site, then run axe DevTools on the live URL to confirm the landmark is top-level.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Store Page</title>
</head>
<body>

  <header>
    <!-- Site logo, main navigation -->
  </header>

  <nav aria-label="Main navigation">
    <!-- Primary nav links -->
  </nav>

  <main>
    <!-- All primary page content goes here -->
    <h1>Page Title</h1>
    <p>Page content...</p>
  </main>

  <!-- CORRECT: <footer> is a direct child of <body>, after </main> -->
  <footer>
    <p>&copy; 2024 My Store. All rights reserved.</p>
    <nav aria-label="Footer navigation">
      <a href="/privacy">Privacy Policy</a>
      <a href="/contact">Contact</a>
    </nav>
  </footer>

</body>
</html>

Move the `<main>` element (or `role="main"`) so it is a direct child of `<body>`, not nested inside any other landmark element such as `<header>`, `<nav>`, `<aside>`, or `<footer>`.

On Wix Studio

1. Wix Studio also generates its landmark HTML automatically. Open the Studio Editor and verify that content sections are correctly categorized as body content (not placed inside the Header or Footer panels).
2. Use the built-in Accessibility panel (available under the site settings / SEO & Accessibility tab) to review landmark warnings.
3. For custom-coded widgets or sections using Velo, ensure you do not apply `role='banner'`, `role='navigation'`, or other landmark roles to containers that wrap your main content block.
4. Escalate persistent issues to Wix Studio support referencing the specific WCAG landmark nesting requirement.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Store</title>
</head>
<body>

  <header>
    <nav aria-label="Primary navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/shop">Shop</a></li>
      </ul>
    </nav>
  </header>

  <!-- CORRECT: <main> is a direct child of <body>, NOT inside <header> or any other landmark -->
  <main id="main-content">
    <h1>Welcome to My Store</h1>
    <p>Browse our latest products below.</p>
  </main>

  <footer>
    <p>&copy; 2024 My Store</p>
  </footer>

</body>
</html>

Ensure your page has only one banner landmark (one `<header>` or `role="banner"` element that is not nested inside another landmark), so screen reader users can navigate your site reliably.

On Wix Studio

1. Open your site in Wix Studio Editor.
2. In the Layers panel (left sidebar), expand the page structure and identify the official 'Header' section at the top.
3. Select each other section/container → open its Settings panel → check the 'Accessibility' or 'ARIA role' field. If any non-header section has role='banner', clear that field.
4. Ensure announcement bars or promotional strips use role='region' with an aria-label, or no landmark role at all.
5. Publish and validate with the axe DevTools browser extension.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Store Page</title>
</head>
<body>

  <!-- CORRECT: Single top-level <header> = one banner landmark -->
  <header>
    <a href="/"><img src="logo.svg" alt="Acme Store"></a>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="/shop">Shop</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <!-- CORRECT: <header> nested inside <article> is NOT a banner landmark -->
      <header>
        <h1>Product Name</h1>
        <p>Posted: <time datetime="2024-01-01">January 1, 2024</time></p>
      </header>
      <p>Product description goes here.</p>
    </article>

    <!-- CORRECT: promotional strip uses <div>, not <header> -->
    <div class="promo-bar" role="region" aria-label="Promotional offer">
      <p>Free shipping on orders over $50!</p>
    </div>
  </main>

  <footer>
    <p>&copy; 2024 Acme Store</p>
  </footer>

</body>
</html>

Find and remove every duplicate `<main>` element or `role="main"` attribute so that exactly one main landmark exists on each page.

On Wix Studio

1. Open Wix Studio Editor and navigate to the page in question.
2. Select any custom-coded components or HTML embed elements and inspect their markup for '<main>' or 'role="main"'; replace with '<div>' or '<section>'.
3. In the panel for any Velo/custom code blocks, search for 'role="main"' and remove duplicates.
4. Publish the site and validate with the axe browser extension.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>

  <header>
    <nav aria-label="Primary navigation">
      <!-- site-wide navigation -->
    </nav>
  </header>

  <!-- ✅ Only ONE <main> element per page -->
  <main id="main-content">
    <h1>Page Heading</h1>
    <!-- primary page content goes here -->
  </main>

  <footer>
    <!-- footer content -->
  </footer>

</body>
</html>

Add a single `<main>` landmark element (or `role="main"`) to every page so assistive technologies can identify and navigate directly to the primary content.

On Wix Studio

1. In Wix Studio's editor, select the main content section of your page in the layers panel.
2. In the right-hand Properties / Settings panel, look for the 'Element Tag' or 'HTML Tag' dropdown and select `<main>`.
3. Alternatively, use the Accessibility panel (the person icon in the left toolbar) to run an audit and apply the landmark fix through the guided wizard.
4. Publish the site and re-test with axe DevTools.

<!-- Skip link at the very top of <body> -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<header><!-- site header / nav here --></header>

<main id="main-content">
  <!-- ALL primary page content goes here:
       product details, blog post, category grid, etc. -->
</main>

<footer><!-- site footer here --></footer>

Add a unique aria-label (or aria-labelledby) to every repeated landmark role on the page so screen-reader users can tell them apart.

On Wix Studio

1. Open your site in Wix Studio.
2. Select the repeated navigation or section element on the canvas.
3. In the right-side Properties panel, locate the 'Accessibility' section and expand it.
4. Type a unique descriptive label in the 'ARIA Label' field (e.g. 'Primary navigation', 'Category navigation', 'Footer navigation').
5. Repeat for each duplicate landmark element across the page.
6. Publish and validate using the axe DevTools browser extension on the live URL.

<!-- BEFORE: two <nav> elements with no label — screen readers can't tell them apart -->
<nav>
  <ul><!-- main menu items --></ul>
</nav>

<nav>
  <ul><!-- footer links --></ul>
</nav>

<!-- AFTER: each <nav> has a unique aria-label -->
<nav aria-label="Main navigation">
  <ul><!-- main menu items --></ul>
</nav>

<nav aria-label="Footer navigation">
  <ul><!-- footer links --></ul>
</nav>

<!-- Alternative: use aria-labelledby when a visible heading already exists -->
<section aria-labelledby="filters-heading">
  <h2 id="filters-heading">Product Filters</h2>
  <!-- filter controls -->
</section>

<section aria-labelledby="recommendations-heading">
  <h2 id="recommendations-heading">You May Also Like</h2>
  <!-- recommended products -->
</section>

Increase the color contrast between inline links and their surrounding body text to at least 3:1, or add a non-color visual distinction (such as underline) so links are identifiable without relying on color alone.

On Wix Studio

1. In Wix Studio editor, select any text block containing a link.
2. Open the Text Settings panel → click the link color swatch and update to a compliant hex value.
3. For global control, go to Design System (left panel) → Colors, update your designated link color token to a compliant value — this propagates site-wide.
4. Use the Custom CSS panel (site-level or panel-level) to add: a { text-decoration: underline; } as a fallback non-color cue.

/* Option A: Change link color to one with ≥3:1 contrast against body text
   AND ≥4.5:1 contrast against the page background.
   Example: body text #3f3f3f on white background — #0057d8 passes both thresholds. */
a {
  color: #0057d8;
}

/* Option B: Keep your existing link color but add a non-color visual cue.
   An underline satisfies WCAG 1.4.1 without requiring the 3:1 color contrast. */
a {
  text-decoration: underline;
}

/* Best practice: combine both for maximum clarity */
a {
  color: #0057d8;
  text-decoration: underline;
}

/* If you want to scope this to body/content areas only: */
.content a,
.entry-content a,
article a,
p a {
  color: #0057d8;
  text-decoration: underline;
}

Add a descriptive, screen-reader-accessible text label to every link on your store so assistive technology can announce its purpose.

On Wix Studio

1. In Wix Studio, click any link element (icon, image, button) on the canvas to select it.
2. Open the right-hand Inspector panel and scroll to the 'Accessibility' section.
3. Enter a meaningful description in the 'ARIA Label' field (e.g. 'Go to product page for Blue Running Shoes').
4. For elements embedded in repeaters (e.g. product grids), set the label dynamically using the dataset/content binding — e.g. bind aria-label to the product name field so every card gets a unique, accurate label.
5. Publish and verify with axe DevTools or WAVE.

Remove or disable the `<meta http-equiv="refresh">` tag that forces an automatic page reload, or replace any redirect use-case with a server-side redirect instead.

On Wix Studio

1. Open Wix Studio Editor → select the page → open the Velo panel (enable Dev Mode if not already on).
2. In the page's `<head>` code block or `masterPage.js`, search for `http-equiv` or `refresh` and remove the tag or script.
3. For site-wide head injection, go to Site → Settings → Custom Code and inspect any head code snippets.
4. Use the URL Redirect Manager (Marketing & SEO → SEO Tools → URL Redirect Manager) for any needed redirects.
5. Publish and verify via browser View Source.

<!-- REMOVE — self-refresh every 30 seconds (WCAG fail) -->
<!-- <meta http-equiv="refresh" content="30"> -->

<!-- REMOVE — redirect to another URL after 5 seconds (WCAG fail) -->
<!-- <meta http-equiv="refresh" content="5; url=https://example.com/new-page"> -->

<!-- ALLOWED — 0-second instant redirect (no time limit imposed on user) -->
<!-- Only use this as a fallback alongside a server-side redirect -->
<meta http-equiv="refresh" content="0; url=https://example.com/new-page">

Remove `user-scalable=no` (and any `maximum-scale` below 5) from your site's `<meta name="viewport">` tag so visitors can pinch-to-zoom on mobile devices.

On Wix Studio

1. In Wix Studio, open your site dashboard and navigate to Settings → Custom Code.
2. Check any code injected into the <head> section for a viewport meta tag with `user-scalable=no` — delete that parameter.
3. If the problematic tag is coming from Wix's own generated markup (not your custom code), contact Wix Support, as platform-level HTML cannot be overridden by studio users.

<meta name="viewport" content="width=device-width, initial-scale=1">

Remove or raise the `maximum-scale` value in your meta viewport tag so users can pinch-zoom on mobile devices.

On Wix Studio

1. In Wix Studio, open your project and navigate to Settings → Custom Code.
2. Add a code snippet to the <head> section sitewide that overrides the viewport tag with a zoom-permissive version (see code snippet below).
3. Publish the site for the change to take effect.

<meta name="viewport" content="width=device-width, initial-scale=1">

Remove or restructure nested interactive elements so that no focusable control (button, link, input, etc.) is placed inside another interactive control, and never rely on tabindex="-1" or aria-hidden="true" to hide an inner interactive element from assistive technologies.

On Wix Studio

1. In Wix Studio, select the affected element on the canvas and open its Settings / Interactions panel.
2. If a container (card, section) has an on-click action AND contains a Button element, remove the redundant interaction from whichever wrapper is not the primary CTA.
3. For custom-coded components in Wix Studio's Dev Mode, open the component's JSX/HTML and restructure to place only one interactive element per action.
4. Test with the Studio Preview and keyboard Tab navigation before publishing.

<!-- ❌ WRONG: button nested inside a link (invalid HTML, unpredictable in screen readers) -->
<a href="/products/widget">
  <button type="button">View Product</button>
</a>

<!-- ✅ CORRECT: single interactive element styled as a button -->
<a href="/products/widget" class="btn btn-primary">View Product</a>


<!-- ❌ WRONG: link nested inside a button -->
<button type="button">
  <a href="/cart">Add to Cart</a>
</button>

<!-- ✅ CORRECT: use only the element that matches the action -->
<!-- If it navigates → use <a>; if it performs an action on the page → use <button> -->
<a href="/cart" class="btn btn-primary">Add to Cart</a>


<!-- ❌ WRONG: relying on tabindex or aria-hidden to suppress inner element -->
<a href="/products/widget">
  <button type="button" tabindex="-1" aria-hidden="true">View Product</button>
</a>

<!-- ✅ CORRECT: icons and decorative content inside interactive elements must be non-interactive -->
<button type="button">
  <svg aria-hidden="true" focusable="false" width="20" height="20">
    <use href="#icon-cart"></use>
  </svg>
  <span>Add to Cart</span>
</button>

Add a single, descriptive `<h1>` heading to every page so assistive technologies and search engines can identify the page's main topic.

On Wix Studio

1. Open Wix Studio Editor and go to the page you need to fix.
2. Click the text element acting as the primary page title.
3. In the floating text toolbar, open the style dropdown and select 'Heading 1'.
4. If no H1 text element exists, click '+' → 'Text' → 'Heading 1', place it prominently, and enter the page's main topic as the text.
5. Use the Layers panel to confirm only one element on the page has the H1 tag.
6. Publish and verify with the axe DevTools extension.

<main>
  <h1>Women's Running Shoes</h1>
  <!-- rest of page content -->
</main>

Wrap all visible page content inside HTML landmark regions (e.g. `<header>`, `<main>`, `<nav>`, `<footer>`) so screen-reader users can navigate the page by section.

On Wix Studio

1. In Wix Studio, each canvas Section is mapped to a landmark. Open the Studio Editor and ensure all visible content blocks (text, images, buttons) are placed inside a Section rather than outside all sections at the body level.
2. Select any Section → open the Inspector panel → give the section a descriptive 'Aria Label' so it is announced correctly by screen readers.
3. Use the Accessibility panel (Help → Accessibility Checker) to detect any remaining orphaned content.
4. For custom-coded panels or components (using Velo/Dev Mode), manually add `role` and `aria-label` attributes in your JavaScript or HTML component code.

Add a meaningful aria-label (or aria-labelledby) to every element with role="img" so screen readers can announce what the image represents.

On Wix Studio

1. In Wix Studio, select the flagged element on the canvas.
2. Open the Settings panel on the right → scroll to the 'Accessibility' section.
3. Enter a descriptive label in the 'ARIA Label' field.
4. For custom components or HTML embeds, edit the embed code directly and add aria-label="[description]" to the role="img" element.
5. Use the Velo IDE (Dev Mode) for programmatic access: $w('#myIcon').setAttribute('aria-label', 'Description');
6. Publish and validate with axe DevTools.

<!-- Pattern 1: Inline element (icon font, emoji, span) -->
<span role="img" aria-label="Free shipping available">🚚</span>

<!-- Pattern 2: SVG element — use <title> + aria-labelledby (most robust) -->
<svg role="img" aria-labelledby="icon-free-shipping" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
  <title id="icon-free-shipping">Free shipping available</title>
  <use href="#icon-truck"></use>
</svg>

<!-- Pattern 3: SVG with aria-label only (simpler, slightly less support) -->
<svg role="img" aria-label="4.5 out of 5 stars" width="120" height="24" xmlns="http://www.w3.org/2000/svg">
  <!-- star paths here -->
</svg>

<!-- Pattern 4: div/section used as a decorative image — HIDE from screen readers -->
<div role="presentation" aria-hidden="true" class="decorative-banner"></div>

<!-- Pattern 5: referencing an existing visible caption -->
<figure>
  <div role="img" aria-labelledby="badge-caption" class="trust-badge"></div>
  <figcaption id="badge-caption">Verified Secure Checkout</figcaption>
</figure>

Add a visible or programmatic label to every `<select>` dropdown so assistive technologies can announce its purpose to users.

On Wix Studio

1. Open Wix Studio and navigate to the page with the dropdown. Click the dropdown component.
2. In the right-hand Properties panel, ensure the 'Label' field is populated with descriptive text. Toggle label visibility on if it is currently hidden.
3. For custom widgets or code components, open the Velo code editor and use: $w('#dropdownId').setAttribute('aria-label', 'Descriptive label text here');
4. Publish and verify with the axe DevTools browser extension.

<!-- Method 1: Visible label (preferred) -->
<label for="sort-order">Sort by</label>
<select id="sort-order" name="sort">
  <option value="price-asc">Price: Low to High</option>
  <option value="price-desc">Price: High to Low</option>
  <option value="newest">Newest</option>
</select>

<!-- Method 2: Visually hidden label (when visible label breaks design) -->
<style>
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>
<label for="sort-order" class="visually-hidden">Sort by</label>
<select id="sort-order" name="sort">
  <option value="price-asc">Price: Low to High</option>
  <option value="price-desc">Price: High to Low</option>
  <option value="newest">Newest</option>
</select>

<!-- Method 3: aria-label (last resort, no visible label possible) -->
<select aria-label="Sort by" name="sort">
  <option value="price-asc">Price: Low to High</option>
  <option value="price-desc">Price: High to Low</option>
  <option value="newest">Newest</option>
</select>

<!-- Method 4: Wrapping label (implicit association — no for/id needed) -->
<label>
  Sort by
  <select name="sort">
    <option value="price-asc">Price: Low to High</option>
    <option value="price-desc">Price: High to Low</option>
    <option value="newest">Newest</option>
  </select>
</label>

Add a valid, focusable target element (with a matching `id`) for every "Skip to main content" link so keyboard and assistive-technology users can bypass repeated navigation.

On Wix Studio

1. In Wix Studio, open the Master Page in the editor.
2. Add a text/button element as the absolute first item in the page structure (Layer panel), label it 'Skip to main content', and set its link to a Page Section anchor named `#main-content`.
3. Name the main content section's anchor `main-content` via the section settings panel.
4. Use the Design panel to position the skip link off-screen by default (e.g., top: -9999px) and add a Focus state that brings it back on screen.
5. Test on the published URL using the Tab key.

Remove or replace all positive tabindex values (tabindex="1" or higher) on your page elements, using tabindex="0" for focusable elements and tabindex="-1" only when programmatic focus is needed.

On Wix Studio

1. Open Wix Studio editor and navigate to the page or component with the issue.
2. If the element is inside a Custom Element or HTML Component, click it → 'Edit Code' and remove positive tabindex attributes from the markup.
3. For Velo/Studio code panels, search your page and masterpage code for 'tabindex' and remove any value above 0.
4. If using a Studio block, select the block → 'Edit Block' → inspect the inner HTML widgets for embedded tabindex values.
5. Publish and verify with keyboard-only navigation.

<!-- ❌ WRONG: positive tabindex breaks natural tab order -->
<button tabindex="3">Submit</button>
<a href="/shop" tabindex="1">Shop Now</a>
<div tabindex="2">Custom widget</div>

<!-- ✅ CORRECT: native elements use no tabindex (natural order) -->
<button>Submit</button>
<a href="/shop">Shop Now</a>

<!-- ✅ CORRECT: non-native element made focusable in natural order -->
<div tabindex="0" role="button" aria-label="Custom widget">Custom widget</div>

<!-- ✅ CORRECT: element only focused by JavaScript (e.g., modal), not in tab flow -->
<div tabindex="-1" id="modal-container" role="dialog" aria-modal="true">...</div>

Strengthen your DMARC policy from p=none (monitor-only) to p=quarantine, then p=reject, so that emails fraudulently sent from your domain are blocked rather than silently allowed through.

On Wix Studio

1. Same DNS steps as Wix — Wix Studio sites share the same domain and DNS management interface.
2. Go to the site's Dashboard → Settings → Domains → Manage DNS, locate the _dmarc TXT record, and update p=none to p=quarantine.
3. Verify all client-site sending sources (email marketing integrations, transactional tools) have DKIM and SPF aligned before advancing to p=reject.

v=DMARC1; p=quarantine; sp=quarantine; pct=100; rua=mailto:dmarc-reports@yourdomain.com; ruf=mailto:dmarc-failures@yourdomain.com; ri=86400; aspf=r; adkim=r; fo=1;

Set a valid HTTP Strict-Transport-Security (HSTS) header with a max-age of at least 31536000 (one year) and includeSubDomains to force browsers to always use HTTPS for your store.

On Wix Studio

1. Like standard Wix, Wix Studio manages HTTPS and HSTS at the infrastructure level — no manual header configuration is available in the Studio editor.
2. Confirm HTTPS is forced: Site Settings → SSL → Force HTTPS should be enabled.
3. For custom HTTP logic in Wix Studio, use the Velo backend (http-functions.js) to add headers to API/serverless responses if needed.
4. Use DevTools to verify the Strict-Transport-Security header is present on your live domain.

Strict-Transport-Security: max-age=31536000; includeSubDomains

Increase your HSTS max-age directive to at least 31536000 seconds (1 year) so browsers enforce HTTPS connections for a meaningful period.

On Wix Studio

1. Same infrastructure as Wix — HSTS is set by Wix's CDN and cannot be modified from the Studio editor.
2. Ensure HTTPS redirect is active: Wix Studio Dashboard → Settings → Domains → Redirect all traffic to HTTPS.
3. For custom-code sites or Wix Headless projects built in Wix Studio, handle the header in your own server/hosting environment.
4. Contact Wix Support to report and request an update to the platform-level HSTS max-age value.

Strict-Transport-Security: max-age=31536000; includeSubDomains

Remove or suppress the X-Powered-By HTTP response header so your server stops advertising which technology stack, hosting platform, or software version powers your store.

On Wix Studio

1. Same as Wix above — Wix Studio is hosted infrastructure with no direct server-header control for standard sites.
2. For Wix Studio sites using custom backend code (Velo/backend modules), you cannot set or remove transport-layer headers from within Velo — this is a platform-level concern.
3. Contact Wix support if you believe the platform itself is leaking X-Powered-By.

<!-- X-Powered-By is an HTTP response header set by the server, not in HTML markup.
     Use the server-side code snippets below for your specific platform. -->

Add a Content-Security-Policy (CSP) HTTP response header to every page to block unauthorized scripts, styles, and resources from loading in your visitors' browsers.

On Wix Studio

1. Wix Studio has the same HTTP header limitations as standard Wix.
2. Use the Head Custom Code area (site Settings → Custom Code → Head) to add a <meta http-equiv='Content-Security-Policy'> tag as a partial measure.
3. Route traffic through Cloudflare to set the real HTTP header at the CDN layer.

Add a DMARC DNS TXT record at _dmarc.yourdomain.com to tell receiving mail servers how to handle emails that fail authentication checks for your domain.

On Wix Studio

1. In Wix Studio, open the site project and go to the Site Dashboard → Settings → Domains.
2. Follow the same DNS steps as Wix above — either manage the TXT record in Wix's DNS panel (if the domain is Wix-managed) or log in to your external DNS provider.
3. Add a TXT record: Host = '_dmarc', Value = v=DMARC1; p=none; rua=mailto:dmarc@yourdomain.com
4. Ensure any transactional email (Wix automations, contact forms) is authenticated with SPF/DKIM via Wix's email settings before escalating to p=quarantine.

_dmarc.yourdomain.com. 3600 IN TXT "v=DMARC1; p=none; rua=mailto:dmarc@yourdomain.com; ruf=mailto:dmarc-forensic@yourdomain.com; sp=none; adkim=r; aspf=r"

Add a Permissions-Policy HTTP response header to your store to explicitly restrict which browser features (camera, microphone, geolocation, etc.) pages and embedded third-party scripts are allowed to access.

On Wix Studio

1. Wix Studio currently shares the same infrastructure constraints as standard Wix — custom HTTP response headers are not configurable from the platform admin.
2. Use Cloudflare as a proxy: Rules → Transform Rules → Modify Response Header, add 'Permissions-Policy' with value 'camera=(), microphone=(), geolocation=(), payment=(), usb=(), interest-cohort=()'.
3. Verify in browser DevTools → Network tab → Response Headers.

<!-- NOT recommended — use a real HTTP header instead. Shown for reference only. -->
<meta http-equiv="Permissions-Policy" content="camera=(), microphone=(), geolocation=(), payment=(), usb=(), interest-cohort=()">

Add the Strict-Transport-Security (HSTS) response header to every HTTPS page so browsers always use an encrypted connection to your store.

On Wix Studio

1. Wix Studio sites run on the same Wix infrastructure, so HSTS is managed server-side by Wix — it is not configurable from the Studio editor.
2. Check for the header in browser DevTools → Network → Response Headers on your published site.
3. If absent, contact Wix Support. Alternatively, if a Cloudflare proxy sits in front of your domain, configure HSTS in Cloudflare → SSL/TLS → Edge Certificates → HSTS section.

<!-- HSTS cannot be set via an HTML meta tag. It MUST be sent as an HTTP response header. Use the server-level examples below. -->
<!-- Correct header value -->
<!-- Strict-Transport-Security: max-age=31536000; includeSubDomains -->

Add the `X-Content-Type-Options: nosniff` HTTP response header to every page and asset your store serves.

On Wix Studio

1. Same as Wix above. Wix Studio does not add direct server-header control; use Cloudflare Transform Rules in front of your custom domain for full coverage.

X-Content-Type-Options: nosniff

Add the X-Frame-Options HTTP response header set to DENY or SAMEORIGIN to prevent your store's pages from being embedded in iframes on other sites.

On Wix Studio

1. Wix Studio (formerly Editor X) also does not expose raw HTTP response header controls in the admin UI.
2. Route your Wix Studio domain through Cloudflare: update your domain's nameservers to Cloudflare → in Cloudflare, go to Rules → Transform Rules → Response Header Modification → add X-Frame-Options: SAMEORIGIN for all requests.
3. Alternatively, use Velo (Wix Code) in Wix Studio to add server-side logic where supported.
4. Verify via browser DevTools after Cloudflare rule is active.

X-Frame-Options: SAMEORIGIN

Renew your SSL/TLS certificate before it expires to keep your store secure, trusted, and visible in search results.

On Wix Studio

1. SSL management in Wix Studio is identical to standard Wix — certificates are auto-provisioned per connected domain.
2. Check domain SSL status under Settings → Domains in the Wix Studio dashboard.
3. If SSL is inactive, re-check DNS configuration and click 'Enable SSL'; allow up to 24 hours.

<!-- Place this in your maintenance/holding page only if HTTPS is temporarily unavailable -->
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Replace the weak X-Frame-Options header value with DENY or SAMEORIGIN to prevent clickjacking attacks on your store.

On Wix Studio

1. Same infrastructure constraints as standard Wix — response headers for the core storefront are managed by Wix and cannot be overridden from the Studio editor.
2. For custom backends built with Wix Studio's HTTP functions, you can set headers within those function responses in your http-functions.js file.
3. Contact Wix Studio support for any header corrections needed on primary page responses.

<!-- X-Frame-Options MUST be sent as an HTTP response header, not a meta tag. -->
<!-- Use the server-side or platform snippets below instead. -->

<!-- The modern equivalent you CAN set via meta tag (limited support): -->
<meta http-equiv="Content-Security-Policy" content="frame-ancestors 'none';">

Update your CMS and ecommerce platform to the latest stable version immediately to close known security vulnerabilities and maintain vendor support.

On Wix Studio

1. Wix Studio (the successor to the Wix Editor for professional sites) is SaaS — core platform updates are handled automatically.
2. Manage installed widgets and blocks: in the Studio editor open the Apps panel and check for updates to installed marketplace apps.
3. For custom npm packages used in Velo/Studio code: open the IDE panel > Packages & Apps > npm, review installed packages, and update version numbers to the latest stable release.

<!-- REMOVE or suppress this tag from your <head> — it advertises your CMS version to attackers -->
<!-- <meta name="generator" content="WordPress 5.8.1" /> -->

<!-- In WordPress, add this to your theme's functions.php to remove it: -->
<!-- remove_action('wp_head', 'wp_generator'); -->

Log in to your domain registrar, confirm your domain's expiry date, and enable auto-renew so your store never goes offline due to an expired domain.

On Wix Studio

1. Same domain management location as Wix: account avatar → Domains for Wix-registered domains.
2. For client sites managed in Wix Studio, check each site's domain settings individually under the site dashboard → Domain.

<!-- No HTML change required. Domain renewal is managed at your domain registrar's dashboard (e.g. GoDaddy, Namecheap, Cloudflare Registrar). Log in, find the domain, enable auto-renew, and confirm a valid payment method is on file. -->

Add a lang attribute to your site's <html> tag that matches the primary language of your store's content.

On Wix Studio

1. Wix Studio also manages the <html lang> attribute automatically based on your project's configured language.
2. In the Wix Studio dashboard, go to Settings → Language & Region and confirm the primary language is correct.
3. For multilingual projects, use the Wix Multilingual app; each language route will receive the appropriate lang attribute automatically.
4. Direct HTML tag editing is not available — the platform injects it based on your language settings.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Your Store</title>
</head>
<body>
  <!-- page content -->
</body>
</html>

Ensure every resource (images, scripts, stylesheets, fonts, iframes) on your store is loaded over HTTPS, never HTTP, so browsers never block or warn about mixed content.

On Wix Studio

1. In Wix Studio, open the relevant page or section containing the HTTP resource.
2. Select any HTML/Embed components and update all 'http://' URLs in their code to 'https://'.
3. Open the Velo IDE (Dev panel) and search site code and page code for 'http://' — replace with 'https://'.
4. Publish the site and verify with browser DevTools Console.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Add a responsive viewport meta tag to every page so mobile browsers render your site at the correct width and scale.

On Wix Studio

1. Wix Studio also injects the viewport meta tag automatically for all published sites.
2. Ensure Responsive Design is enabled for your site (Studio sites are responsive by default; check under Site → Settings if in doubt).
3. If custom HTML widgets or embedded iframes are used, check those embeds do not override or suppress the viewport tag in their own `<head>`.
4. Publish and verify with Google's Mobile-Friendly Test.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
</head>
<body>
  <!-- page content -->
</body>
</html>

Remove or suppress HTTP response headers that advertise your server software name and version to the public internet.

On Wix Studio

1. Same approach as Wix above — server headers are infrastructure-managed and not directly editable in the Studio editor.
2. Use Wix Studio's Velo backend ('http-functions.js') for any custom API responses, setting headers explicitly there.
3. Add Cloudflare as a proxy layer and use Transform Rules (Rules → Transform Rules → Modify Response Header → Remove) to strip 'X-Powered-By' and replace 'Server'.

<!-- HTTP response headers cannot be set via HTML meta tags.
     Use the server-side or CDN configuration snippets below. -->

Renew your TLS/SSL certificate before it expires and enable automatic renewal so your store never goes offline or shows security warnings.

On Wix Studio

1. SSL management is identical to standard Wix: auto-provisioned and auto-renewed on all premium plans.
2. Verify status under Dashboard → Settings → Domains for each connected domain.
3. Re-trigger issuance by disconnecting and reconnecting a domain if the certificate shows as expired or inactive.

<!-- SERVER-SIDE redirect is strongly preferred. Example nginx config snippet below. -->
<!-- nginx: force HTTPS -->
<!-- server {
    listen 80;
    server_name example.com www.example.com;
    return 301 https://$host$request_uri;
} -->