When working on a site's accessibility, you may see a setting referred to as focus indicators. These are blue rectangles that appear around interactive elements like buttons and links when visitors us...

Accessibility: About Focus Indicators (Visual Indicators)

Discover how to enhance your site's accessibility by enabling focus indicators in Wix. These blue rectangles help visitors navigate your site using the keyboard, ensuring they know their position on the page. Learn how to check and enable these indicators in the Accessibility Wizard, and ensure all users can easily interact with your site. This feature is automatically enabled on Wix sites, but you can customize its visibility for better user experience.

<div data-component-type="text"><div>When working on a site's accessibility, you may see a setting referred to as focus indicators. These are blue rectangles that appear around interactive elements like buttons and links when visitors use a keyboard to navigate through the live site. </div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/09/24/5392965c-0d96-41fc-b26c-0991fea45819/85b68dd0-01d0-4601-bfdc-b88d6eb68f8a.png" alt="An image of a site with a visual indicator around the menu item named 'Home'." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Where does Wix get its information?</div><div class="info-content"><ul>
  <li>We make recommendations as per the <a data-composite="true" href="https://www.w3.org/TR/WCAG21/#abstract" target="_blank">Web Content Accessibility Guidelines (WCAG) document</a>, which has been developed by the <a data-composite="true" href="https://www.w3.org/" target="_blank">World Wide Web Consortium (W3C)</a>. </li>  <li>This article is based on the <a data-composite="true" href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html" target="_blank">Focus Visible criterion (2.4.7)</a>.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="why-focus-indicators-are-important" level="3">Why focus indicators are important</h2></div><div data-component-type="text"><div>Some visitors navigate sites using the Tab key on their keyboard. Focus indicators display the current position of the Tab key, so visitors know exactly where they are on the page. </div></div><div data-component-type="text"><div>If these indicators are not enabled, site visitors may not be able to navigate the page or site content. Focus indicators are therefore an important part of a site's accessibility. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="focus-indicators-on-your-wix-site" level="3">Focus indicators on your Wix site</h2></div><div data-component-type="text"><div>Focus indicators are automatically enabled on all sites you build with Wix.</div></div><div data-component-type="text"><div>The indicator is designed to fit most site color combinations. However, it is less visible on buttons with a white fill over a blue background. We therefore recommend checking the color of your site elements to ensure that all visitors can see the indicator.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">How can I test the focus indicator on a site?</div><div class="info-content"><div>To check how the focus indicator looks, open your live site or site preview, and navigate the page using your keyboard's Tab key.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="enabling-focus-indicators" level="3">Enabling focus indicators</h2></div><div data-component-type="text"><div>While checking a live Wix Editor site, you may notice that the focus indicator doesn't appear. If you previously disabled focus indicators, you are prompted to and can enable them in the Accessibility Wizard. </div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Working with the Studio Editor or Harmony Editor?</div><div class="info-content"><div>Focus indicators are always enabled on sites you create with the Studio Editor or the Harmony Editor, so you don't need to check this setting. </div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To enable visual indicators:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click <strong>Settings </strong>at the top and select <strong>Accessibility Wizard</strong>.</li>  <li>Click <strong>Scan Site</strong> in the panel on the right side of your editor.</li>  <li>Click the <strong>Detected issues</strong> tab.</li>  <li>Open the <strong>Site level</strong> drop-down and click <strong>Show focus indicators</strong>.</li>  <li>Enable the <strong>Include visual indicators </strong>toggle. </li>  <li>Click <strong>Apply.</strong></li></ol></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>Once you have enabled focus indicators on your Wix Editor site, it is not possible to turn them off.</div></div></div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2025/05/30/e14f55c3-776b-419a-8fea-dbf25cdfbb56/b312085b-1950-49f3-81e5-ac06d1c799e3.png" alt="The cursor is clicking the toggle to enable indicators in the wizard." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Next step:</div><div class="info-content"><div>Go back to the <a data-composite="true" href="https://support.wix.com/en/article/accessibility-checklist-for-improving-your-sites-accessibility" target="">Accessibility Checklist</a> to continue improving the site's accessibility. </div></div></div></div>

&quot;Skip to Main Content&quot; is a feature that allows visitors using additional and / or assistive technologies to bypass irrelevant or repeated content. This is how it appears on a live Wix site:...

