📘️ Book Club：アクセシブルなドロップダウンメニューとは？ナビゲーションをアクセス可能にする方法。

限られたページスペースを最大限に活用するために、デザイナーはドロップダウンメニューを頻繁に使用します。

💡ドロップダウン・メニューは、最初は非表示になっていて、ユーザーがメインナビゲーションまたは親メニューを操作したときに表示されるリンクのリストです。 これらのリンクは垂直方向に下降するか、「ドロップダウン」します。

通常、非表示のメニューまたはサブメニューは、ユーザーが親アイテムの上にマウスを移動すると、ホバーイベントに表示されます。サブメニューは、ユーザーがメニューを解除するまで表示されたままになります。 これにより、デザイナーは表示を乱雑にすることなく、ページにより多くのリンクを配置することができます。

以下の例では、「Documentation」というラベルの付いたドロップダウン・メニューが、さまざまなリソースへのリンクを含むサブメニューを開きます。

ドロップダウンメニューは、私たちのほとんどにとって非常に便利です。しかし、これらのメニューがアクセサブルできない場合、一部の人にとっては便利というよりも障害になります。

今回はドロップダウン・メニューのアクセシビリティの基本について学びたいと思います。Webサイトのメニューを作成するときに、Webサイトのデザイナー、デベロッパーまた管理者が知っておくと便利かと思います。

なぜアクセシブルなドロップダウンメニューが必要なの？

アクセシブルなドロップダウン・メニューは、障害を持つ人々がサイトを閲覧するのに役立つためとても重要な要素です。

より具体的には、それらは視覚、運動、および認知の制限を経験している人々を支援します。ドロップダウンメニューにアクセスできない場合、これらのユーザーはWebサイトの主要なセクションを見逃し、必要な情報を見つけるのに長い時間がかかる可能性があります。その結果、メニューはユーザーエクスペリエンスを損ない、ユーザーは再訪問しない可能性があります。

障害を持つ人々はどのようにドロップダウンメニューを使用するのでしょうか？

障害を持つユーザーがナビゲーションをどのように使用するかを理解して、アクセシビリティの問題に対処する方法を理解することが重要です。

たとえば、多発性硬化症を患っている人は、筋肉のけいれん、震え、または筋力低下を起こしている可能性があります。これらの症状により、コンピュータのマウスを保持および制御することが困難になります。

したがって、メニューには、マウスカーソルに加えてキーボードからもアクセスできる必要があります。

ユーザーが適切なキーを押すと、マウスを使用している場合と同じように、ドロップダウンメニューが表示されます。

また、誰もが当然と思っているわけではない一般的なユーザーインターフェイスの慣行も考慮する必要があります。たとえば、認知障害のあるユーザーは、一部のドロップダウンメニュー項目が非表示になっていることに気付かない場合があります。これは、ナビゲーションがハンバーガーアイコンによって切り替えられることが多いモバイルWebサイトでも問題になる可能性があります。

最後に、メニューがおきくなればなるほど、アクセシビリティが低下する可能性が高くなります。

下の写真のようなメガ・メニューは、サブ・メニューのリンクを大きなボックスに表示するタイプのドロップダウン・メニューです。メガ・メニューには、メニューの一部として画像やビデオが含まれている場合があり、多くの場合、トピックで始まるリンクがあります。

メガ・メニューには多くの情報が含まれているため、直感的に整理する必要があります。整理が不十分なメガ・メニューは、ユーザーを目的地に誘導できない場合、全体的に使い勝手が悪くなります。これは、認知障害のあるユーザーに特に当てはまります。

これらの考慮事項を念頭に置いて、ドロップダウンをゼロからアクセスできるようにする方法を開梱しましょう。

アクセス可能なドロップダウンメニューを作成するには？

アクセス可能なドロップ・ダウンメニューを作成するための最初のステップは、サイトの構造を計画することです。

まずメイン・ナビゲーションに表示されるトップレベルのページを把握し、サブページが必要なページを特定します。

サブ・ページには、独自のページを含めることもできます。たとえば、ブログの「マーケティング」カテゴリに、「コンテンツ・マーケティング」と「メール・マーケティング」のように、2つのサブページがあるとします。 このタイプのナビゲーションは、2レベルのサブ・メニューと呼ばれます。

ほとんどのコンテンツ管理システムには、サブページを設定できるナビゲーション設定があります。 通常、ナビゲーション・リンクはドラッグ・アンド・ドロップで構成できます。

ただし、ドロップダウンメニューのレベルが多すぎると、ナビゲーションが使いにくくなる可能性があります。 たとえば、手に障害がある方々は、すべてのサブメニューを開くために適切な領域でマウスを動かすのに十分なモーター・コントロールが取れない可能性があります。 したがって、サブメニューはできるだけシンプルに保つことが常に最善です。

メニュー構造を計画したら、すべての人がアクセスできるメニューの実装を開始できます。 これを行うには、さまざまなユーザーグループのニーズを満たすために、アクセス可能なドロップダウンメニューを正しくコーディングする必要があるため、開発者の支援が必要になる場合があります。

幸い、W3C Web Accessibility Initiative（WAI）は、ドロップダウンの標準とベストプラクティスを共有しています。 彼らが推奨するものは次のとおりです。

Home

マウスユーザーがアクセスできるドロップダウンメニュー

マウスを使用できるが、細かい運動制御ができないユーザーは、使用するのに十分な時間、ドロップ・ダウン・メニューを表示したままにする必要があります。 ドロップ・ダウン・メニューがマウスホバーに表示されているが、ユーザーが安定した手を持っていない場合、誤ってメニューから離れると、メニューがすぐに消えてしまいます。 これはアクセスできないメニューです。

解決策は、マウスがメニュー領域を離れてからメニューが閉じるまでの時間遅延を実装することです。

明確なフォーカススタイルが重要

メニューのリンクにマウスでカーソルを合わせると、背景色や境界線の色も変化せる必要性があります。

キーボードを使用している人は、現在選択しているリンクを理解することが必要です、そのためにはビジュアル的な手がかりが必要です。これはフォーカス・スタイルと呼ばれます。

キーボード・ユーザーは、マウスポインターを参照してページ上のどこにいるかを知ることができないため、明確なフォーカススタイルが重要です。

また、誰もが当然と思っているわけではない一般的なユーザー・インターフェイスの慣行も考慮する必要があります。

たとえば、認知障害のあるユーザーは、一部のドロップダウンメニュー項目が非表示になっていることに気付かない場合があります。これは、ナビゲーションがハンバーガー・アイコンによって切り替えられることが多いモバイルWebサイトでも問題になる可能性があります。

まとめ

ドロップダウンメニューは、私たちのほとんどにとって非常に便利です。 しかし、これらのメニューがWebアクセシビリティを考慮に入れていない場合、一部の人にとっては便利というよりも障害になります。

このようなことを考慮して、皆が使用できるWebサイトをデザインすることを心がけたいと思います。

How to Create Drop-Down and Fly-Out Menus That Are Web-Accessible

Dropdowns

私も色々勉強中なので、皆さまのご意見・ご感想をお聞かせください。
お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。 主にデジタル・プロダクトの制作に携わっています。