アクセシブルなトグルメニューの設計

推奨： これはキーボード操作を優先したパターンから始まります。展開アクションをEnterキーとSpaceキーにバインドし、明確なフォーカスインジケーターを提供し、支援技術を利用しているユーザーが余計なクリックなしに新しい状態を聞き取れるように、ライブリージョンを通じて変更を通知します。.

コントロールはボードの北側に配置されており、ヘッダーの近くにあるため、オンラインアクセスまたはローカル設定のユーザーは、長々と操作しなくてもアクセスできます。パネルが表示されるときは、周囲のコンテンツを押し出すか、スライドインするかのいずれかにする必要があります。他の要素の下に沈み込まず、Escapeキーを押すことで簡単に折りたたむことができる必要があります。リンクを含む領域は、デザイナーによって短いラベルと長いリストの両方に対して、略してメニューと呼ばれます。.

ARIAロールを使用する：role=”region” または “navigation”、 aria-expanded は反映する state, 、コントロールを折りたたみ可能なパネルにリンクするaria-controls、およびパネルが表示されたときに、丁寧なARIAライブリージョンを介してコンテンツが更新されるようにします。このシステムは、オンラインまたはオフラインに関わらず、さまざまなデバイスやタイムゾーンで動作し、それらのパターンはさまざまな画面サイズでテストされる必要があります。.

固定インターフェースで小さなフットプリントで設計する場合は、長いラベルと短いトグルを検討してください。コンポーネントが廃止された場合は、堅牢な代替品と交換し、変更を文書化してください。そのトレードオフは、ユーザーエクスペリエンスの真珠です。ユーザーによって節約されるほんの数秒は、単なる思考の糧ではありません。多言語プロジェクトでは、国別のレイアウトと、アクティブになるまでくぼんだ状態の左右のパネルを計画してください。認知負荷を軽減するために、検証済みのパターンのみを使用してください。.

以下の考慮事項は、さまざまな状況におけるチームを支援します。小さなデバイスでのユーザテストから開始し、パターンを実装する人は、複雑な方法ではなく、簡単なアプローチを参考にします。優れたエクスペリエンスの価値は、脆弱なデモンストレーションではなく、利用者がメニューのオプションにたどり着くまでに節約された時間によって測られます。船乗りは、インターフェースが異なる言語や国に適応しなければならない場合でも、予測可能なフィードバックと真珠のようなインタラクションを高く評価します。.

キーボード操作に対応したトグルをaria-expanded、aria-controls、およびフォーカス管理で実装する方法

推奨：単一のボタンをトリガーとしてバインドし、aria-controlsを持つパネルにそれを紐づけ、aria-expanded=”false”およびaria-hidden=”true”で初期化してパネルを非表示にします。アクティブ化されたら、aria-expandedを“true”に反転させ、aria-hiddenを“false”に設定し、パネル内の最初のフォーカス可能なアイテムにフォーカスを移動します。.

構造と振る舞い

コントロールは、id（例：toggleBtn）を持つボタンとし、aria-expandedで現在の状態を反映させ、さらにaria-controlsでパネル（例：panel1）を指定します。パネルは、id=”panel1”を持ち、role=”region”を使用し、aria-labelledby=”toggleBtn”に加え、tabindex=”-1”とaria-hidden=“true”を設定して、開くまでタブオーダーから除外します。開いたときは、aria-hiddenを“false”に切り替え、パネルに少なくとも1つのフォーカス可能な要素が含まれていることを確認します。存在しない場合は、パネル自体にフォーカスを当てます。閉じるときは、aria-expandedを“false”、aria-hiddenを"true"に戻し、トリガーにフォーカスを戻して、前後のナビゲーションがスムーズに保たれるようにします。.

キーボード操作

トリガー上のkeydownを処理：EnterまたはSpaceでパネルを切り替え、Escapeで閉じてトリガーにフォーカスを戻す。パネル内では、TabとShift+Tabで循環させてフォーカスをトラップし、ユーザーが非表示のコンテンツに迷い込まないようにする。閉じた後は、トリガーにフォーカスを戻す。モバイルでは、大きなタップターゲットを提供し、タッチによるアクティベーションが確実に行われるようにする。トリガーとパネル内の最初のインタラクティブなアイテムにフォーカスがあることを視覚的に示し、分かりやすくする。.