Accessibility: About "Skip to Main Content"

Discover how to utilize the "Skip to Main Content" feature on your Wix site to enhance accessibility for visitors using assistive technologies. This feature allows users to bypass repetitive content and access the main page content directly. Learn how to enable it through the Accessibility Wizard, ensuring your site is user-friendly for everyone. By implementing this feature, you contribute to a more inclusive browsing experience.

<div data-component-type="text"><div>&quot;Skip to Main Content&quot; is a feature that allows visitors using additional and / or assistive technologies to bypass irrelevant or repeated content. </div></div><div data-component-type="text"><div>This is how it appears on a live Wix site:</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/09/13/04bd498b-4bcc-471d-9078-111775493073/0d4f6684-5a9a-49f5-9279-b83acfee00b9.png" alt="A live site with the Skip to Main Content button enabled." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Where does Wix get its information?</div><div class="info-content"><ul>
  <li>We make recommendations as per the <a data-composite="true" href="https://www.w3.org/TR/WCAG21/#abstract" target="_blank">Web Content Accessibility Guidelines (WCAG) document</a>, which has been developed by the <a data-composite="true" href="https://www.w3.org/" target="_blank">World Wide Web Consortium (W3C)</a>. </li>  <li>This article is based on <a data-composite="true" href="https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html" target="_blank">success criterion 2.4.1 (Bypass Blocks)</a>.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="why-skip-to-main-content-is-important" level="3">Why Skip to Main Content is important</h2></div><div data-component-type="text"><div>Sighted visitors / visitors using a mouse can locate a page's main content visually, or by scrolling through the site page. However, some site visitors, such as those with visual conditions, may use assistive technologies and / or a keyboard to navigate. </div></div><div data-component-type="text"><div>Skip to Main Content provides these visitors with direct access to the main content of the page, without needing to go through repeated content (e.g. the site title, menu, etc.) first.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="skip-to-main-content-and-wix-sites" level="3">Skip to Main Content and Wix sites</h2></div><div data-component-type="text"><div>Skip to main content is automatically enabled on all sites you build with Wix. It appears as a link when visitors navigate the page using the Tab key.</div></div><div data-component-type="text"><div>The link is designed to fit most site color combinations. However, it may be less visible on site headers / sections that use a white and blue color scheme. We therefore recommend checking the color of these sections to ensure that it stands out to visitors.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">How can I test Skip to Main Content?</div><div class="info-content"><div>To check how the tool works looks, open your live site or site preview, and navigate the page using your keyboard's Tab key.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="enabling-skip-to-main-content" level="3">Enabling Skip to Main Content</h2></div><div data-component-type="text"><div>If you notice the link does not appear on the preview / live version of a Wix Editor site, you can check and enable it from the Accessibility Wizard. </div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Working with the Studio or Harmony Editor?</div><div class="info-content"><div>Skip to Main Content is always enabled on sites you create with these editors, so you don't need to check this setting. </div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To enable Skip to Main Content:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click <strong>Settings </strong>at the top and select <strong>Accessibility Wizard</strong>.</li>  <li>Click <strong>Scan Site</strong> in the panel on the right side of your editor.</li>  <li>Click the <strong>Detected issues</strong> tab.</li>  <li>Open the <strong>Site level</strong> drop-down and click <strong>Add &quot;Skip to Main Content&quot; link</strong>.</li>  <li>Click the <strong>Allow &quot;Skip to Main Content&quot; </strong>toggle.</li>  <li>Click <strong>Apply</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2025/05/30/f72e7a62-0f9b-405e-8380-a6bacc71b7f6/0631eb61-6455-4b3a-8392-503423216f1f.png" alt="The cursor is clicking the toggle to enable skip to main content in the wizard." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Good to know:</div><div class="info-content"><div>Once you have enabled Skip to Main Content from the wizard, it cannot be turned off.</div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Next step:</div><div class="info-content"><div>Go back to the <a data-composite="true" href="https://support.wix.com/en/article/accessibility-checklist-for-improving-your-sites-accessibility" target="">Accessibility Checklist</a> to continue improving the site's accessibility. </div></div></div></div>

