ヘルプセンター
    ヘルプセンター
  1. サイトの作成
  2. エディターXの使用
  3. エディターXでサイトを構成する
    4. Editor X: Reorganizing Elements by DOM Order

Editor X: Reorganizing Elements by DOM Order

読了目安: 3分
エディターXは、代理店およびフリーランサー向けの新しいプラットフォーム、Wix Studioに移行します。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. 
この記事では、その詳細について説明する：

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:

始める前に
Make sure you're on the largest breakpoint. This option is not available for smaller breakpoints. 
  1. Click Layers  at the top of Editor X.
  2. Select the relevant layouter, repeater or stack.
  3. Click the More Actions icon .
  4. 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:

  1. Click Layers  at the top of Editor X.
  2. Choose what you want to organize:
    • Elements inside a section: Organize the elements from bottom to top using drag and drop.  
    • Sections:
      1. Hover over the top section and click the More Actions icon .
      2. Click Arrange.
      3. Click Bring to Front.
      4. Repeat steps a-c with all other sections, going from top to bottom in the panel.

これは役に立ったか？

|

この記事では

  • Understanding the importance of DOM order
  • Automatically reorganizing the DOM order
  • Manually arranging the DOM order

関連コンテンツ

Editor X: Adding and Customizing a Stack
Editor X: Using Repeaters
Editor X: Using Layouters

プロを雇う

あなたのサイトの目標達成をお手伝いするWixパートナーをご紹介します。
マッチング