実際的な面では、このアプローチは、訪問者がツアー、プログラム、座席オプションを検討するさまざまな状況での日常的な使用をサポートします。サイト名がオアフ島、ユタ州、アリゾナ州のような場所の記念碑やインスピレーションに関連する場合でも、パターンは一貫しています。コンパクトなオプションエリアを開き、希望のアイテムを選択すると、キーボード操作の流れを失うことなく下のコンテンツが更新されます。以前に使用していた機能が廃止されたり、再販オプションが変更された場合は、ariaのステートとタグを更新して、訪問がスムーズに継続されるように動作の一貫性を維持してください。.

実際の導入に関するヒントとしては、ユーザーが施設内で待機したり移動したりする場所でもコントロールが使いやすい状態を保ち、論理的な読み順を維持するためにトリガーの下にパネルを配置することなどが挙げられます。予約訪問中はパネルを数分間表示し、閉じた後はメインコンテンツへの明確な経路を提供します。このパターンは、ツアー、お土産、座席の詳細、プログラム一覧へのクイックアクセスをサポートし、ピーク時や年間を通してのイベント開催時でも、モバイルデバイス上で使いやすさを維持します。注意深く設計することで、アリゾナの地元の会場を探索している場合でも、オアフやユタのような遠隔地への訪問を計画している場合でも、混乱することなくあらゆる選択肢を検討できるようになり、さまざまなプログラムやオファーに合わせて名付けられた会場全体で拡張できます。.

トグルメニューを定義するARIAロール、属性、およびDOM構造は何ですか？

Recommendation: 単一のスイッチを実装して、オプションの隠れたパネルを切り替えます。スイッチに aria-expanded を使用し、パネルを参照する aria-controls を使用します。スクリーンリーダーが明確なラベルをアナウンスするように、aria-labelledby でパネルをスイッチに結び付けます。このパターンは、すべてのデバイスで確認する必要があります（以下を含む）。 タブレット, 、そして施設環境において機能します。 記念碑 また、入場の段取りやアクセシビリティに影響を与える国立の史跡も含まれます。 every ユーザー、, what 公開するラベルとその方法。.

DOM構造：スイッチはDOM内でパネルよりも前に出現します。スイッチには、次のような安定したIDがあります。 切り替えボタン, 、パネルには次のような ID があります。 オプションパネル. 。パネルの内側には、ボタンやリンクなどのインタラクティブな要素を配置して、次のようなアクションを提供します。 ツアー, 座席, 面会時間, 訪問者, ボード access, 日付 information, プログラム 詳細、, Foodそして Drinks. 各項目はそれぞれ独自のアクセス可能な名前を使用します。パネルはaria-labelledbyでスイッチを参照し、スイッチはaria-controlsでパネルを参照する必要があります。この配置は、以下の場合に役立ちます。 small 画面だけでなく、動作もします below 一貫したセマンティクスで使用される場合、主に national 美術館または フォード関連施設。.

ARIA のロールと属性パネルについて、リストのようなセマンティクスで記述し、各項目をクリック可能なコントロールとして記述します。ARIA属性を使用して、状態（スイッチのaria-expanded）、識別子（スイッチのaria-controls、パネルのaria-labelledby）、および可視性（閉じている場合はaria-hiddenまたはhidden属性）を伝えます。フォーカス順序が論理的に維持されるように、閉じているときはパネルを連続フォーカスから外し、閉じているときはフォーカスをスイッチに戻します。, けれども いくつかの実験で示されている分役立ちます。多くの場合、このアプローチは been 特に明瞭かつ力強い印象を受けたのは、栄誉プログラムまたは ボード 会議。.

キーボードとフォーカス動作：開くと、最初の項目にフォーカスを移動します。上下の矢印キーで項目間を移動、Home/Endキーで最初または最後の項目へジャンプ、Enter/Spaceキーで有効化、Escapeキーで閉じることができるようにします。この動作は以下で機能するはずです。 every ユーザーを含む タブレット オン small スクリーンやスクリーンリーダーを使用している人、そしてローカライズされたUIでも機能するようにする必要があります。最終的なパターンは、バランスを取ることを目指しています。 final 広く受け入れられています。 national コンテキスト：; けれども 一部のチームは適応するかもしれませんが、コアとなる流れは予測可能で理解しやすいままです。その chosen アプローチは、会議、ツアー、プログラムの発表をサポートします。 ボード またはその他の委員会。.

実践的な考慮事項：ギャラリー、エントランス、食事施設などの実際のシナリオでは、以下を確認してください。 drinks, 食べ物そして ドレス- コード通知は、セマンティクスを損なうことなく、同じコントロールを介して表示できます。オプションを選択した場合は、明確な状態と安定したパスを提供してください。日付情報または tours スケジュールを検討してください。 フォード- ブランドサイト、, national 美術館、そして 記念碑 施設について、アクセシビリティを確保し、 visiting そして 訪問者 日常業務。ローカリゼーションのサポートを提供し、 japanese 必要に応じて言語を使用してください。.