ARIA attributes provide additional information about the semantics of elements to assistive technologies like screen readers. You may want to add ARIA attributes to any custom elements or applications...

Accessibility: Adding ARIA Attributes to Custom Web Applications

Discover how to enhance accessibility on your site by adding ARIA attributes to custom elements and applications. This article guides you through the process of implementing ARIA attributes in the Wix Studio Editor and Wix Editor, ensuring that assistive technologies like screen readers can interpret your custom features effectively. By following these steps, you can make your site more inclusive and improve the user experience for all visitors.

<div data-component-type="text"><div>ARIA attributes provide additional information about the semantics of elements to assistive technologies like screen readers. You may want to add ARIA attributes to any custom elements or applications on your site.</div></div><div data-component-type="text"><div>ARIA attributes are important, as they define ways custom elements and applications can be made accessible when it is not possible to do so with the element's native HTML. </div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important:</div><div class="info-content"><div>This feature is intended for users who have custom applications / elements that require ARIA attributes. If you do not have these on your site, you do not need to edit the ARIA attributes.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-aria-attributes" level="3">Adding ARIA attributes</h2></div><div data-component-type="text"><div>We have already hardcoded ARIA attributes for most elements on a site. However, if you have created custom applications, then you may want to add your own ARIA attributes for accessibility purposes.</div></div><div data-component-type="tabs"><div class="tabs-wrapper"><div class="headings-wrapper"><div data-slug="Studio-Editor" class="tab-heading heading-0">Studio Editor</div><div data-slug="Wix-Editor" class="tab-heading heading-1">Wix Editor</div></div><div class="tab-contents-wrapper"><div class="tab-content"><div data-component-type="text"><div>Enable developer mode (Velo by Wix) in the Studio Editor to add attributes to elements. Velo allows you to <a data-composite="true" href="https://dev.wix.com/docs/develop-websites/articles/getting-started/about-velo-by-wix" target="">add coding, build databases, and more</a>.</div></div><div data-component-type="text"><ol>
  <li>Select <strong>Code</strong>  <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/0de74f7a-9d8a-4c0c-8279-219bd3eefe97/d55e629b-e8dc-4acc-8af2-7a7779fb8bbc.png" /> on the left side of the editor.</li>  <li>Select the relevant application or element, and click the <strong>More actions</strong> icon <img data-composite="true" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXdFGzMGNDzgiZQ0F979Jv1-o5331SfuPnrxO8m55pHp_EiDKy7_zvShglz_oxBkkonbL4dOmmectOTVLG8_Lwhsvbvn33GQEVRVFTt0SaKfQnbZ33f2OyrtaR5ki1Fo_2ovT0Vy4H_uPEi3jljAkW-gqs8?key=dRllTO6NEoYu0-D1JuBE8A" />.</li>  <li>Select <strong>Accessibility</strong>.</li>  <li>Select <strong>Add Attribute</strong>.</li>  <li>Select an attribute from the drop-down menu.</li>  <li>Enter a label / select the level or value.</li>  <li>Select <strong>Add</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/06/06/28953d00-e0af-4830-9a6e-befc645463b7/d306108c-c260-44f0-8301-e5713d96a4c6.jpg" alt="The accessibility panel of an element in the Studio Editor. The cursor is clicking the Add Attribute button." /></div></div></div><div class="tab-content"><div data-component-type="text"><div>Enable dev tools in the <a data-composite="true" href="https://support.wix.com/en/article/accessibility-about-the-accessibility-wizard-7284021" target="">Accessibility Wizard</a> to add aria attributes to your custom elements. You can then add the attribute by right-clicking the element or application.</div></div><div data-component-type="text"><ol>
  <li>Select <strong>Settings</strong> in the top bar of your editor.</li>  <li>Select <strong>Accessibility Wizard</strong>.</li>  <li>Select the <strong>More actions</strong> icon <img data-composite="true" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXdFGzMGNDzgiZQ0F979Jv1-o5331SfuPnrxO8m55pHp_EiDKy7_zvShglz_oxBkkonbL4dOmmectOTVLG8_Lwhsvbvn33GQEVRVFTt0SaKfQnbZ33f2OyrtaR5ki1Fo_2ovT0Vy4H_uPEi3jljAkW-gqs8?key=dRllTO6NEoYu0-D1JuBE8A" /><strong> </strong>on the top bar of the Wizard.</li>  <li>Select <strong>Advanced accessibility settings</strong>.</li>  <li>Click the <strong>Accessibility Dev Tools</strong> toggle to enable it.</li>  <li>Right-click the application or element you want to add the attributes to.</li>  <li>Select <strong>Accessibility</strong>.</li>  <li>Select <strong>Add Attribute</strong>.</li>  <li>Select an attribute from the drop-down menu.</li>  <li>Enter a label / select the level or value.</li>  <li>Select <strong>Add</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/06/06/08f56fa8-dbc6-4484-b600-2447401cd390/51281520-4c34-49dc-a5f1-8159f3ce06e7.jpg" alt="The accessibility panel and the wizard are open. The cursor is clicking Add Attribute, and the toggle is enabled." /></div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important:</div><div class="info-content"><div>You can turn the advanced accessibility settings off at any time, and the ARIA attributes will not be deleted.</div></div></div></div></div></div></div></div><div data-component-type="heading"><h2 id="" level="4">You can add ARIA Attributes to the following elements:</h2></div><div data-component-type="table"><div class="table-wrapper"><table><thead><tr><th><div>Element</div></th><th><div>Properties</div></th></tr></thead><tbody><tr><td><div>Lightbox</div></td><td><div>label</div></td></tr><tr><td><div>Text </div></td><td><div>label, role [heading, status, alert], live, relevant, atomic, hidden, current, level</div></td></tr><tr><td><div>Container Box</div></td><td><div>label, tabindex, role [region, group, none, status, alert], live, relevant, atomic, current, controls, hidden</div></td></tr><tr><td><div>Strip</div></td><td><div>label, tabindex, role [heading, status, alert], live, atomic, hidden, current</div></td></tr><tr><td><div>Repeater</div></td><td><div>label, role [heading, status, alert]</div></td></tr><tr><td><div>Text Button</div></td><td><div>tabindex, pressed, expanded, haspopup</div></td></tr></tbody></table></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title"></div><div class="info-content"><div>We are continually working on the ability to add ARIA attributes to more elements. <a data-composite="true" href="https://www.wix.com/contact/en" target="_blank">Get in touch</a> if you have any specific requests about ARIA attributes. </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="editing-your-aria-attributes" level="3">Editing your ARIA attributes</h2></div><div data-component-type="text"><div>After adding attributes to custom applications, you can edit and update them whenever you like with the Accessibility icon <img data-composite="true" src="https://lh6.googleusercontent.com/tzGAKNeD3huzfUCBGbiHOAmMhpoOMn2d7mXWbB8x3rd5_wDvr4uEfNczYUD_5EqzSdzFPLv5nc9zp7VkwFDWloqQmUBf71J5_kTbI5nE3o9Wb2s_CS8xcsfkw0eHNAxCpa4dBBIq=s0" />. This icon is automatically added to elements you've connected attributes to.</div></div><div data-component-type="heading"><h2 id="" level="4">To edit the attribute:</h2></div><div data-component-type="text"><ol>
  <li>Select the element / application in your editor.</li>  <li>Select the <strong>Accessibility </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/05/05/123b3ec4-f910-485b-ba95-c80ee1f6723b/29accdaa-a7f8-4070-a4e9-be08ffc45e99.png" />.</li>  <li>Hover over the relevant attribute, and select the <strong>More Actions</strong> icon <img data-composite="true" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXcC5vRw8B_ITz9qd1n_rF0jP0XZvFe8Ly4NcbviMUHdlLJZIK7ATwxhjb-fPDytIlmc7hmtqMlqZt_sh3CtRvQOGzQRe_skqNqCTCHoFti1Yc1JZwr5M1G5d7vxKBGJAMf6oCDrRmiI9mYujNW1sBSBKREb?key=dRllTO6NEoYu0-D1JuBE8A" />.</li>  <li>Select <strong>Edit</strong>.</li>  <li>Make the relevant changes and select <strong>Save</strong>.</li></ol></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="types-of-aria-attributes" level="3">Types of ARIA Attributes</h2></div><div data-component-type="table"><div class="table-wrapper"><table><thead><tr><th><div>Attribute Name</div></th><th><div>Category</div></th><th><div>Tokens</div></th></tr></thead><tbody><tr><td><div>tabindex</div></td><td><div><br /></div></td><td><div>0, -1</div></td></tr><tr><td><div>role</div></td><td><div><br /></div></td><td><div>token: according to definition in primitive</div></td></tr><tr><td><div>aria-level</div></td><td><div><br /></div></td><td><div>int</div></td></tr><tr><td><div>aria-live</div></td><td><div>Live</div></td><td><div>token: polite, assertive</div></td></tr><tr><td><div>aria-multiline </div></td><td><div>Description</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-multiselectable</div></td><td><div>Description</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-pressed</div></td><td><div>State</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-relevant</div></td><td><div>Live</div></td><td><div>token: all, additions, removals, text</div></td></tr><tr><td><div>aria-activedescendant</div></td><td><div>Relationships</div></td><td><div>ID_REF</div></td></tr><tr><td><div>aria-atomic</div></td><td><div>Live</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-autocomplete</div></td><td><div>Description</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-controls</div></td><td><div>Relationships</div></td><td><div>ID_REF</div></td></tr><tr><td><div>aria-current</div></td><td><div>State</div></td><td><div>step, page, true, false</div></td></tr><tr><td><div>aria-describedby</div></td><td><div>Relationships</div></td><td><div>ID_REF (space separated items)</div></td></tr><tr><td><div>aria-expanded</div></td><td><div><br /></div></td><td><div>true, false</div></td></tr><tr><td><div>aria-haspopup</div></td><td><div>Relationships</div></td><td><div>dialog, menu, true, false</div></td></tr><tr><td><div>aria-hidden</div></td><td><div><br /></div></td><td><div>true, false</div></td></tr><tr><td><div>aria-invalid</div></td><td><div>State</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-label</div></td><td><div><br /></div></td><td><div>string</div></td></tr><tr><td><div>aria-labelledby </div></td><td><div>Relationships</div></td><td><div>ID_REF (space separated items)</div></td></tr></tbody></table></div></div>

