キーボードユーザーがメガメニューにアクセスできるようにする
これが状況です。大規模な企業サイトでは、主要なナビゲーションにメガメニューがあります。 2次レベルのページ領域は、このドロップダウン内から使用できます（この例では、2次レベルは「メニュー1」と「メニュー2」です）。ドロップダウンに表示されるこれらのセクションから選択された3次レベル（「one-a」、「one-b」など）もあります。これにより、サイトのどこからでも、選択された3次ページに直接移動できます。完全なナビゲーション（プライマリレベルとセカンダリレベル）もサイトフッターで利用できます
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ただし、ここでの問題はaccessibilityにあります。このタイプのナビゲーションのキーボードナビゲーションは、ナビゲーションドロップダウンメニューを開いて下位セクションを選択できない（マウスホバーで開く）ことができないため、キーボードを介して選択できる要素はプライマリナビゲーションオプションのみです（ナビゲーション1、ナビゲーション2、ナビゲーション3など）。 。これを選択すると、そのアイテムの一種のランディングページが開きますが、ランディングページには利用可能なすべてのリンクが含まれているわけではありません。いくつかの見出しのプロモーションアイテム。キーボードを介してフルナビゲーションを使用する唯一の方法は、フッターのナビゲーションを使用することです。ただし、フッターは（明らかに）ページの下部にあります。本体コンテンツ内には多くのコンテンツがあるため、タブオーダーは、キーボードユーザーがサイトのナビゲーションに簡単にアクセスできないことを意味します。
だから、ここで私のオプションは何ですか？
- 言う、それをねじ込みます。キーボードを使用してこの時代をナビゲートする人（理想的な答えではありません）
- タブの順序を変更して、タブの使用時にフッターリンクが最初に選択されるようにします（これは予期しない動作なので、あまり望ましくありません）。
- キーボードのみのユーザーのためだけに、すべての下位カテゴリーのこれらのカテゴリーランディングページにリンクを含めるようにWebサイト全体の戦略を強制的に変更します（キーボードのみを使用して閲覧するユーザーの使用状況はわかりませんが、仮定これは非常に小さい数ですが、この仮定に依存したくありません）
- その他-確かに上記のオプションよりも良いものがあります
注：スクリーンリーダーについては心配していません。これらのタイプのユーザーが利用できるように、ナビゲーションは正しく構成されます。この問題は、主にキーボードユーザーのアクセシビリティを目的としています。
私はあなたの最良の選択肢はキーボードナビゲーションを実装することだと思います。あなたはかなり簡単にそれを行うことができますが、あなたが回避しなければならないいくつかの落とし穴があります。キーボードの矢印キーとタブキーを使用してすべてのメニューをナビゲートできるようにしました。 （悲しいことに、私がお見せする例は、悪い海外アウトソーシングによってほとんど破壊されています...ため息...）
キーボードに対応するには、主にフォーカスイベントを処理する必要があります。
ホバーベースのメニューのもう1つの問題は、タッチデバイスです。多くの場合、さまざまな方法で対応できます（たとえば、iOSではダブルタップが必要な場合があります）が、クリック/タップおよびホバーで開くことも確認します。
オプション＃4に関しては、これはUXの観点からはアクセシビリティよりも優れたアイデアです。
リンクがプルダウン/メガメニューにある場合の問題は、リンクがすぐに表示されないことです。ユーザーは他のオプション（視界外、気がかり）を簡単に忘れることができます。ユーザーがオプションを簡単にスキャンし、サイト内でより簡単に「方向付け」できるように、これらの内部ページにサブカテゴリを一覧表示することをお勧めします。
最後に、多くの人がキーボードナビゲーションを好みます（決して大多数ではありませんが、多くのパワータイパー/プログラマーは、可能な限りマウスを避けます）。補助ポインティングデバイスに依存している人もたくさんいます。通常、大小の運動障害のある人がいるので、できれば彼らに対応することを強くお勧めします。
カナダ政府が開発したWeb Experienceツールキットに実装されているメガメニューをご覧ください。これは、キーボードとマウスのどちらからでもアクセスできます。メニューはRIAとjQueryを使用します。メニューがフォーカスを取得すると、矢印を使用してメニュー構造内を移動できます。右矢印と左矢印はトップレベルのメニューを移動します。エスケープを使用してメニューを閉じることができます。トップレベルのメニューからタブを押すと、メニュー構造の外にフォーカスが移動します。このプロジェクトのURLは次のとおりです http://ircan-rican.gc.ca/projects/wet-boew-menubar
まあ、私はうまくいくかもしれないアイデアを持っています：
視覚障害者のために：
通常はHTMLでコーディングするので、キーボードのタブからアクセスできるように、メインメニューを番号なしリストとドロップダウンメニューとして保持します。このナビゲーションをすべて非表示にします。そのため、このサイトを使用する通常のユーザーは、通常のようにマウスホバーでそれを使用します。
現在、キーボードナビゲーションは視覚障害者に最適です。
欠点：キーボードナビゲーションは、2次および3次のすべての内部アイテムを通過する必要があり、終了すると、プライマリナビゲーションにのみ移動します。
onfocus()イベントでメニュー表示をトリガーするようにデザインを変更できます。
このAccessible jQuery UIデモ を参照してください。数か月前に出会いました。これは完全にキーボードに対応しています。画像カルーセル、スライダー、メニュータブ、など。
矢印キーを使用してメニューの兄弟を移動し、タブを使用してメニュー階層を下降または上昇します。
確かに、それはメガメニューではありませんが、あなたのデザインに適応できるかもしれません。
Web Accessibility Initiative（WAI）は、コンテンツのブロックにアクセスしたりスキップしたりするためにマウスオーバーではなくクリックすることで、「 展開および縮小可能なメニューを使用してコンテンツのブロックをバイパスする 」を提案しています。このページには、コード例と、同様のトピックに関する関連資料が含まれています。
説明
この手法を使用すると、ユーザーは、ユーザーが制御して展開または折りたたむことができるメニューにその素材を配置することにより、繰り返し素材をスキップできます。ユーザーは、メニューを折りたたむことにより、繰り返される素材をスキップできます。ユーザーは、ユーザーインターフェイスコントロールを呼び出して、メニューの要素を非表示または削除します。リソースのセクションでは、メニュー、ツールバー、およびツリーのいくつかの手法をリストしています。これらの手法を使用して、ナビゲーションをスキップするメカニズムを提供できます。 注：サーバー側のスクリプトを使用して、Webページの変更されたバージョンを再読み込みすることで、同様のアプローチを実装できます。[1]
ほとんどの場合、メニュー構造全体を書き換える必要がありますが、できるだけ多くの情報をウェブサイトに掲載し、アクセシビリティ測定で高い評価を得たいと考えています。
Microsoftの方法で実装することもできます。各メニュー項目にaccesskeyを示す小さな下線付きの文字を含めます。 itesの使用が非表示になっている場合でも、アクセスキーは一度しか使用できないため、これには多くのJSによるアクセスキーのやり取りが含まれます。
Word（2007/2010ではない）を開き、キーボードを使用してナビゲートしてみてください。慣れていれば、altを使用するのはかなり簡単です。