テストとローカリゼーション：キーボード操作や支援技術で検証し、小型の携帯電話から タブレット デバイスや大型デスクトップ向けです。 Japanese オーディエンスは、自然に読めるローカライズを提供し、同じ構造を維持します。テストの議事録は ボード または委員会は、最終的な変更を通知する必要があり、 chosen アプローチは準備万端であるべきです date そして イベント 計画、を含む遅い到着と入口手順。目標は穏やかで、, 主として 来訪者とスタッフ双方をサポートする予測可能な流れ。.

開閉時のフォーカス順序、フォーカストラップ、およびアクセシブルなラベル付けの処理方法

推奨：パネルが表示されたら、パネル内の最初のインタラクティブな要素にフォーカスを移動し、パネルが閉じるまでパネル内でナビゲーションを固定します。閉じた後は、フォーカストリガーコントロールに戻します。.

主な原則として、決定論的なフォーカス順序の確立、明確なラベル付け、そしてパネルをすべての訪問者のアクセシビリティを向上させる個別の制御領域として扱うことが挙げられます。.

決定性のあるフォーカスパス：パネル内のすべてのフォーカス可能な要素を、論理的な順序（まず、Collapseボタン、次にユーティリティコントロール（検索やフィルターなど）、続いて主要なアクションとコンテンツセクション）で識別します。DOMの順序を維持して、自然な読み上げフローをサポートします。これにより、主にキーボードでコンテンツを移動するユーザーを支援します。アクティブ化されると、最初の項目にフォーカスを当てます。フォーカスが外れた場合は、パネルのルートにリダイレクトします。.
トラップと復元：TabキーとShift+Tabキーが可視領域内のみを循環するように、フォーカストラップを実装します。明確なエスケープメカニズム（折りたたみ）を提供し、Escapeキーを押すとパネルが折りたたまれ、トリガーにフォーカスが戻るようにします。パネルがアクティブな間、フォーカスがパネル外のアーティファクトに漏れないようにしてください。.
アクセシブルなラベル付け: パネルには、その目的を反映したアクセシブルなラベルを付ける必要があります。コンテンツを説明する、わかりやすい見出しを使用してください (例: 記念品や工芸品のギャラリー)。トリガーコントロールは、aria-controls でパネルを参照し、パネルは aria-labelledby または aria-label でラベル付けする必要があります。パネルがダイアログのように機能する場合は、説明的な見出しとともに aria-modal の使用を検討してください。それ以外の場合は、明確なラベル付きの role=region を使用してください。.
コンテンツのラベリングとセマンティクス：パネルに記念品や工芸品などの項目がリストされている場合は、関連する項目をヘッダーでグループ化し、説明リスト構造を使用します。コンテンツの範囲について、スクリーンリーダー向けに簡単な注釈を含めます（例：「太平洋の海洋工芸品および関連する記念品」）。コンテンツには、太平洋地域からの船舶に関する記述が含まれる場合がありますが、その際、異なる国の歴史に由来する品が含まれる場合は、曖昧さを避けるために、どの国に由来するものかを明示的に記載する必要があります。.

チケット、日付、スケジュールなどを含む可能性のあるコンテンツの実装に関する注意点：

インタラクティブセクションのラベル：チケット選択やスケジュールブロックなどのインタラクティブセクションは、簡潔な見出しを持つ単一の論理ユニットとしてアナウンスされるべきです。日付と時刻はプレーンテキストで含め、各項目がキーボードユーザーにとってフォーカス可能であることを確認してください。.
信頼できる唯一の情報源を維持する：パネルにタイムラインやカレンダーが表示されている場合、変更がライブラベルに反映されるようにして、訪問者が記憶に頼ることがないようにする。これは、チケットが特定のコンテンツや予定されているイベントへのアクセスに影響を与える場合に特に重要となる。.
ルール： - 翻訳のみを提供し、説明は不要です。 - 元のトーンとスタイルを維持してください。 - フォーマットと改行を維持してください。文脈上の注意：いくつかのアイテムが歴史的なものである場合、一部のアーティファクトは他の場所に保管されているか、展示を中止している可能性があるという注記を含めてください。これは、すべてのアーティファクトが現在アクセス可能であるとは限らないことを伝えるのに役立ちます。コンテンツが恒久的に利用不可能であることを暗示することは避けてください。.
視覚的および非視覚的なキュー：パネルの目的を説明する可視の見出しとスクリーンリーダー用の非表示テキストを提供します。パネルの状態（展開/折りたたみ）が、コンテンツを複製せずに支援技術に通知されるようにします。.