Accessibility toolbars allow visitors to manipulate certain aspects of your site, like font and text size. While Wix doesn't offer built-in accessibility toolbars, you can add one to your site using c...

Accessibility: Adding an Accessibility Toolbar to Your Site

Discover how to enhance your site's accessibility by adding a third-party accessibility toolbar, allowing visitors to adjust font and text size. While not mandatory for compliance with Web Content Accessibility Guidelines, this feature can improve user experience. Follow our Accessibility checklist and use the Accessibility Wizard for further optimization. Note that embedding custom code requires a connected domain, and the article provides step-by-step instructions for adding the toolbar to your site.

<div data-component-type="text"><div>Accessibility toolbars allow visitors to manipulate certain aspects of your site, like font and text size. While Wix doesn't offer built-in accessibility toolbars, you can add one to your site using code from a third-party provider. </div></div><div data-component-type="text"><div>These toolbars are not a requirement to reach the standard as outlined in the <a data-composite="true" href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="">Web Content Accessibility Guidelines</a>. Either way, we recommend following our <a data-composite="true" href="https://support.wix.com/en/article/accessibility-checklist-for-improving-your-sites-accessibility" target="">Accessibility checklist</a>, and scanning your site with the <a data-composite="true" href="https://support.wix.com/en/article/accessibility-about-the-accessibility-wizard-7284021" target="">Accessibility Wizard</a> to ensure an improved experience for your visitors. </div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important:</div><div class="info-content"><div>Embedding custom code is only available for sites with a <a data-composite="true" href="https://support.wix.com/en/article/about-domains" target="">connected domain</a>. </div></div></div></div><div data-component-type="heading"><h2 id="" level="3">To add an accessibility toolbar using third-party code:</h2></div><div data-component-type="text"><ol>
  <li>Go to your <a data-composite="true" href="https://www.wix.com/my-account/site-selector/?buttonText=Manage%20Settings&amp;title=Select%20a%20Site&amp;autoSelectOnSingleSite=true&amp;actionUrl=https://www.wix.com/dashboard/{{metaSiteId}}/manage-website" target="_blank">Settings</a> in your site's dashboard.</li>  <li>Select the <strong>Custom Code</strong> tab under <strong>Advanced Settings</strong>.</li>  <li>Select<strong> + Add Custom Code</strong> at the top right.</li>  <li>Paste the code snippet in the text box.</li>  <li>Enter a name for your code.<br />
