Editor X：DOM 順序で要素を再編成する
読了時間：3分
Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について
Editor X では、ワンクリックで要素の DOM 順序を調整することができます。スタック、レイアウター、リピーターなどを用いた複雑なページレイアウトであっても、このオプションを使用することで、障がいのある訪問者も Tab キーなどを使って画面と同じ順番でコンテンツを読み進めることができるようになります。
この記事では、下記の項目について説明します：
DOM 順序の重要性を理解する
DOM 順序は、サイトの閲覧・操作に支援が必要な一部の訪問者が必要な情報を見つけるのに役立つ機能です。スクリーンリーダーツールやキーボードのタブキーを使用してページを閲覧する場合、DOM 順序に従って読み取り順序が設定されます。
さまざまな種類の要素（例：テキスト、メディア、ボタンなど）を含むコンテンツを掲載する場合は、DOM 順序が正しいことを確認することが重要です。これにより、訪問者は論理的な順序でサイトの内容を理解することができます。
DOM 順序を自動で再編成させる
レイアウター、リピーター、スタック内の要素の DOM 順序は、自動で再配置させることができます。これにより、左から右、上から下など、コンテンツを読む際の視覚的な順序に合わせ、DOM 順序を最適化することができます。
DOM 順序を再編成する方法：
始める前に：
最大のブレイクポイントでサイトを表示していることを確認してください。このオプションは、小さいブレイクポイントでは使用できません。
- Editor X 上部で「レイヤー」
をクリックします。 - 該当するレイアウター、リピーター、またはスタックを選択します。
- 「アクション」アイコン
をクリックします。 - 「DOM 順序を再編成」をクリックします。
確認してみましょう：
公開済みのサイトでスクリーンリーダー拡張機能を使用して、自動 DOM 順序を確認します。
DOM 順序を手動で調整する
ページの DOM 順序に問題がある場合は、レイヤーパネルを使用して、セクションやその中の要素を手動で配置することができます。
DOM 順序と視覚的な順序を一致させるには、セクションを上から下に編成する必要があります。また、これらのセクション内の要素は、下から上に逆に配置する必要があります。
DOM 順序を手動で調整する方法：
- Editor X 上部で「レイヤー」 をクリックします。
- 画面左のレイヤーパネルで調整するものを選択します：
- セクション内の要素：ドラッグアンドドロップで、要素を下から上に配置します。
- セクション：
- 上部のセクションにマウスオーバーし、「アクション」アイコン をクリックします。
- 「アレンジ」をクリックします。
- 「最前面へ移動」をクリックします。
- その他のセクションについても、レイヤーパネル内で上から下に向かって手順 1～3 を繰り返します。
- 上部のセクションにマウスオーバーし、「アクション」アイコン
お役に立ちましたか？
|