閉じたスマホメニューのリンクにTabキーが移る？確認と改善の手順

まず、メニューボタンと開く一覧を見つける

ここで扱うのは、メニューボタンを押すと、サービス案内などのページへのリンクが開く一般的なサイトメニューです。画面全体を覆う案内や、複雑なアプリの操作メニューには、その仕組みに合った別の確認が必要です。

最初に、ボタンを押す前の画面を見ます。次にボタンを押し、どの一覧が現れるかを確かめます。同じ画面に別の一覧がある場合は、今回のボタンで開くものを区別してください。確認する画面幅も、問題が出たときに合わせます。

キーボードで操作する場合の「選択位置」は、次にEnterキーなどで操作できる項目のことです。リンクやボタンの周りに枠などの印が出ると、位置を見分けられます。技術的にはフォーカスと呼びます。印が見えない場合は、一覧の開閉とは別に、選択位置を示す表示も調べる必要があります。

項目名が分かりにくい、営業時間など必要なページが見つからない、という問題は、開閉の不具合とは分けます。案内内容とページの分類を先に整理したい場合は、次の記事で見つけやすさを確認できます。

参考：W3C：通常の開閉型ナビの例と適用範囲

参考：W3C：移動用リンクと開閉操作を分ける条件

営業時間や案内ページを見つけやすくするメニューの作り方

閉じた見た目でも、見えないリンクへ進まないか確かめる

メニューを閉じて、メニューボタンに選択位置を合わせます。そこでTabキーを1回ずつ押してください。画面に見える次の項目へ移るか、閉じた一覧の中へ移るかを確かめます。Shiftキーを押しながらTabキーを押すと、反対の方向へ進めます。

次の図は、説明用に作った別々の記録を比べたものです。最初の記録では、一覧が見えず、ボタンの設定も「閉じている」となっています。それでも、Tabキーで一覧内のサービスリンクへ進みました。この記録だけでは、なぜそうなったかは分かりません。

もう一つの記録では、Enterキーでボタンを操作した後に一覧が見え、設定も「開いている」となっています。その後Tabキーでサービスリンクへ進んでいます。これは最初の記録を直した結果ではありません。どちらも、閉じた後の動き、原因、修正後の結果はまだ確認されていません。

図の内容を文章で読む

説明用の別々の架空記録。閉じた表示でもリンクへ進んだ記録：説明用の記録の名前は閉じた表示でもリンクへ進んだ記録、確認した環境と幅は作業用サイト・Chrome・390幅の説明条件、ボタンの作り方の記録はbutton（HTMLのボタン）、ボタンに表示する名前はメニュー、開閉状態を伝える設定は閉じている（false）、ボタンと対応する一覧の記録名はmenu-panel（一覧の対応名の例）、一覧は画面に見えたかは表示なし（false）、押したキーと操作はメニューボタンからTabで進む、Tabキーで選択位置が移った先は一覧内のサービスリンク、閉じた後の結果は未確認、原因は未確認、修正後の結果は未確認。開いた一覧のリンクへ進んだ別記録：説明用の記録の名前は開いた一覧のリンクへ進んだ別記録、確認した環境と幅は別の作業用記録・Chrome・390幅の説明条件、ボタンの作り方の記録はbutton（HTMLのボタン）、ボタンに表示する名前はメニュー、開閉状態を伝える設定は開いている（true）、ボタンと対応する一覧の記録名はmenu-panel（一覧の対応名の例）、一覧は画面に見えたかは表示あり（true）、押したキーと操作はメニューボタンをEnterで操作しTabで進む、Tabキーで選択位置が移った先は一覧内のサービスリンク、閉じた後の結果は未確認、原因は未確認、修正後の結果は未確認。二つ目は一つ目の修正後ではない。開閉状態の値、一覧の表示、キー操作とTab先は別に読む。false/trueは明示された観測値で、未知を埋めた値ではない。表示なしからCSSのdisplay:noneやHTMLからの削除、原因を推測しない。閉じた後、個別原因、修正後は両方未確認。

PC原寸画像を開く · スマホ原寸画像を開く

見た目、ボタンが伝える開閉状態、キーボードで進む先は、別の情報です。「開いたから問題ない」「閉じて見えるから中へ進めない」と判断せず、実際にキーを押した結果を照らし合わせます。

制作担当へは、「この幅の画面で、一覧を閉じてボタンからTabキーを押すと、サービスリンクへ進む」という場面を伝えます。原因を決めつけず、該当するボタンと一覧の処理を調べてもらうためです。

参考：MDN：開閉状態を伝えるaria-expanded

開いた一覧のリンクへ進み、元の操作へ戻れるか試す

メニューボタンに選択位置を合わせ、Enterキーで開く操作を試します。一般的なHTMLのボタンでは、Spaceキーも操作に使えます。マウスや指で開くときと、キーボードで開くときに、同じ一覧が現れるかを確かめてください。

一覧が開いたら、Tabキーを1回ずつ押してリンクへ進みます。選択位置が見えるか、読みたいページを選べるか、ShiftとTabで戻れるかを確認します。途中でマウスを使って別の場所を選んだ場合は、始めの状態に戻して試します。

リンクを選びEnterキーを押したときは、予定のページに到着するかも確認します。メニューの見た目が変わったことと、リンクが使えたことは別です。親ページへのリンクと、一覧を開くボタンが同じ場所にある場合は、それぞれの役割を制作担当と整理してください。