<strong>Tip: </strong>Give it a name that is easy to recognize so you can quickly identify it later.</li>  <li>Select an option under <strong>Add Code to Pages</strong>:
    <ul>
      <li><strong>All pages: </strong>This adds the code to all of your site's pages, including any new pages that you'll create in the future. Choose whether to load the code only once per visit or on each page your visitor opens.</li>      <li><strong>Choose specific pages: </strong>Use the drop-down menu to select the relevant pages.</li>    </ul>  </li>  <li>Choose where to place your code:
    <ul>
      <li>Head</li>      <li>Body - start</li>      <li>Body - end</li>    </ul>  </li>  <li>Select <strong>Apply</strong>.</li></ol></div>

Here at Wix, we are constantly working to improve the accessibility of our sites. We aim to provide you with the tools you need to ensure your site is accessible, and have created a guideline that lis...

Accessibility: Using External Checking Software or Tools

Discover how to enhance your site's accessibility with Wix's comprehensive guidelines and recommendations. Learn about the tools available to review your site's accessibility and receive improvement suggestions. To ensure compliance with local laws, consider consulting an Accessibility Advisor for a thorough review tailored to your region's requirements.

<div data-component-type="text"><div>Here at Wix, we are constantly working to improve the accessibility of our sites. We aim to provide you with the tools you need to ensure your site is accessible, and have created a <a data-composite="true" href="https://support.wix.com/en/article/accessibility-checklist-for-improving-your-sites-accessibility" target="">guideline that lists our recommendations</a>.</div></div><div data-component-type="text"><div>You can use external tools to review your site's accessibility and get suggestions for improvement. However, each <a data-composite="true" href="https://support.wix.com/en/article/accessibility-compliance-with-your-regional-laws" target="">country and region has different laws</a> - so we recommend having your site reviewed by an Accessibility Advisor to make sure it complies with the requirements for your region.</div></div>

