Wix Editor: About the Order of Your Site's Elements
Updated: 7 days ago
The elements on your site pages are organized into a certain order. This order has both visual and functional aspects. It determines the display, loading, and tabbing sequence of elements on your live site.
The order of your site's elements is automatically determined, however you can make manual changes if needed.
The order of elements on your site
Elements you add to your site are organized in your page's layers, and are displayed in a specific order. This sequence is taken from your site's DOM order, which refers to the loading and reading sequence of page elements.
The order of elements on your site is an important part of your site's performance. It is also essential for your site's accessibility, as it determines the sequence in which visitors using assistive technologies (or the tab key) navigate your page content.
Wix automatically sets a DOM order for you. The sequence uses the visual order of the elements; from left to right, and from top to bottom.
Manually changing the order of your site elements
Automatic DOM order is automatically enabled on your desktop site. If the visual and tabbing order of your site is logical, we recommend keeping the sequence as it is. However, if your site's DOM order is not logical, you can manually change it in the Accessibility Wizard.
Want to check your site's DOM order?
Preview or open your live site, and press the Tab key on your keyboard to move through the page elements.
To change the DOM settings:
Select Settings on the top bar of your editor.
Select Accessibility Wizard.
Select the More Actions icon
at the top right of the Wizard.
Select Advanced accessibility settings.
Select Automatic DOM order.
Disable the toggle in the panel.
Select Turn It Off in the pop-up window.
Reorganize the elements manually:
Select the Layers icon
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.
Potential issues and troubleshooting steps
Issues with your site's DOM order can impact your site's performance and accessibility, as well as the overall structure of your site pages. Select an option to learn more about these issues, and discover potential resolutions.
The loading order of elements on my live site does not match the visual order of elements
If you have disabled your site's automatic DOM order, the order in which they load may not match the visual order of elements.
For example, if a button appears at the bottom of a page but is first in the DOM order, it loads before the elements above it. As additional content loads, the page's layout may shift and move around.
We recommend enabling your site's automatic DOM order to ensure that the loading and visual sequence of your elements match. If the automatic order is not logical, however, you can manually re-arrange the DOM order in the Layers panel.
Elements move around on the page when I save my site
Your site's DOM order is taken from the visual order of elements on your pages; from left to right, and top to bottom. This may cause elements to move position, or be hidden behind other elements when you save your site changes.
You can rectify this issue with the following steps:
Disable the automatic DOM order in your site's advanced accessibility settings.
Open the Layers panel in the Editor to locate and select the relevant elements.
The tabbing order of elements on my live site does not match the visual order of elements
If you have disabled your site's automatic DOM order, the tabbing order may not match the visual sequence of elements. This can impact your site's accessibility, as it makes it more difficult for visitors using assistive technologies to navigate your site.
We recommend enabling your site's automatic DOM order to ensure that the tabbing and visual sequence of your elements match. If the automatic order is not logical, however, you can manually re-arrange the DOM order in the Layers panel.
The automatic DOM order doesn't match my site's language
The automatic DOM order on desktop Editor 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.
This article is credited to the Wix team - https://support.wix.com/ and we thank them for that!
Comments