Editor X: Reorganizing Elements by DOM Order
3 min read
Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio
Editor X lets you arrange the DOM order of your elements in a single click. When using complex layout tools like stack, layouters or repeaters, this option ensures that visitors with disabilities can read your content in the same order it appears on screen.
In this article, learn more about:
Understanding the importance of DOM order
DOM order is used by assistive technologies to help some visitors find the information they need. They could be using a screen reader tool or the Tab key on their keyboard to navigate your page. Either way, the order of your DOM controls the reading order.
When featuring content with many different types of elements (e.g., text, media, buttons), it's important to verify the DOM order is correct. This way, visitors are able to follow a logical sequence and fully understand what your site is about.
Automatically reorganizing the DOM order
You can automatically rearrange the DOM order of your elements in a layouter, repeater or stack. We'll optimize the DOM order to reflect the visual order, from left to right and top to bottom.
To reorganize the DOM order:
Before you begin:
Make sure you're on the largest breakpoint. This option is not available for smaller breakpoints.
- Click Layers
at the top of Editor X. - Select the relevant layouter, repeater or stack.
- Click the More Actions icon
. - Click Reorganize DOM Order.
Test it out:
Use a screen reader extension on your published site to verify the automatic DOM order.
Manually arranging the DOM order
Spotted any issues with your page's DOM order? You can use the Layers panel to manually arrange your sections and the elements within.
To make the DOM order match the visual order, your sections should be organized from top to bottom. The elements inside those sections should be arranged the other way around, from bottom to top.
To manually arrange the DOM order:
- Click Layers at the top of Editor X.
- Choose what you want to organize:
- Elements inside a section: Organize the elements from bottom to top using drag and drop.
- Sections:
- 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.
- Hover over the top section and click the More Actions icon
Did this help?
|