Currently, we do not have a built-in accessibility toolbar that your visitors can use to adjust or enhance certain parts of your site. As an alternative, you can add an accessibility toolbar by retrie...

Accessibility Request: Adding an Accessibility Toolbar to Your Site

Discover how to enhance your site's accessibility by adding a third-party accessibility toolbar. While Wix does not currently offer a built-in option, you can embed custom code to provide visitors with tools to adjust site features. Learn more about this alternative solution and how it can help you meet accessibility standards. Your feedback is valuable as we continue to improve our offerings.

<div data-component-type="text"><div>Currently, we do not have a built-in accessibility toolbar that your visitors can use to adjust or enhance certain parts of your site. </div></div><div data-component-type="text"><div>As an alternative, you can add an accessibility toolbar by <a data-composite="true" href="https://support.wix.com/en/article/accessibility-adding-an-accessibility-toolbar-to-your-site" target="">retrieving third-party code and embedding it on your site</a>. </div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>Accessibility toolbars are not a requirement to reach the standard as outlined in the <a data-composite="true" href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="">Web Content Accessibility Guidelines</a>. </div></div></div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is greatly appreciated.</div></div>

You or your visitors may notice that elements that contain motion (such as animation effects and transparent videos) do not play on both the mobile and desktop versions of your live site. This can be ...

Accessibility: Videos and Animation Not Playing on Live Site

Discover how to troubleshoot issues with animations and videos not playing on your live site due to operating system settings. Learn about the Reduced Motion feature, which enhances accessibility for users with certain conditions, and how to adjust performance settings on Windows devices to enable visual effects. By following these steps, you can ensure that your visitors experience the full range of animations and videos on your site.

