Wix Harmony エディタ：DOM 順序を操作する
3分
この記事内
- DOM 順序が重要な理由
- DOM 順序を手動で調整する
- アクセシビリティウィザードで DOM 順序を調整する
この記事では、2025年12月にリリースされた新 Wix Harmony エディタについて説明します。Wix Harmony エディタは、現在一部のユーザー様のみご利用いただけます。Wix Harmony エディタまたは Wix エディタのどちらを使用しているか不明な場合は、こちらで詳細を確認してください。
DOM（Document Object Model）順序とは、サイトページの構造を指すもので、これによってページ上のパーツが読み取られる順序が決まります。
そのため、DOM 順序を操作して論理的な順序にすると、サイトページの読み込みを最適化することができます。この記事では、DOM 順序が重要な理由と、DOM 順序を調整する方法について説明します。
DOM 順序が重要な理由
DOM 順序は、サイトページ上のパーツの読み込み、および読み取りを決める順序であるため、サイトの以下の点に影響を与える可能性があります。
- アクセシビリティ：サイト訪問者の中には、Tab キーやスクリーンリーダーなどの支援技術を使用してサイトを移動する方もいます。サイトの DOM 順序は、これらの支援技術がパーツを「読み進める」順序を決める重要な働きをします。
- パフォーマンス：DOM 順序は、サイト上の要素を「読み上げる」順序だけでなく、それらが読み込まれる順序も決定します。この順序が適切でない場合は、サイトの読み込み時にページのレイアウトが崩れるといった影響が生じる可能性があります。
- 検索結果のランキング：検索エンジンは、DOM 順序を利用して、サイトをクロールする順番を決定します。そのため、DOM 順序が整理されていなかったり誤っていたりすると、検索エンジンが適切な順序でコンテンツを読み取れなくなり、サイトの SEO に影響が生じる可能性があります。
サイトの DOM 順序をテストする方法：
ライブサイトでキーボードの Tab キーを押すか、画像読み上げソフト（スクリーンリーダー）を使用すると、サイトの自動 DOM 順序を確認することができます。
DOM 順序を手動で調整する
Wix は、デフォルトでサイトの DOM 順序を自動で整理し、ページコンテンツをパフォーマンスやランキングの観点から最適化します。ただし、特定のセクションやコンテナの DOM 順序は手動で調整することもできます。
自動による DOM 順序の整理を無効にする方法：
- エディタに移動します。
- エディタ左下の「レイヤー」アイコン
をクリックします。 - （レイヤーパネルで）該当するセクションまたはコンテナ横の「その他のアクション」アイコン
をクリックします。 - 「DOM 順序を最適化」横の「有効」をクリックして無効にします。
- 該当するパーツをドラッグアンドドロップして、希望の順序に変更します。
アクセシビリティウィザードで DOM 順序を調整する
DOM 順序は、アクセシビリティウィザードで自動で整理するよう求められる場合があります。これは、特定のページに対して表示されることも、サイト全体に対して表示されることもあります：
- サイトレベルの問題：文字を読み進める方向は、フランス語なら左から右、アラビア語なら右から左など、言語によって異なります。このタスクは、サイトの言語方向とパーツの視覚的な順序が一致していない場合に表示されます。
- ページの問題：このタスクは、ページのセクションまたはコンテナの少なくとも 1つで DOM 順序が無効になっている場合に表示されます。
アクセシビリティウィザードで DOM 順序を整理する方法：
- エディタに移動します。
- エディタ左上でサイト名をクリックします。
- 「アクセシビリティ」までスクロールダウンし、「問題を解決する」をクリックします。
- 「スキャンする」をクリックします。
- タスクの種類に応じて DOM 順序を整理します：
- サイトレベルの問題：「サイトレベル」ドロップダウンを選択します。
- ページの問題：
- 該当するページコレクション（例：メインページ、ストアページなど）をクリックします。
- 特定のページをクリックします。
- 「DOM の順序を整理」ドロップダウンをクリックします。
- 「自動（推奨）」を選択します。
- 「適用」をクリックします。
- （オプション）サイトパーツの視覚的な表示をチェックし、正しく配置されていることを確認します。
Wix におけるアクセシビリティに関する情報の参照元：
- Wix では、World Wide Web Consortium（W3C）が開発した Web Content Accessibility Guidelines（WCAG）文書に基づいて、推奨事項を作成しています。
- Wix では、以下の達成基準に基づいてガイドラインを作成しています：
- 意味のある順序（1.3.2）（英語）
- フォーカス順序（2.4.3）（英語）