Depending on the site builder you're using, you may see a setting referred to as focus indicators (Studio Editor), or visual indicators (Wix Editor). These are blue rectangles that appear around inter...

Accessibility: About Focus Indicators (Visual Indicators)

<div data-component-type="text"><div>Depending on the site builder you're using, you may see a setting referred to as <strong>focus indicators</strong> (Studio Editor), or <strong>visual indicators</strong> (Wix Editor). These are blue rectangles that appear around interactive elements like buttons and links when visitors use a keyboard to navigate through a 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 / visual 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/visual 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 it.</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 my 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. If the focus indicator does not appear on the preview or live version of your site, you can change the settings from the Accessibility Wizard. </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>If you are using the Wix Editor, you might need to enable the focus indicators from the Accessibility Wizard.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Using the Studio Editor?</div><div class="info-content"><div>Focus indicators are always enabled on Studio Editor sites, 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 the <strong>More Actions </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/11/25/a94380b6-9e23-427e-b15a-655b543c14d1/b4a0776b-b9da-43ec-89ba-59cba9a49e4f.png" /> at the top of the Accessibility Wizard panel. </li>  <li>Select <strong>Advanced accessibility settings</strong>. </li>  <li>Select <strong>Visual Indicators</strong>.</li>  <li> Enable the <strong>Allow keyboard users to navigate through your site </strong>toggle.</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/11/25/9dc097fe-2e9f-4938-a82c-2b9ec66fc828/495d872f-f036-4052-8c6b-125968669125.jpg" alt="The Wizard's advanced settings. The cursor has clicked the toggle to enable visual indicators." /></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"

<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="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="testing-skip-to-main-content" level="3">Testing Skip to main content</h2></div><div data-component-type="text"><div>You can check how the link looks whenever you want. Simply open the live site (or site preview), and navigate the page using your keyboard's Tab key to see it.</div></div><div data-component-type="text"><div>If you notice the link does not appear on the preview / live version of your Wix Editor site, you can check and change the settings from the Accessibility Wizard. </div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Building a site with the Studio Editor?</div><div class="info-content"><div>It is not possible to disable Skip to main content on Studio Editor sites, so you don't need to check this setting. </div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To check the settings:</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 the <strong>More Actions </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/11/25/a94380b6-9e23-427e-b15a-655b543c14d1/b4a0776b-b9da-43ec-89ba-59cba9a49e4f.png" /> at the top of the Accessibility Wizard panel. </li>  <li>Select <strong>Advanced accessibility settings</strong>. </li>  <li>Click <strong>Skip to main content</strong>.</li>  <li>Click the toggle to enable or disable it:
    <ul>
      <li><strong>Enabled:</strong> Skip to main content is displayed on your live site and is the first link visitors see while using keyboard navigation.</li>      <li><strong>Disabled:</strong> Skip to main content is not displayed on your live site.</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/2024/06/06/5ac3a5d2-91a5-48ef-8286-09839baecca5/114bfdaa-5c69-45eb-8cd9-4836143fe4ae.jpg" alt="The advanced settings in the accessibility wizard. The cursor has enabled to skip to main content toggle." /></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

<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

<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

<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

<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

<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

<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

Use Wix to build your site and business. Try our AI tools to create a site, customize our templates or hire a professional to create or enhance your web presence.

Getting started

Learn how to use Wix to build your site and business.

Wix Editor basics

Using the Editor tools

Your site's layout

Strips and columns

Structuring your site

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 animation

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

Building a mobile site

Troubleshooting your Editor site

Using the Wix Editor

Using your site dashboard

Site management

Managing roles and permissions

Managing your site

Getting started with AI

Using AI to create & manage your site

Using AI to set up your business

AI tools

Media Manager basics

Uploading media

Purchasing media

Managing media

Media issues

Adding and managing your media

Using the Pro Gallery

Editing images (Wix Photo Studio)

Managing your media

Setting up your multilingual site

Translating your site

Managing your languages

SEO in Wix Multilingual

Creating a multilingual site

Privacy & GDPR

About Accessibility

Making your site accessible

Advanced accessibility features

Creating 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 the CMS

Using CMS with other Wix products

Advanced CMS features

Wix for developers

Test Sites

SSO Logins

Wix Blocks

Advanced features

Learn how to create a site and manage its content with our intuitive editors. Know how to protect visitors' privacy and make sites compliant with accessibility laws.

Creating your site

Design and manage your site using intuitive Wix features.

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

Wix Bookings

Setting up Wix Events

Creating your event

Designing Wix Events

Managing your events

Managing your guests

Selling event tickets

Promoting your event

Using the Wix app for Wix Events

Check-in by Wix for Events

Wix Events

Setting up Pricing Plans

Creating your plans

Designing your plans pages

Selling Pricing Plans

Managing purchased plans

Using the Wix app for Pricing Plans

Wix Pricing  Plans

Setting up your restaurant

Creating Wix Restaurants menus (NEW)

Taking online orders (NEW)

Table reservations

Creating your Wix Restaurants menu

Taking online orders

Using the Wix  app to manage your restaurant

Wix Restaurants

Setting up Photo Albums

Selling with Photo Albums Store

Setting up Art Store

Selling with Art Store

Wix Photography

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.