Wix Studio エディタ：DOM 順序で要素を再編成する
読了時間：4分
Wix Studio エディタのサイト要素は、DOM 順序で並べ替えることができます。これにより、スクリーンリーダーなどの支援技術を使用している訪問者が、サイトコンテンツを視覚的な順序で正しく移動できるようになり、サイトのアクセシビリティが向上します。
この記事では、以下の項目について説明します：
参考：
サイトでスタックやフレックスボックスなどのより複雑なレイアウトツールを使用している場合は、DOM 順序で要素を整理することが特に重要になります。
DOM 順序の重要性
サイト訪問者の中には、Tab キーやスクリーンリーダーなどの支援技術を使用してサイトを移動する方もいます。サイトの DOM 順序は、これらの支援技術が要素を「読み進める」順序を決める重要な働きをします。
そのため、すべての訪問者がコンテンツを適切な順序で移動できるよう、サイトページに論理的な DOM 順序を設定しておくことが重要です。たとえば、最初にサイトメニュー、次にヘッダーの残りの要素、そしてページタイトル、ページコンテンツなどの順で訪問者が移動できるようにするのが理想的です。
サイトの DOM 順序を確認する方法：
ライブサイトでキーボードの Tab キーを押すかスクリーンリーダーを使用すると、サイトの自動 DOM 順序を確認することができます。
サイトの DOM 順序を自動で再編成させる
セクション、フレックスボックス、スタック、またはページ全体で、要素の DOM 順序を自動で再編成させることができます。順序は、要素の視覚的な順序（左から右、上から下）に合わせて最適化されます。
ヒント：
ページの DOM 順序を再編成すると、ページが最適化され、レイアウトの問題が改善される可能性があります。
ページの DOM 順序を再編成する：
- エディタ左側で「ページ」
をクリックします。 - 該当するページを選択します。
- 「その他のアクション」アイコン
をクリックします。 - 「DOM 順序を再編成」をクリックします。
レイヤー内の DOM 順序を再編成する：
- エディタ左側で「レイヤー」
をクリックします。 - 該当するセクション、フレックスボックス、またはスタックを選択します。
- 「その他のアクション」アイコン をクリックします。
- 「DOM 順序を再編成」をクリックします。
サイトの DOM 順序を手動で変更する
サイトの DOM 順序は自動で再編成させることができますが、その順序に問題があった場合は、要素の視覚的な順序（左から右、上から下）に合わせ、DOM 順序を手動で変更することができます。
サイトの DOM 順序を手動で変更する方法：
- エディタ左側で「レイヤー」 をクリックします。
- レイヤーパネルで整理するものを選択します：
- セクション内の要素：
- セクションを選択して開きます。
- 要素を正しい位置にドラッグアンドドロップします。
- セクション：
- パネル内で一番上の「セクション」にマウスオーバーし、「その他のアクション」アイコン をクリックします。
- 「アレンジ」をクリックします。
- 「最前面へ移動」をクリックします。
- レイヤーパネル内のその他のセクションについても、上から順に選択して上記の手順を繰り返します。
- パネル内で一番上の「セクション」にマウスオーバーし、「その他のアクション」アイコン
- セクション内の要素：
お役に立ちましたか？
|