パソコンでホームページを開いて「サービス」にマウスを重ねると「ご利用の流れ」が出るのに、キーボードだけではそのページへ進めない。そんな連絡が来たら、メニューが見えるかと、その中のリンクを選んで開けるかを別々に確かめます。子項目は、上段の項目から開く小さな一覧の中にあるリンクです。子項目を使う人だけでなく、隣の「営業時間」へそのまま進みたい人の操作も試してください。
WordPress.orgの公開フォーラムには、Tabキーで上段の項目までは移動できるのに、子項目が現れずリンクを開けないという相談があります。逆に、上段の項目を通り過ぎたいだけでも子項目が開き、その中をすべて通る必要があるという相談もあります。この二件は投稿者がそれぞれの環境で観察した例です。自社サイトで調べるときは、使いたい一覧へ入る、使わない一覧を通過する、入った一覧から出るという三つの操作を一組にします。
どのページへ行ければよいかを先に決める
最初の試験では、上段にある親項目を一つ、その下の子リンクを一つ、次の上段の項目を一つ選びます。たとえば「サービス」から「ご利用の流れ」へ進み、途中で考え直したときは隣の「営業時間」へ進めるかを確かめます。これなら、子リンクへ到達できても、入ったあと次の用件へ移れない症状を拾えます。目的のページが別の入口からも開ける場合は、そこで見出しを確かめ、検収票に正しい到着先を記録しておきます。
マウスで見るときは、親項目の文字をクリックすると総合案内が開くか、隣の矢印が子項目を出すかを見ます。文字と矢印がそれぞれ別の仕事をする場合と、一つの操作箇所が開閉だけを担う場合があります。ページを移動するリンクか、その場で一覧を出すボタンかを先に見分けておくと、キーボードで親ページが開いたとき、それが誤動作か予定された動きかを判断できます。担当者も区別できない場合は、試験票に「親リンクと開閉の役割は制作側と要確認」と書きます。
今回の確認は、パソコンの画面上部にある通常のサイト案内を対象にします。スマートフォンの全画面を覆うメニューや、専用アプリの操作盤は、選択位置の扱いや操作するキーが異なる場合があります。パソコンの窓を細くしてボタンの形が変わったら、その状態を別に記録します。最初は普段使う幅の一つを選び、表示方式が同じ条件で修正前後を比べられるようにしてください。
現在位置が見える条件で始める
管理画面にログインしていない閲覧環境で、問題を聞いた公開ページを開きます。入力欄やメニューをマウスで押した直後から始めると、キーボード操作の出発点が変わるので、ページを新しく開いた直後を開始位置にします。アドレス欄に入力した場合は、ブラウザーの欄にいる間とページ内に入ったあとを分けて記録します。「本文へ移動」などのリンクが最初に見えた場合は、押さずに先へ進めば、共通のメニューへ向かう経路をたどれます。最初に出る項目はサイトやブラウザーによって異なるので、回数より文言を控えます。
Tabキーを一度ずつ押し、画面上で枠や下線などが移る先を読みます。この「次にキーで操作する場所」をフォーカスと呼びます。画面にマウスの矢印が残っている場所や、現在閲覧中のページを示す色と区別するため、Tabキーを一回進めたときに印が一緒に動くかを見てください。選択位置が見当たらないときは、すぐEnterキーを押さず、直前に見えた項目と次に現れた項目を記録します。「枠が見えない」と「一覧に入れない」を分けるためです。
同じブラウザーでページ内の普通のリンクにもほとんど印が現れない場合は、別のよく使うページでも一つ試します。比較先でもリンクを選べない場合は、OSやブラウザーのキーボード移動の設定を制作担当と確認してください。現在の設定を記録してから試すと、「設定変更後の端末ではできた」と「報告と同じ条件でできた」を分けられます。ポインターをメニューの上に置いたままだと、ポインターで開く状態とキーボードで開く状態が重なるため、試験の前にポインターをメニューから離します。
W3Cの解説では、キーボードから機能を操作できることと、キーボードで選択中の位置を視認できることを別の観点で扱っています。この試験でも、キーで正しく動いたかと、操作する人にその結果が分かるかを分けて記録します。枠が見えるから子項目も操作できる、あるいは正しいページに着いたから途中の位置も分かる、とまとめて判定しないためです。
閉じたまま通る、開いて選ぶ、閉じて出る
使わない子項目を通過する
最初は「営業時間」へ行くつもりで、閉じた状態の「サービス」を通り過ぎます。Tabキーで親リンクと開閉ボタンを通り、一覧を意図して開く操作はせず、次の上段の項目に着けるかを見ます。親へ移っただけで一覧が展開する場合は、いつ開いたか、次へ進むまでにどの項目を通ったかを書きます。見えていない子項目へフォーカスが入るように見える場合は、見える印が消えた場所、次に見えた場所、そのとき一覧が閉じたままだったかを控えます。
親項目の種類によって挙動が違う場合があります。ある項目にはリンクだけがあり、隣にはリンクと開閉ボタンがあるなら、後者の方が止まる箇所が多くなります。止まる箇所の数だけで異常と判断せず、どの操作ができる箇所かを読みます。別の親項目に進めないと感じたら、Shiftを押しながらTabキーを押して一つ前に戻れるかも試します。前進と後退の両方で動けない場合は、むやみにキーを押し続けず、その直前の動きを控えます。
一覧を開いて子リンクから目的のページへ行く
次は初期状態に戻し、開閉操作をする場所までTabキーで移動します。開閉ボタンが独立している構成なら、Enterキーなど制作担当と確認したキーで開きます。親リンクでEnterキーを押すと総合案内に移動する設計もあります。そこで一覧を期待していた場合は、押した対象が開閉ボタンだったかを確認し、親リンクしか選べない場合は「開閉操作箇所に着けない」と書きます。見た目の矢印が小さい場合も、キーボードで選んだ位置に印が出るかは独立して試せます。
開いたあと、選択位置が元のボタンに残っているか、最初の子項目に移ったかを記録します。次にTabキーで子項目へ進み、目的の「ご利用の流れ」に印が出たところでEnterキーを押します。画面上に一覧は出たが、Tabキーで隣の上段項目へ飛ぶ場合は、開閉はできたが一覧に入れないという結果です。逆に子項目を選べたものの別のページに着いた場合は、まず到達先URLと見出しを確かめ、リンク先の間違いとして別に伝えます。
項目が一つだけ動く場合もあるので、最初の子項目と末尾の子項目の両方が候補になります。最初は開くのに末尾の項目が隠れる場合は、後半までTabキーで進んだとき、選択中のリンクとその文言が画面に収まるかを記録します。長い一覧で下へスクロールできる実装でも、選択中の位置が見えるかはその操作をして確認します。文字を拡大して使う人がいる場合は、通常の幅での結果とは別に、使用した拡大率と、表示方式が切り替わったかを記録します。
子項目を開いたあとで用件を変える
三つ目は、一覧を開いて子項目の途中まで進み、どのリンクも開かずに一覧を閉じます。たとえば、W3Cが示す親リンクと開閉ボタンが分かれた構成例では、開いている間にEscapeキーで閉じると、開閉ボタンに選択位置が戻ります。自社サイトの操作仕様を担当者と決めてある場合は、そのキーと戻り先で試します。画面に別の閉じる操作を案内している場合は、その操作へキーボードでたどり着けるかも見ます。
閉じたことを確認したら、操作を終えずにTabキーで「営業時間」へ進みます。選択位置が消える、ページの先頭に戻り数多くの項目を再び通る、閉じた子項目をまだ選んでいるように見える場合は、いずれも閉じた直後とその次のキーを一組で書きます。閉じて選択位置が戻ったように見えても、次の操作で同じ一覧へ入り直してしまうなら、隣の上段の項目へすぐに進めず、別の用件を選ぶために操作が増えます。続けてShiftとTabで一つ前の項目へ戻れるかも確かめます。
上段から子項目へ入っても一覧の外へ出られない場合は、閉じる操作が見えるか、逆方向へ移動できるか、制作担当に聞いた操作で出られるかを確認します。全画面型のメニューでは、表示中に選択位置を内部に留める設計もあります。その場合も、この試験で伝えたいのは「どんな閉じ方があり、閉じた後に利用を続けられたか」です。表示方式が違うものを同じ回数のTab操作だけで採点する必要はありません。
キーを押す前後を一行で残す
「Tabが効かない」とだけ書くと、制作担当はページのどこから試せばよいか分かりません。確認票には入口URL、公開側か確認用環境か、端末とOS、ブラウザーと版、画面の広さや拡大率、ログインの有無を書きます。その下に、直前に選んだ項目、押したキー、画面で見えた変化、次に操作できた項目を順に記録します。確認できなかった場合は「未確認」、同じ条件で起きなかった場合は「この条件では再現せず」と分けます。条件の少ない一行でも、同じ入口で再現できれば修正依頼に使えます。
次の表は架空のサイトでの確認例です。「サービス」は総合案内へのリンク、右隣の「サービスの子項目を開く」は別のボタンとします。見える文言が矢印だけの場合、確認票では「サービス右隣の下向き矢印」など画面で識別できる書き方にしてください。比較用の到着先は、修正担当とすり合わせたページの見出しに合わせます。
| 確かめる経路 | 直前の位置と押したキー | 期待する結果 | 実際の観察 |
|---|---|---|---|
| 一覧を使わず次へ行く | サービスの開閉ボタン。閉じた状態でTab | 営業時間に印が移る | 印が一度消え、その次のTabで営業時間に出た。消えた間の位置は未確認 |
| 子項目のページを開く | サービスの開閉ボタンでEnter。開いたあとTab | 最初の子リンク「ご利用の流れ」に印が移り、Enterで同じ見出しのページが開く | 一覧は見えた。最初のTabで営業時間に移り、子リンクは選べなかった |
| 子項目を選ばず閉じる | 子リンクの途中でEscapeを押す取り決め | 一覧が閉じ、開閉ボタンに戻り、次のTabで営業時間へ進む | キーボードで子リンクへ入れなかったため未確認。前の行が直ったあとに実施する |
この架空例では、三行目は試験自体にたどり着いていません。制作担当へは「Escapeが使えない」ではなく、「子リンクに入れないので、子リンクから閉じる試験は保留」と伝えます。一行目も、印が消えた時間にどこを選択していたかは分かりません。制作担当に位置を特定してもらい、修正後は印が連続して見えるかを同じ操作で確認します。画面を録画するときは、公開ページだけを映し、通知やログイン情報を画面から外します。
空欄の確認票を作るなら、「入口／環境／目的の子リンクと到着先／閉じた状態の前進と後退／開くキーと開いた直後の位置／目的リンクの選択と到着先／閉じるキーと戻り先／閉じた後の次の項目／未確認の条件」を一件分の欄にします。現場で使う文言を書き添え、たとえば「サービスという文字の右にある矢印」と具体化すると、修正担当と同じ部分を見て話せます。修正前と修正後は同じ票の別欄にし、最初に何を観察したかを残します。
症状ごとに修正してほしい点を伝える
親の文字までは選べるが、矢印をキーボードで選べない場合は、まず子項目を開閉する操作箇所への到達を頼みます。制作担当が親の文字を丸ごと開閉に置き換える案を出したら、その文字から総合案内に行く役割が残るかを一緒に確認します。総合案内と子一覧の両方が必要な構成では、親リンクと開閉ボタンを別にする例があります。W3Cの展開式メニューの解説は、親のリンク先に意味がある場合と開閉だけを担う場合を分けているので、判断の材料にできます。
印だけが見えない場合は、明るい背景と濃い背景で同じ印が見分けられるか、一覧を開くと隠れていないかを担当者に確認してもらいます。現在のページを示す色と選択中を示す印が同じだと、どこが動いたか追いにくくなります。「枠を付けてください」と頼むときも、通常時、開いた状態、閉じた直後のどこで必要かを書くと、仕上がりを確かめられます。現在の場所が見えずに次の操作が不安なときは、偶然正しい行き先に着いても合格とせず、その間の状態を記録します。
子項目は選べるが閉じたあとに位置が戻らない場合は、閉じることと、利用を続けられる場所に戻ることを依頼文で分けます。開閉ボタンへ戻る構成なら、ボタンに印が現れ、その次のTabで別の上段の項目へ進めることまでを受入条件にします。閉じる前に選択していた子リンクが画面から消えたとき、消えた要素の位置を基準に次の操作を続けると、見えている順と合わないことがあります。画面の動きだけで原因を決めず、期待する位置と実際の位置を伝えます。
公開中の重要な案内へ子メニューから進めないときは、同じページの本文からその案内へ到達できる既存リンクがあるかを確かめます。別の導線を作る判断が必要なら、案内ページの見出しと公開URLを確認したうえで、本文に置けるかを運営担当と相談します。リンクを増やすだけでメニューの動作が変わるわけではないので、確認票では「別経路で到達可能」「メニューは修正待ち」と別欄にします。修正後に本文のリンクも残す場合は、用件に合う文言になっているかも確認してください。
共通部分の変更は、修正した経路と隣の経路で検収する
修正が確認用のページに入ったら、最初に不具合が出た三経路を同じ幅、同じブラウザーで再度たどります。閉じたまま通過、開いて選択、閉じて退出の順に見れば、子リンクへ入れるようになった代わりに次の上段へ進めなくなった、といった差を見つけられます。親リンクが別にある場合は、そのページも開けることを確かめます。初めに試した経路以外では、隣の親項目の開閉とマウスの操作を一回ずつ確認すると、共通部品の変更が影響した範囲を調べられます。
次に、同じメニューを載せていることを制作担当に確認した詳細ページを一つ選び、同じ順で操作します。トップと詳細で別のヘッダーを使うことがあるからです。確認用環境だけで合格した場合は、その環境での結果として書き、公開に反映してから入口URLと日時を変えて同じ票に追記します。画面幅で別メニューへ切り替わるサイトでは、別の構成を追加で試したかどうかも残します。試した範囲を記録しておけば、次の更新で再確認する入口が分かります。
補助機器を利用したときに項目名がどう伝わるかや、サイト全体の適合性を確認するには、今回の三経路に加えて別の試験が必要です。W3Cの構成例は、現在位置や開閉をどう扱うかを担当者と決める手掛かりになります。矢印キーの対応などは構成により異なります。自社サイトの仕様と利用環境で確かめた結果を、確認票の「操作できた範囲」に記載してください。
島田市などでホームページを新しく作るときや作り直すときは、トップから「サービスの詳細へ行く」、途中から「営業時間へ切り替える」など、実際のお客様の用件を制作時の検収項目にできます。依頼時に、メニューに並べる名前と、マウスやキーボードで目的の案内へ進む試験を一緒に決めたい場合は、LIFESEEDSのホームページ制作・運用の案内をご覧ください。すでに公開している画面の相談には、入口URLと止まる操作を添えてお問い合わせください。
アイキャッチは説明用に生成したイメージです。
コメント