Accessibility: Checking and Adjusting Your Site's DOM Order
6 min read
Your site's DOM order is the order in which screen readers and the Tab key highlight and / or "read" content on your page. It should follow a logical order to ensure your 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 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.
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 mobility issues, 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.
Changing the DOM order of your 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:
- 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.
- 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.
Next step:
Open the site's 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?
|