通常のサイトメニューでは、Tabキーでページ内の項目を順に移動できることが基本です。W3Cの例で示される矢印キーやHome・Endは追加の操作であり、すべての通常メニューへ一律に入れる必要はありません。採用した部品が対応する操作を、実際の画面で確認します。

参考：W3C：開閉ボタンのEnterとSpace

参考：W3C：Tab・閉じ方と追加キーの条件

制作担当は、一覧の隠し方とボタンの開閉処理を調べる

見えないリンクへ進むなどの違いが見つかったら、今回のボタンが開閉する一覧に調査範囲を絞ります。見た目を変える指定と、ボタンの処理が食い違っていないかを制作担当が調べます。サイト全体の設定を戻す前に、該当する部品の変化を確認することが大切です。

制作担当が読む情報の一つが、aria-expandedというHTMLの設定です。画面読み上げなどに「開いているか」を伝えます。trueは開いている状態、falseは閉じている状態です。この値を書き換えるだけで、一覧の見た目やキーボードの動きまで自動で変わるわけではありません。

開く処理では一覧を表示し、ボタンも開いている状態にします。閉じる処理では、一覧を閉じた表示に戻し、ボタンも閉じている状態にします。初めてページを開いたときも、見た目と設定をそろえます。そのうえで、閉じた一覧のリンクへキーボードの選択位置が進まないかを再確認します。

HTMLのhiddenという設定は、内容を表示しない状態を指定するものです。これを使う部品では、開くときに外し、閉じるときに付ける処理を確認します。ただし、表示を決めるCSSという指定によって、見える状態に上書きされる場合があります。設定名だけで判断せず、実際に適用されている表示方法を読みます。ページ内検索で見つけるhiddenのuntil-foundという別の状態も、通常の閉じた一覧と混同しません。

別の設定であるaria-hiddenは、画面読み上げなどが内容を参照できるかを扱います。これだけを付けても、見た目を隠したりTabキーの移動を止めたりした確認にはなりません。選択できるリンクやその親に安易に付けず、表示と操作の両方を整えます。

Chromeの開発者ツールを使う担当は、Elementsでボタンと一覧のHTMLを読みます。Stylesは表示の指定、Computedは実際に適用される計算済みの値を見る場所です。ボタンを操作する前後の設定と、一覧や親の表示指定を比べます。ツール上で一時的に値を変えた結果と、サイトへ保存した変更の結果は区別してください。

リンクを押したときの動作を止める処理も、部品の役割に沿って調べます。特定の利用者がpreventDefaultという処理を外して改善した報告は、すべてのサイトで削除する指示にはしません。この処理は元の動作を止めるためのものです。必要なリンク移動を保ち、原因が分かった範囲を直します。

参考：MDN：開閉状態を伝える設定の意味

参考：MDN：hiddenとCSS上書き、until-foundの違い

参考：MDN：aria-hiddenの意味と操作対象への注意

参考：Chrome公式：適用されるCSSを読む場所

閉じた後に、選択位置が見えない項目へ残らないか確かめる

開く確認の後は、閉じる操作を試します。ボタンをもう一度操作するなど、そのメニューが用意している閉じ方を使います。一覧が閉じるか、ボタンの状態も戻るか、キーボードの選択位置が見えないリンクに残らないかを確認してください。

一覧の中から閉じる方法を用意する場合は、閉じた後にどこへ戻すかも決めます。W3Cの操作例では、Escapeキーで閉じて、開閉ボタンへ選択位置を戻しています。採用する部品でもこの方法を使うなら、実際にボタンへ戻り、そこから次の項目へ進めるかを試します。

今回の架空の二記録には、閉じた後の結果がありません。開いた一覧のリンクへ進めたことから、閉じ方や戻る位置まで成功したとは推測できません。実際に閉じる操作をした後に、その結果を確認します。

戻った場所の印が見えない、画面上部の固定された案内に隠れる、といった問題が残る場合は、開閉処理だけで終えず表示も調べます。印がないこと、隠れること、開閉できないことを分けると、直す箇所を絞りやすくなります。

参考：W3C：例の閉じ方とボタンへ戻す操作

修正した場所と公開先で、同じ順序の操作を試す

修正後は、問題が出たときと同じページ、ブラウザー、画面幅で確認します。メニューボタンから始め、閉じた状態でTabキーを押す、開いてリンクへ進む、閉じて戻る、という順序で試してください。幅が変わると別のメニューを使うサイトでは、変更が関係する範囲も確かめます。

開いた一覧とボタンの状態が合うこと、リンクを選べること、閉じた後も現在位置が分かることを確認します。作業用の画面で直っても、公開先に同じ変更が反映されたとは限りません。公開したページでも必要な操作を試し、まだ調べていない部分を確認済みにしないでください。

次の説明用の例は、公開先をまだ確認していない記録です。ボタンの種類、開閉状態、一覧の表示、キーで進む先、閉じた後の結果は不明です。作業用の別記録を、そのまま公開先の結果として使うことはできません。

メニューは、開いて見えるだけでなく、キーボードでも目的のリンクへ進み、閉じた後に操作を続けられることが必要です。まず画面上の動きを確かめ、食い違う箇所があれば、その一覧の隠し方と開閉処理を制作担当に調べてもらってください。

この記事とW3Cの操作例は、確認する場所を理解するための説明です。すべてのスマートフォンや画面読み上げでの動作を保証するものではありません。実際に使う環境と採用した部品で、必要な操作を確認します。