<div data-component-type="text"><div>You or your visitors may notice that elements that contain motion (such as animation effects and transparent videos) do not play on both the mobile and desktop versions of your live site. This can be due to settings in the operating system that you or your visitor are using.</div></div><div data-component-type="text"><div>There are two settings that prevent animation and videos from playing on a live site: Reduced Motion, and Best Performance. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="reduced-motion" level="3">Reduced Motion</h2></div><div data-component-type="text"><div>The Reduced Motion feature stops animations and videos from playing in the browser. Reduced Motion is an accessibility feature, which means its primary use is to allow visitors with disabilities and certain conditions (e.g. motion sickness) to visit your site.</div></div><div data-component-type="text"><div>Reduced Motion is available on most operating systems. You and your visitors can deactivate the feature from your device in order to see the full range of effects, motion, and animation on your site.</div></div><div data-component-type="text"><div>Select the relevant device from the list below to learn how to turn off Reduced Motion.</div></div><div data-component-type="text"><ul>
  <li><a data-composite="true" href="https://support.apple.com/en-us/HT202655" target="_blank">iPhone and iPad</a></li>  <li><a data-composite="true" href="https://support.apple.com/en-il/guide/mac-help/mchlc03f57a1/mac" target="_blank">Mac OS</a></li>  <li><a data-composite="true" href="https://support.office.com/en-us/article/Turn-off-Office-animations-9EE5C4D2-D144-4FD2-B670-22CEF9FA025A" target="_blank">Windows OS</a></li>  <li><a data-composite="true" href="https://www.howtogeek.com/415161/does-looking-at-your-phone-make-you-dizzy-disable-animations/" target="_blank">Android</a></li></ul></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>Reduced Motion is also automatically enabled for some mobile devices in low battery / power saving mode.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="performance-options" level="3">Performance options</h2></div><div data-component-type="text"><div>Your visitors can change a setting on their computer to improve your site's performance. The <strong>Adjust for best performance</strong> setting, available on devices with a Windows operating system, lets you choose what to do with visual effects, like animated elements and videos.</div></div><div data-component-type="text"><div>According to their preferences, visitors can choose whether to enable or disable any visual effects on their browser. </div></div><div data-component-type="heading"><h2 id="" level="4">To change performance settings:</h2></div><div data-component-type="text"><ol>
  <li>Enter &quot;Performance&quot; into the Windows search box.</li>  <li>Select <strong>Adjust the appearance and performance of Windows</strong>.</li>  <li>Select the <strong>Visual Effects</strong> tab.</li>  <li>Choose an option from the list below:
    <ul>
      <li><strong>Let Windows choose what's best for my computer:</strong> Windows changes your device's performance settings based on your device's capabilities.</li>      <li><strong>Adjust for best appearance:</strong> All advanced visual effects and settings are enabled and play on your device (including animation and videos).</li>      <li><strong>Adjust for best performance:</strong> All advanced visual effects and settings are disabled and do not play on your device. </li>      <li><strong>Custom: </strong>Manually adjust the settings to enable and disable the features you want.</li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/07/18/fdef93a2-4781-416b-8a15-f73d77c4f12c/8fae3cab-b453-4700-9e83-97d8d57a83b9.png" alt="Adjust appearance and performance of windows tab. The cursor is hovering over 'adjust for best appearance'." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>In order for visitors to see animations and videos play on your live site, they should select the <strong>Adjust for best appearance</strong> option.</div></div></div></div>

Currently, it is not possible to create a dynamic HTML sitemap, which would automatically update when you add new pages to your site. As an alternative, you can create a site page that lists and links...

Accessibility Request: Creating a Dynamic HTML Sitemap

Discover how to create a manual HTML sitemap for your site by listing and linking to all your pages. While a dynamic sitemap that updates automatically isn't available yet, this method allows you to keep your site organized and user-friendly. Your feedback helps us improve, so stay tuned for future updates!

<div data-component-type="text"><div>Currently, it is not possible to create a dynamic HTML sitemap, which would automatically update when you add new pages to your site. </div></div><div data-component-type="text"><div>As an alternative, you can <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-a-page-to-your-site" target="">create a site page</a> that lists and <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-a-link-to-an-element" target="">links to all of your site pages</a>, and update the list when needed.</div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is greatly appreciated.</div></div>

How to begin

Choosing a template

Hiring a professional to build your site

Build your website and business with Wix. Try using our AI tools to create your website, customize templates, or hire professionals to build or enhance your online presence.

Getting started with Wix

Learn how to build your website and business using Wix.

Wix Editor basics

Using the Editor tools

Your site's layout

Strips and columns

