開閉式のメニューはページ導線として多くのWebサービスで利用されています。 本記事では、そのような開閉式の要素へのフォーカスが失敗した場合の解決方法を紹介します。
メニューへのフォーカスが失敗する原因
メニューが開いている状態を想定してフォーカス設定している場合、エンドユーザーがメニューを閉じている状態でステップが起動するとフォーカスが失敗します。
例：
メニュー「ユーザー登録・削除」にフォーカスするステップを起動します。
画像右側のようにメニューが閉じていると、要素が見つからずステップが起動できません。
解決方法
解決方法を2つご紹介します。
1. ステップ開始時にページ移動する
ステップの開始時にエンドユーザーを指定したページに移動させる機能です。
それにより、メニューの開閉状態を気にせずステップを表示できます。
メリット
- メニューをクリックさせないのでエンドユーザーが行う作業が少ない
- プロダクトの改修による要素セレクターの変更の影響を受けない
デメリット
- エンドユーザーがページへのたどり着き方を覚えずらい
設定方法については、ステップ開始時にページ移動するをご覧ください。
2. ステップの分岐機能
ステップの分岐機能を利用し状況に合わせてステップを出し分けます。
メニューの開閉に合わせてステップを出し分けることが可能です。
メリット
- エンドユーザーが自分の手でメニューを操作するのでページへのたどり着き方を覚えやすい
デメリット
- プロダクトの改修による要素セレクターの変更の影響を受けやすい
設定方法については、✏️ステップを分岐させたい をご覧ください。
ステップ分岐に設定するセレクタの取得方法についてはこの先をご覧ください
ステップの分岐機能に設定するセレクタの取得方法
本セクションの対象者はエンジニアです。 HTML/CSSの基礎知識が必要となります。
メニュー開閉の仕組み（例：クラス、ID、データ属性）を確認し、ステップの分岐機能の条件に設定するセレクタを取得します。
- 開発者ツールを開いてフォーカスしたいメニューを選択
- メニューを開く→閉じるを数回繰り返して変化した要素を確認する
- 2で変化した要素のセレクタを開発者ツールから取得
- 2でクラス・ID以外のデータ属性が変化していた場合は以下を実施 データ属性でメニューを制御している可能性が高いです。その場合は3で取得したセレクタに変化したデータ属性を付け加えてください。
以下画像のサイトを例にセレクタを取得してみます。
通常通り取得した1のセレクタに2のデータ属性を付け加えます。
#global-menu > ul > li:nth-child(1) > ul[style='display: none;']
すると以下のようなセレクタが取得できます。
#global-menu > ul > li:nth-child(1) > ul[style='display: none;']
解決しない場合はOnboarding CSチームへお問合せください。
