angular-aria

このスキルは Angular リポジトリの Angular Aria に基づいており、2026-02-02 に生成されました。

Angular Aria は、一般的な WAI-ARIA パターンを実装する、ヘッドレスでアクセシブルなディレクティブのコレクションです。ディレクティブがキーボード操作、ARIA 属性、フォーカス管理、スクリーンリーダーのサポートを処理します。HTML 構造、CSS スタイリング、ビジネスロジックは、ご自身で用意します。

npm install @angular/aria でインストールします。

適用する場面

次のような場合に、このスキルを使用します。

• WAI-ARIA に準拠するカスタムのアクセシブルな UI コンポーネントを構築する
• キーボードナビゲーションのパターン（矢印キー、Enter、Escape、Tab）を実装する
• インタラクティブなウィジェットにフォーカス管理を追加する
• カスタムスタイリングを適用するヘッドレス／スタイルなしの UI プリミティブを作成する
• オートコンプリート、コンボボックス、リストボックス、セレクト、複数選択の入力を構築する
• 適切な ARIA ロールを持つメニュー、メニューバー、ツールバーを実装する
• アコーディオン、タブ、ツリー、グリッドのパターンを作成する
• カスタムコンポーネントにスクリーンリーダーのサポートが必要である

次の場合は、このスキルを使用しないでください。

• Angular Material コンポーネントを使用する場合（アクセシビリティが組み込まれています）
• ネイティブ HTML 要素を使ったシンプルなフォームを構築する場合
• 必要な WAI-ARIA パターンが Angular Aria でサポートされていない場合

コア

トピック	説明	リファレンス
概要	Angular Aria の紹介、使用する場面、含まれる内容	core-overview

検索と選択

トピック	説明	リファレンス
オートコンプリート	入力に応じて候補が絞り込まれるテキスト入力	selection-autocomplete
コンボボックス	テキスト入力とポップアップを連携させるプリミティブディレクティブ	selection-combobox
リストボックス	キーボードナビゲーションに対応した単一選択または複数選択のオプションリスト	selection-listbox
セレクト	単一選択のドロップダウンパターン	selection-select
複数選択	コンパクトに表示する複数選択のドロップダウン	selection-multiselect

ナビゲーションとアクション

トピック	説明	リファレンス
メニュー	ネストされたサブメニューとキーボードショートカットに対応したドロップダウンメニュー	navigation-menu
メニューバー	アプリケーションの永続的なメニュー用の横方向ナビゲーションバー	navigation-menubar
ツールバー	論理的なキーボードナビゲーションに対応したコントロールのグループ	navigation-toolbar

コンテンツの構成

トピック	説明	リファレンス
アコーディオン	展開／折りたたみに対応した折りたたみ可能なコンテンツパネル	content-accordion
タブ	自動または手動で有効化するタブ付きインターフェース	content-tabs
ツリー	展開／折りたたみに対応した階層リスト	content-tree
グリッド	セル単位のキーボードナビゲーションに対応した二次元データ	content-grid