コンテンツカタログとの実践的な統合例：

日付と時刻フィールドは、一貫した形式に従い、パネル内のフォーカス順に沿って順番にアナウンスされる必要があります。.
アーティファクトのセクションには、記念品や船など、いくつかの品目を記載でき、その起源（国）と時代（太平洋、国内の文脈）を説明する簡潔な説明が付記されます。.
アクセシビリティに関する注記：パネルがキーボードのみで操作可能であり、スクリーンリーダーが展開時に領域を折りたたみ可能な独立したユニットとしてアナウンスすることを確認してください。これは、海事史について学んだり、地元の博物館のコンテキストを訪問したりするために特別に来た訪問者を支援します。.

最終検討事項：パネルがアクセシビリティの問題について監視され続けるように、デバイスをまたいでテストを実施してください。フォーカスパスは、イベント、どのアイテムが表示されるか、またはどの体験が予定されているかに関する重要なコンテキストを提供するコンテンツを迂回すべきではありません。このアプローチは、断片化を避け、スムーズな前方フローを維持するユーザー Journey をサポートし、海洋展示や文化的な国コレクションへの訪問を計画するのと同様に、明確で中断のないウォークスルーを可能にする必要があります。.

アクセシビリティのテスト方法：手動キーボード、スクリーンリーダー、自動チェック

まず、オンラインでキーボード操作を重視した監査を行います。フォーカス順序をマッピングし、リストを表示するコントロールがTabキーとShift+Tabキーでアクセスでき、EnterキーまたはSpaceキーでアクティブ化され、閉じた後にトリガーにフォーカスが戻ることを確認します。フォーカス可能な各項目が明確なラベルでアナウンスされることを確認し、キーボード操作に頼る人々とテストを行います。ループを短く保ち、結果を文書化し、次のコントロールがスタックすることなく前方へフォーカスされることを確認します。これにより、見逃し状態が減少し、高速で予測可能なフローを好むユーザーに安心感を与えます。テスト時には、ハワイ料理とドリンクのセクション、座席オプション、屋外の港の景色などのコンテンツを考慮して、実際の使用状況をシミュレートし、レイアウトの変更を通じてラベルが一貫していることを確認します。iconic sources と исторический источник はどう翻訳すればいいですか？いずれのソースであっても、公式ガイダンスを参照し、反復可能なテスト計画を徹底してください。テストには、統一された形式で結果を報告するコールバックを含める必要があり、各パスでは、インタラクティブな項目で利用可能な時間が表示され、ユーザーが次に何を期待できるかを知ることができます。.

手動キーボードテスト

最初に対話型要素に焦点を当て、前方ナビゲーションを使用して次の要素に移動します。アクティベーションキーを押してパネルを表示し、各項目をトラップが発生しないように移動し、Escapeキーでトリガーにフォーカスが戻ることを確認します。パネルのラベルがコンテンツ（食品、座席、屋外オプション、ボート、港）を明確に説明しており、スクリーンリーダーのユーザーが意味のあるアナウンスを聞けることを確認します。コントロールが南北の読み順で存在し、長いラベルと短いラベルの両方が正しくレンダリングされることを確認します。要素の状態が変化する場合は、短く説明的な更新が発声またはアナウンスされ、二次的なアクション（コールバック）がページ全体をリフレッシュしなくてもアクセス可能であることを確認します。.

スクリーンリーダーと自動チェック

VoiceOver、NVDA、JAWSを用いて、表示されたリストの各項目が正しい順序でアナウンスされること、およびaria-expandedとaria-controlsが現在の状態を反映していることを確認します。オンラインツールで自動チェックを行い、altテキストの欠落、不適切なランドマークの使用、および低い色のコントラストを検出します。これにより、手動での確認では見落とされる可能性のある問題を特定できます。Lighthouseとaxe-coreのチェックを実行して、結果を2番目のベースラインと比較します。パネルの動的な更新がアナウンスされるか、aria-liveを介して処理されることを確認し、座席、利用可能な時間、イベントリストなどのコンテンツをナビゲートする際に、ユーザーに情報が提供されるようにします。開発者向けメモがユタ州などの地域のrecreationgovページを参照している場合は、レイアウトの変更やサードパーティの埋め込みを通じて実装の一貫性が維持されていることを確認します。起動にマウスが必要ないこと、およびシーケンスがテスターによってデバイス間で均一であると認識されることを確認します。Источникの推奨事項を訪問して従い、結果を追跡可能性のために記録します。新しいスクリーンリーダーは、ラベルのわずかな不一致を検出しますか？もしそうなら、ラベルを調整し、チェックを再実行して、すべてのユーザーの信頼性と安心感を維持します。目標は、オンラインでの現実世界の利用に耐えうる、堅牢でアクセス可能なエクスペリエンスを作成することです。これには、同じテストの2回目の反復のような、短く反復的なシナリオとの比較が含まれます。慎重なドキュメント化と繰り返しテストを通じて、チームは多様なニーズを持つ人々にとって使いやすい、弾力性のあるソリューションを提供できます。.