Your site's structure

Designing your site

Pages

Menus

Managing pages and menus

Text

Buttons

Containers and boxes

Slideshows

Shapes and lines

Adding and customizing elements

Images

Galleries

Videos

Documents and files

Adding files and media

Working with elements

Using effects and animations

Sharing and promoting your site

Adding advanced elements

Getting started

Mobile tools

Pages on mobile

Background on mobile

Mobile site layout

Site menu on mobile

Text on mobile

Media on mobile

Other elements on mobile

Troubleshooting your mobile site

Building a mobile site

Troubleshooting Editor sites

Using the Wix Editor

Using your dashboard

Managing your site

Managing Roles & Permissions

Getting started with AI

Using AI to create & manage your website

Using AI to set up your business

AI tools

Getting started with the editor

Using the editor tools

Structuring your site

Adding animations and effects

Branding your site

Troubleshooting your site

Using the Wix Harmony Editor

Media Manager basics

Uploading media

Purchasing media

Managing media

Troubleshooting media

Adding & managing media

Using the Pro Gallery

Editing images (Wix Photo Studio)

Getting started with Wixel

Creating and managing projects

Designing with Wixel

Upgrading and account management

Wixel

Managing your media

Wix Multilingual basics

Translating your website

Managing languages

SEO in Wix Multilingual

Creating a multilingual website

Privacy and GDPR

About accessibility

Making your site accessible

Advanced accessibility features

Building an accessible site

About the CMS (Content Management System)

Managing CMS collections

Connecting CMS collection content to your site

Working with dynamic pages and the CMS

Connecting user input elements to CMS

Using CMS with other Wix products

Advanced CMS features

Wix for Developers

Test Site

SSO Login

Wix Blocks

Advanced features

Getting started with  Wix Vibe

Managing your Wix Vibe site

Customizing your Wix Vibe site

Publishing your Wix Vibe site

Using Wix Vibe

Read how to use the Wix Editor and manage content on your site. Discover how to protect your visitors' privacy and make your site accessible.

Creating a website

Design and manage your site with smart functionalities.


Changing your account settings

Sign in issues

Managing your account

Upgrading to a Premium plan

Billing for Premium Plans

Billing for Domains

Billing for Google Workspace Business Emails

Managing your subscriptions

Charges, payments and tax

Invoices for Wix services

Using vouchers and promotions

Billing & premium subscriptions

Review your account settings, manage your subscriptions and plans and understand your invoices.

Account & billing

Manage subscriptions, plans and invoices.

Managing your site with the Wix app

Mobile apps basics

Customizing your own mobile app

Managing your own mobile app

Submitting your mobile app for approval

Building your own mobile app

Customizing your site on the Wix member apps

Managing your site on the Wix member apps

Using mobile apps as a member

Using the Wix member apps

Mobile apps for your customers

Use our mobile apps to run your business efficiently on the go and set up a dedicated app for your site members to stay in touch. 

Using the Wix mobile apps

Run your business and connect with members.

Domain basics

Wix domains

Domains purchased elsewhere

Transferring domains

Managing domains

Troubleshooting domains

Follow our step-by step guides to learn how to purchase, connect or transfer a domain for your site, and find out how to keep your site’s data secure.

Connecting a domain

Learn to purchase, connect or transfer a domain to your site.

Setting up your store

Managing products and categories

Setting up shipping & fulfillment

Setting up payment and checkout

Designing your store

Managing your orders

Managing store inventory

Managing the Members Area

Managing store emails

Promoting stores sales

Dropshipping with Wix Stores

Setting up sales channels

Using the Wix app for Wix Stores

Wix Stores

Setting up Wix Bookings

Creating your services

Managing your staff

Managing your calendar & bookings

Memberships, packages & payments

Customizing Wix Bookings pages

Emails, SMS, and promotions

Using the Wix app to manage your bookings

Video conferencing with Wix Bookings

Fit by Wix

Inquiry Services

Wix Bookings

Setting up Wix Events

Creating your event

Designing Wix Events

Managing your events

Wix Events

Business solutions & apps

Get tools to grow your business and web presence. Find the right tools for your specific needs, set up online payments and keep track of your site's analytics.

Managing your business

Get tools to grow your business and web presence.