Accessibility: Checking and Adjusting a Site's DOM Order
6 min read
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
Site 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 important
Some 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 on the live version of the site.
Auto DOM in the Accessibility Wizard
When 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 site.
Manually changing the DOM order of a site
If 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 Editor
Studio Editor
As 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.
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.
Did this help?
|