トグルメニューにおけるクロスブラウザの癖への対処とプログレッシブエンハンスメント

推奨： セマンティックボタンをトリガーとして使用し、アクティブ化されると展開するリージョンを使用します。ベースラインインタラクションはスクリプトなしで機能し、キーボード（Enter/Space）でも操作可能です。.

オアフ島の太平洋沿いにある海軍慰霊施設では、入り口でチケット、音声ガイド、式典の案内を提供する必要があります。選択されるパターンは、すべての訪問者がアクセスでき、アクセシビリティガイドラインに沿ったものでなければなりません。コンテンツは、待ち時間や通路を歩く際に利用できるよう設計し、明確な標識と食事や飲み物の簡単な予約オプションを用意します。真珠湾の記憶や攻撃など、第二次世界大戦の物語を含め、背景を豊かにしながら、ナビゲーションは簡潔に保ちます。.

クロスブラウザの癖は、displayルールや高さに基づく表示に頼る場合に発生します。iOSのSafariやWindowsのEdgeでのレイアウトジャンプを避けるには、パネルをフロー状態に保ち、max-heightまたはtransformにCSSトランジションを適用し、モーションを無効にしているユーザーにはアニメーションなしのフォールバックを適用します。以下では、初期状態が期待どおりであることを確認し、非JSユーザーがインタラクションを行うための明確なキューを確実に確認できるようにします。アクセシビリティに関する考慮事項は、アプローチを導き、すべての要素が折りたたみ部分の下やメインコンテンツパスに沿って使用可能な状態を維持するようにする必要があります。.

プログレッシブエンハンスメント これは、aria-expandedを更新し、表示された領域内にフォーカスを閉じ込め、開いたときに最初のリンクにフォーカスを移動する小さなスクリプトを追加することで、さらに充実させることを意味します。最終的なエクスペリエンスは、Escキーで閉じて、その後トリガーにフォーカスを戻すことをサポートする必要があります。.

テストは、デスクトップとモバイルのEdge、Safari、Chrome、Firefoxを対象とします。prefers-reduced-motionとハイコントラストモードで検証し、スクリプトがブロックされた場合でも、コアフローが使用可能な状態を維持してください。コンテンツがスクロールせずに見える状態を保ち、時間、劇場プログラム、およびチケット、オーディオ、沿岸の記念館などの訪問のためのサービス時間を含む、重要な情報への一貫したアクセス経路を提供してください。.

コンテンツ戦略は、ユーザーの旅をマッピングする上で重要です。入り口、チケット、オーディオツアーには、最終案内、スケジュールされた更新、サービス時間などの明確なラベルを含める必要があります。次回のツアーに関する重要な詳細や、ルート上の予約、食事、飲み物の様々なオプションを含めることで、ほとんどのユーザーが遅延なく進むことができます。.

ベースラインアプローチとフォールバック

コアとなる体験は、ネイティブなトリガーと、スクリプトが失敗した場合でもアクセス可能なコンテンツブロックに依存します。aria-expandedを使用して状態を伝え、パネル内のすべてのリンクがキーボードでアクセスできるようにしてください。これは、標識や統一されたビジュアルが安定したアクセスをサポートする、サイトマップ上の待ち時間や徒歩ルートにおいて重要です。.

テスト、アクセシビリティパターン、およびコンテンツ戦略

コントラスト比の監査、グレードが低いデバイスでのテスト、および reserve、more、next などのアクションが支援技術によって明確にアナウンスされることを確認します。スクリプトが失敗した場合は、エントランス、劇場情報、オーディオツアーのオプションなど、重要な情報をプライマリーフローに保持し、さまざまなコンテキストのユーザーをサポートし、すべての訪問者のアクセスを確保します。.

メニューを開く、メニューを閉じる – アクセシブルなトグルメニューの設計