Accessibility: Checking and Adjusting a Site's DOM Order
A site's DOM order is the order in which screen readers and the Tab key highlight and / or "read" content on the page. It should follow a logical order to ensure that visitors get the best possible experience on the site, and can navigate and enjoy its content.In this article, learn more about:
DOM order on sites Why DOM order is important Auto DOM in the Accessibility Wizard Manually changing the DOM order of a siteDOM order on sitesSite DOM is the loading and reading order of elements on site pages. Wix automatically sets a DOM order based on the visual order of the elements; from left to right, and top to bottom. When developing our accessibility tools, we test our products using the following screen readers:
Windows + Firefox or Chrome: NVDA (Free reader) iOS + Safari: Voiceover (Built-in reader)This means that we've created your site's automatic DOM order with the above applications' functions in mind. Important:The automatic DOM order on desktop Wix sites has been built for left-to-right scripts (e.g. English, Spanish, etc.). If your site uses a right-to-left script such as Arabic or Hebrew, you need to manually re-arrange the DOM order in the Layers panel.Why DOM order is importantSome site visitors may use screen readers and other assistive technologies to navigate your site. These technologies assist visitors with visual impairments by scanning the site content, and reading it aloud to the visitor. Visitors who use screen readers, as well as those with conditions that affect mobility, may use the Tab key to navigate through your site content. Site DOM order is therefore important for visitors using screen readers and / or the Tab key, as they need to be able to navigate around your site in a logical order.For example, the site menu should come first, followed by the rest of the elements in the header, then the page title, then the page contents, etc. If the DOM order is incorrect, it can cause the screen reader / Tab key to skip or jump around your page content.Want to test your site's DOM order?You can test out the automatic DOM order of your site by using your keyboard's Tab key or a screen reader the live version of the site.Auto DOM in the Accessibility WizardWhen working on a Studio Editor site, you may see the option to automatically organize its DOM order in the Accessibility Wizard. We recommend selecting this option, as it ensures the Wizard's scan and resulting tasks are correct.Don't see this checkbox?The option to organize the site's DOM does not populate if: 
The site was created after the beginning of November 2024 You have previously organized the site's DOM with the Accessibility Wizard You have disabled auto DOM on the siteManually changing the DOM order of a siteIf you notice your site's DOM order is not logical, we recommend changing it to ensure an improved experience for visitors. Use the Accessibility Wizard and Layers panel to change the DOM on Wix Editor sites. If you're building a site in the Studio Editor, you can adjust the order with the site's Layers and Pages panels.Important:If the tabbing order of your site is logical, then you don't need to do anything. Changing the order when it is already correct can cause issues for visitors using screen readers and / or the Tab key.To change the DOM order:Wix EditorStudio EditorAs Wix automatically sets a DOM order for your site, you need to disable it in the advanced settings of the Accessibility Wizard. You can then manually adjust the DOM order of elements in your site's Layers panel as needed.To change your site's DOM settings and order:
Go to your editor. Click Settings at the top and select Accessibility Wizard. Click the More Actions icon  at the top of the Accessibility Wizard panel.  Select Advanced accessibility settings.  Select Automatic DOM Order. Disable the toggle in the panel. Select Turn It Off in the pop-up window.
Select Layers   at the bottom left of the editor. Check over the list and delete any redundant elements. This includes duplicate elements that do not have a use on your site and can confuse screen reader users. Drag and drop the remaining elements into the desired order.Next step:Open the mobile Editor and repeat the same steps.Depending on the site's needs and / or script, you can disable auto DOM on sections / containers, grid cells, element stacks, or the entire site. You can then manually adjust the order as needed.To manually arrange the DOM order:
Go to your editor. Choose where you want to disable auto DOM:
    
The entire site:

Click the Wix Studio icon  at the top left of the editor. Click Tools. Click Auto DOM Order to deselect it. Click Turn Off to confirm.   Sections, containers, or grid cells:

Right-click the relevant section / container / grid cell. Click Auto DOM Order in the right-click menu to deselect it.     Click Layers  on the left side of the editor. Choose what you want to organize:
    
Elements inside a section / container / grid cell / stack: 

Click the relevant parent element (e.g. the section) in the panel to open it. Drag and drop the elements into the correct position.   Sections / containers / grid cells / stacks: 

Hover over the top section and click the More Actions icon . Click Arrange. Click Bring to Front. Repeat steps a-c with all other sections, going from top to bottom in the panel.    Notes:
Navigating a site using the Tab key only navigates through the interactive elements and not static elements such as text. If you want to test out a screen reader on static elements such as text, follow the instructions in your screenreader's help center on how to properly navigate a website with a keyboard. Pinned elements are automatically placed at the end of the tabbing sequence. If you want it to be tabbed earlier in the sequence, we recommend that you unpin the element and place it in the header.What's next?Go back to the Accessibility Checklist to continue working on your site's accessibility.